/* ============================================================================
   SATKAR SOFTWARE SOLUTION — MERGED TEMPLATE ADDITIONAL STYLES (v2)
   ============================================================================ */

/* ==========================================================================
   1. HERO — techcode slider-one
   ========================================================================== */
.merge-techcode-hero {
  --color-seven: #071a2e;
  --white-color: #ffffff;
  --main-color: #044a9e;
  --theme-color2: #044a9e;
  --headings-color: #071a2e;
  --color-three: rgba(255, 255, 255, 0.35);
  --font-17: 17px;
  --font-18: 18px;
  --font-20: 20px;
  position: relative;
  background-color: var(--color-seven);
  /* extra bottom space reserved so the features strip can overlap by ~50% */
  padding-bottom: 140px;
}

.merge-techcode-hero .auto-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.slider-one {
  position: relative;
  background-color: var(--color-seven);
}

.slider-one .swiper-slide {
  position: relative;
  overflow: hidden;
  padding: 50px 0 50px;
}

.slider-one_image-column {
  position: relative;
}

.slider-one_image-inner {
  position: relative;
  text-align: right;
}

.slider-one_content-inner {
  position: relative;
}

.slider-one_image {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 30px;
  transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.slider-one_image img {
  position: relative;
  overflow: hidden;
  border-radius: 140px 0px 140px 0px;
}

.slider-one .swiper-slide-active .slider-one_image {
  transition-delay: 300ms;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slider-one_circle {
  position: absolute;
  left: 100px;
  top: -50px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background-color: var(--main-color);
}

.slider-one_graph {
  position: absolute;
  right: -60px;
  bottom: 80px;
  z-index: 1;
}

.slider-one_border {
  position: absolute;
  left: 25px;
  top: 30px;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 140px 0px 140px 0px;
  border: 3px solid var(--color-three);
}

.slider-one_pattern-layer {
  position: absolute;
  left: 50px;
  top: 10px;
  width: 107px;
  height: 106px;
  z-index: 10;
  background-repeat: no-repeat;
}

.slider-one_heading {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  color: var(--white-color);
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  transition: all 1000ms ease;
  margin-bottom: 25px;
}

.slider-one_heading span {
  position: relative;
  display: inline-block;
}

.slider-one_heading span::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: -2px;
  right: 0;
  height: 6px;
  background-color: var(--main-color);
}

.slider-one .swiper-slide-active .slider-one_heading {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 300ms;
}

.slider-one_eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-color);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(-12px);
  transition: all 800ms ease;
}

.slider-one .swiper-slide-active .slider-one_eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.slider-one_text {
  position: relative;
  opacity: 0;
  line-height: 34px;
  transform: scaleY(0);
  transform-origin: top;
  font-size: var(--font-18);
  color: rgba(255, 255, 255, 0.85);
  transition: all 1000ms ease;
  margin-top: 25px;
  margin-bottom: 35px;
}

.slider-one .swiper-slide-active .slider-one_text {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 600ms;
}

.slider-one_options {
  position: relative;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 1000ms ease;
}

.slider-one .swiper-slide-active .slider-one_options {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 900ms;
}

.slider-one_trust-line {
  margin-top: 26px;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.65);
}

.slider-one_play {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  text-align: center;
  border-radius: 999px;
  padding: 16px 34px;
  display: inline-block;
  color: var(--white-color);
  font-size: var(--font-17);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #fff;
  margin-left: 20px;
  padding-right:
    /* background-color: var(--theme-color2); */
}

/* .slider-one_play i {
  background-color: var(--white-color);
  color: var(--main-color);
  display: inline-block;
  font-size: var(--font-18);
  height: 40px;
  left: 0;
  line-height: 50px;
  position: absolute;
  top: 0;
  text-align: center;
  width: 50px;
  border-radius: 999px;
} */

.slider-one_play:hover {
  color: var(--accent2);
}

.theme-btn {
  cursor: pointer;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-style-two {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  text-align: center;
  border-radius: 999px;
  padding: 16px 34px;
  display: inline-block;
  color: var(--white-color);
  font-size: var(--font-17);
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--theme-color2);
}

.btn-style-two:before {
  transition-duration: 800ms;
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: -200%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 1;
  background-color: var(--headings-color);
}

.btn-style-two:hover:before {
  top: -40%;
}

.btn-style-two:hover {
  color: var(--white-color);
}

.btn-style-two .btn-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}

.btn-style-two .btn-wrap .text-one {
  position: relative;
  display: block;
  color: var(--white-color);
  transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-one:first-child {
  transform: translateY(-150%);
}

.btn-style-two .btn-wrap .text-two {
  position: absolute;
  top: 100%;
  display: block;
  color: var(--white-color);
  transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-two {
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-color);
}

.merge-techcode-hero .swiper-pagination {
  bottom: 28px !important;
  text-align: center;
}

.merge-techcode-hero .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.merge-techcode-hero .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 32px;
  border-radius: 6px;
}

@media only screen and (max-width: 1240px) {
  .slider-one_graph {
    right: 15px;
  }
}

@media only screen and (max-width: 1023px) {
  .slider-one .swiper-slide {
    /* padding: 50px 0 110px; */
    padding: 50px 0 0px;
  }

  /* .slider-one_image-column {
    margin-top: 50px;
  } */

  .slider-one_pattern-layer {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .slider-one_heading {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
  }

  .slider-one_play {
    margin-left: 0;
    margin-top: 30px;
  }

  .merge-techcode-hero {
    padding-bottom: 90px;
  }
}

@media only screen and (max-width: 479px) {
  .slider-one_graph {
    display: none;
  }
}


/* ==========================================================================
   2. FEATURES — overlaps the hero bottom by ~50%
   ========================================================================== */
.merge-shifah-features {
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 20;
  /* Negative margin pulls the strip up so roughly half of it sits on the hero */
  margin-top: -130px;
}

/* Modern stat-card treatment lives in section 22.5 (SATKAR 2026 refresh). */

@media only screen and (max-width: 991px) {
  .merge-shifah-features {
    margin-top: -90px;
  }
}


/* ==========================================================================
   3. WHY CHOOSE US — inspire
   ========================================================================== */
.merge-inspire-whychoose.section-padding {
  padding: 50px 0 50px;
}

.merge-inspire-whychoose .section-title {
  text-align: center;
  /* margin-bottom: 65px; */
}

.merge-inspire-whychoose .section-title h6 {
  font-size: 16px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.merge-inspire-whychoose .section-title h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--text);
  font-weight: 800;
  margin: 0;
  font-family: var(--font-head);
}

.merge-inspire-whychoose .whychoose-single-item {
  position: relative;
  z-index: 1;
  margin-top: 45px;
}

.merge-inspire-whychoose .whychoose-icon-box {
  position: absolute;
  left: 0;
  top: 0;
}

.merge-inspire-whychoose .whychoose-icon-number {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-light);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.merge-inspire-whychoose .whychoose-info {
  padding-left: 85px;
  padding-top: 20px;
}

.merge-inspire-whychoose .whychoose-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.merge-inspire-whychoose .whychoose-info p {
  color: var(--text2);
  line-height: 1.75;
  font-size: 17px;
}

.merge-inspire-whychoose .whychoose-number-bg {
  position: absolute;
  top: -40px;
  left: 10px;
  width: 120px;
  z-index: -1;
  text-align: right;
}

.merge-inspire-whychoose .whychoose-number-bg span {
  font-size: 12.5rem;
  color: var(--accent-light);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-head);
}


/* ==========================================================================
   4. SERVICES + VIDEO — xyz (text-only edits applied in markup)
   ========================================================================== */
.merge-xyz-services {
  --clr-main: #2684E5;
  --clr-main-rgb: 38, 132, 229;
  --clr-accent: #1c6fd0;
  --clr-accent-rgb: 28, 111, 208;
  --clr-white: #ffffff;
  --clr-white-rgb: 255, 255, 255;
  --clr-dark: #071a2e;
  --clr-dark-rgb: 7, 26, 46;
  padding-top: 0;
  position: relative;
  z-index: 0;
}

.merge-xyz-services .mega-section {
  /* padding-block: 5rem; */
  padding: 50px 0 50px;
  position: relative;
  z-index: 0;
}

.merge-xyz-services .bg-main-color {
  background-color: var(--clr-main) !important;
}

.merge-xyz-services .overlay-color-bg {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  z-index: 0;
  background-color: var(--clr-dark);
  opacity: 0.85;
  transition: all 0.5s ease-in-out 0s;
}

.merge-xyz-services .section-dotted-bg {
  --_dot-size: 1px;
  --_dot-opacity: 0.35;
  --_dot-color: var(--clr-main);
  --_spacer-x: 20px;
  --_spacer-y: 20px;
  position: absolute;
  opacity: var(--_dot-opacity);
  inset: 0;
  background-image: radial-gradient(var(--_dot-color) var(--_dot-size), transparent var(--_dot-size));
  background-size: var(--_spacer-x) var(--_spacer-y);
  z-index: 0;
  pointer-events: none;
}

.merge-xyz-services .container {
  position: relative;
  z-index: 2;
}

.merge-xyz-services .heading-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.merge-xyz-services .titles-area {
  flex: 1 1 auto;
}

.merge-xyz-services .pre-title-wrapper {
  --_clr: var(--clr-white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  padding-inline: 1rem;
  color: var(--_clr);
  z-index: 5;
  width: fit-content;
}

.merge-xyz-services .pre-title-wrapper::before,
.merge-xyz-services .pre-title-wrapper::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background-color: currentColor;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.merge-xyz-services .pre-title-wrapper::before {
  inset-inline-start: 0;
}

.merge-xyz-services .pre-title-wrapper::after {
  inset-inline-end: 0;
}

.merge-xyz-services .title {
  --title-fs: 3rem;
  position: relative;
  margin: 1rem 0 0;
  font-size: var(--title-fs);
  font-weight: 700;
  line-height: 1.3;
  display: inline-block;
  z-index: 0;
  color: var(--clr-white);
  font-family: var(--font-body);
}

.merge-xyz-services .hollow-text {
  -webkit-text-stroke-color: inherit;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1199px) {
  .merge-xyz-services .hollow-text {
    -webkit-text-stroke-width: 1px !important;
  }
}

@media (max-width: 767px) {
  .merge-xyz-services .title {
    --title-fs: 2rem;
    font-weight: 600;
  }

  .merge-xyz-services .heading-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

.merge-xyz-services .stat-box {
  position: relative;
}

.merge-xyz-services .stat-num {
  --number-fs: 8rem;
  display: block;
  font-size: var(--number-fs);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 0;
  font-family: var(--font-body);
}

.merge-xyz-services .stat-desc {
  font-size: 1rem;
  opacity: 0.85;
  display: block;
  color: var(--clr-white);
}

.merge-xyz-services .text-main-color {
  color: var(--clr-main) !important;
}

.merge-xyz-services .text-white-color {
  color: var(--clr-white) !important;
}

.merge-xyz-services .opacity-100 {
  opacity: 1 !important;
}

@media (max-width: 1199px) {
  .merge-xyz-services .stat-num {
    --number-fs: 6rem;
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .merge-xyz-services .stat-num {
    --number-fs: 3rem;
  }
}

.merge-xyz-services .scroller {
  overflow: hidden;
  user-select: none;
  display: flex;
  position: relative;
  z-index: 2;
}

.merge-xyz-services .scroller.masked {
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.merge-xyz-services .scroller__items-list {
  margin: 0;
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--gap-space, 30px);
  padding: 0.5rem 0;
  padding-inline: 15px;
  will-change: transform;
  animation: satkarScrollItems 45s linear infinite;
}

.merge-xyz-services .scroller:hover .scroller__items-list {
  animation-play-state: paused !important;
}

.merge-xyz-services .scroller__item {
  display: flex;
  align-items: stretch;
  max-width: 400px;
  flex: 0 0 auto;
}

@keyframes satkarScrollItems {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.merge-xyz-services :has(> .info-card) {
  display: flex;
}

.merge-xyz-services .info-card {
  --_card-outer-space-x: 2rem;
  --_card-outer-space-y: 2rem;
  --_icon-size: 2rem;
  --_icon-color: var(--clr-main);
  position: relative;
  padding: var(--_card-outer-space-y) var(--_card-outer-space-x);
  border-radius: 0.75rem;
  width: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 1rem;
  background-color: rgba(var(--clr-dark-rgb), 0.55);
  border: 1px solid rgba(var(--clr-main-rgb), 0.35);
  box-shadow: 0 0 20px 0 rgba(var(--clr-main-rgb), 0.25);
  overflow: clip;
  backdrop-filter: blur(4px);
}

.merge-xyz-services .info-card.reveal-has-bg-image::before {
  content: "";
  border-radius: inherit;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  inset-inline-start: 0;
  opacity: 0;
  /* background: linear-gradient(135deg, var(--clr-main), var(--clr-accent)); */
  z-index: -1;
  transition: opacity 0.3s ease-in-out 0s;
}

.merge-xyz-services .info-card.reveal-has-bg-image:where(:hover)::before {
  opacity: 1;
}

.merge-xyz-services .info-card.reveal-has-bg-image:hover .icon-wrapper,
.merge-xyz-services .info-card.reveal-has-bg-image:hover .card-number,
.merge-xyz-services .info-card.reveal-has-bg-image:hover .title,
.merge-xyz-services .info-card.reveal-has-bg-image:hover .subtitle {
  color: var(--clr-white);
}

.merge-xyz-services .info-card .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  font-size: var(--_icon-size);
  color: var(--_icon-color);
  transition: all 0.3s ease-in-out 0s;
}

.merge-xyz-services .info-card .icon-wrapper .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  color: inherit;
  width: 1em;
  height: 1em;
}

.merge-xyz-services .info-card .icon-wrapper.icon-framed {
  border-radius: 0.25rem;
  background-color: rgba(var(--clr-main-rgb), 0.15);
  padding: 0.5em;
}

.merge-xyz-services .info-card .icon-wrapper.icon-framed.icon-frame-blob {
  border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
}

.merge-xyz-services .info-card:hover .icon-wrapper.icon-rotate-y {
  rotate: y 360deg;
}

.merge-xyz-services .info-card:hover .icon-wrapper.icon-framed {
  background-color: rgba(var(--clr-main-rgb), 1);
  color: var(--clr-white);
}

.merge-xyz-services .info-card .card-heading:has(.icon-wrapper) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.merge-xyz-services .info-card .title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--clr-white);
}

.merge-xyz-services .info-card .subtitle {
  line-height: 1.7;
  opacity: 0.85;
  letter-spacing: 0.3px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
}

.merge-xyz-services .info-card .cta-area {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}

.merge-xyz-services .info-card .card-number {
  position: absolute;
  width: fit-content;
  top: auto;
  bottom: var(--_card-outer-space-y);
  inset-inline-end: var(--_card-outer-space-x);
  inset-inline-start: auto;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--clr-main);
  opacity: 0.35;
  margin-block: -0.13em;
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

.merge-xyz-services .butn {
  --butn-clr: var(--clr-white);
  --butn-bg-clr: var(--clr-main);
  --butn-border-clr: var(--clr-main);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  appearance: none;
  outline: none;
  color: var(--butn-clr);
  background-color: var(--butn-bg-clr);
  border: 2px solid var(--butn-border-clr);
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75em 1.5em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 0;
  transition: all 0.3s ease-in-out 0s;
}

.merge-xyz-services .butn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1em;
  width: 1em;
  height: 1em;
  color: currentColor;
  transition: transform 0.3s ease-in-out 0s;
}

.merge-xyz-services .icon-rotate-up-45.butn .icon {
  rotate: -45deg;
}

.merge-xyz-services .butn-full-circle {
  aspect-ratio: 1;
  padding: 1em;
  border-radius: 50%;
}

.merge-xyz-services .section-label {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.merge-xyz-services .section-label::before {
  background: #fff;
}



/* ==========================================================================
   5. INDUSTRIES — iteck (structure kept, colors aligned to Satkar palette)
   ========================================================================== */
.merge-iteck-industries {
  --color-main: var(--accent);
  --color-main-grad: linear-gradient(to right, var(--accent) 0%, var(--accent2) 100%);
  background: var(--surface2) !important;
  padding: 30px 0 30px;
}

.merge-iteck-industries .section-head {
  margin-bottom: 30px;
}

.merge-iteck-industries .section-head h6 {
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color: var(--color-main) !important;
  font-weight: 700;
}

.merge-iteck-industries .section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--text);
  font-family: var(--font-head);
}

.merge-iteck-industries .section-head h2 .fw-normal {
  font-weight: 400;
}

.merge-iteck-industries .blog_slider {
  position: relative;
}

.merge-iteck-industries .blog_slider .swiper-button-next,
.merge-iteck-industries .blog_slider .swiper-button-prev {
  width: 35px;
  height: 35px;
  background: var(--color-main);
  color: #fff;
  border-radius: 50%;
  top: -63px;
  /* top: -30px; */
}

.merge-iteck-industries .blog_slider .swiper-button-next {
  right: 120px;
  left: auto;
}

.merge-iteck-industries .blog_slider .swiper-button-prev {
  right: 160px;
  left: auto;
}

.merge-iteck-industries .blog_slider .swiper-button-next::after,
.merge-iteck-industries .blog_slider .swiper-button-prev::after {
  font-size: 14px;
  font-weight: 800;
}

.merge-iteck-industries .blog_box {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.merge-iteck-industries .blog_box .img {
  height: 350px;
  position: relative;
}

.merge-iteck-industries .blog_box .img::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  background-image: linear-gradient(to top, #000, transparent);
}

.merge-iteck-industries .blog_box .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease;
}

.merge-iteck-industries .blog_box .tags {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.merge-iteck-industries .blog_box .tags a {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--color-main-grad);
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}

.merge-iteck-industries .blog_box .info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 5;
}

.merge-iteck-industries .blog_box .info h6 {
  color: #fff;
  margin-bottom: 10px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  line-height: 1.3;
  transition: all 0.3s ease;
  font-weight: 700;
}

.merge-iteck-industries .blog_box .info h6 a {
  color: inherit;
  text-decoration: none;
}

.merge-iteck-industries .blog_box .info h6:hover a {
  color: var(--accent2);
}

.merge-iteck-industries .blog_box .info .text {
  margin-top: 20px;
  font-size: 13px;
  color: #fff;
  line-height: 1.7;
  display: block;
}

.merge-iteck-industries .blog_box:hover .img img {
  transform: scale(1.15);
}

.merge-iteck-industries .blog_box:hover .info h6 {
  border-color: #fff9;
}


/* ==========================================================================
   6. MANUFACTURING SPECIALIZATION — rebuilt: heading + split aside / feature list
   ========================================================================== */
.merge-satkar-manufacturing .mfg-shell {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.merge-satkar-manufacturing .mfg-shell .section-sub {
  max-width: 1400px;
  justify-content: center;
  text-align: center;
}

.merge-satkar-manufacturing .mfg-head {
  max-width: 1400px;
  justify-content: center;
  text-align: center;
}

.merge-satkar-manufacturing .mfg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
}

.merge-satkar-manufacturing .mfg-aside {
  position: sticky;
  top: 100px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 38px;
  box-shadow: 0 20px 50px rgba(38, 132, 229, 0.28);
}

.merge-satkar-manufacturing .mfg-aside>p {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.8;
  margin-bottom: 16px;
}

.merge-satkar-manufacturing .mfg-intro-note {
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px !important;
}

.merge-satkar-manufacturing .mfg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.merge-satkar-manufacturing .mfg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.merge-satkar-manufacturing .mfg-chip:hover,
.merge-satkar-manufacturing .mfg-chip:focus-visible {
  background: #fff;
  color: var(--accent);
  transform: translateY(-2px);
}

.merge-satkar-manufacturing .mfg-chip i {
  color: #fff;
  font-size: 0.75rem;
  transition: color 0.25s ease;
}

.merge-satkar-manufacturing .mfg-chip:hover i,
.merge-satkar-manufacturing .mfg-chip:focus-visible i {
  color: var(--accent);
}

.merge-satkar-manufacturing .mfg-cta {
  margin-top: 4px;
}

.merge-satkar-manufacturing .mfg-feats {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.merge-satkar-manufacturing .mfg-feat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 20px;
  background: var(--surface);
  border: 1px solid #2684E5;
  border-radius: 18px;
  padding: 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.merge-satkar-manufacturing .mfg-feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(38, 132, 229, 0.35);
}

.merge-satkar-manufacturing .mfg-feat-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1.7;
}

.merge-satkar-manufacturing .mfg-feat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.merge-satkar-manufacturing .mfg-feat-body h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--text);
  margin-bottom: 8px;
}

.merge-satkar-manufacturing .mfg-feat-body p {
  color: var(--text3);
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 991px) {
  .merge-satkar-manufacturing .mfg-shell {
    gap: 36px;
  }

  .merge-satkar-manufacturing .mfg-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .merge-satkar-manufacturing .mfg-aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .merge-satkar-manufacturing .mfg-aside {
    padding: 28px;
  }

  .merge-satkar-manufacturing .mfg-feat {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }

  .merge-satkar-manufacturing .mfg-feat-num {
    display: none;
  }
}


/* ==========================================================================
   7. PRESENCE — rebuilt: connected timeline of location nodes
   ========================================================================== */
.merge-satkar-presence .presence-head {
  /* max-width: 680px; */
  margin: 0 auto 50px;
}

.merge-satkar-presence .presence-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  position: relative;
  margin-bottom: 40px;
}

.merge-satkar-presence .presence-flow::before {
  content: "";
  position: absolute;
  top: 140px;
  left: 8%;
  right: 8%;
  height: 2px;
  /* background: linear-gradient(to right, var(--accent), var(--accent2)); */
  background: #2684E5;
  /* opacity: 0.25; */
  z-index: 0;
}

.merge-satkar-presence .presence-node {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--surface);
  border: 1px solid #2684E5;
  border-radius: 20px;
  padding: 28px 22px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.merge-satkar-presence .presence-node:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(38, 132, 229, 0.3);
}

.merge-satkar-presence .presence-node-dot {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 0 0 6px var(--accent-light);
}

.merge-satkar-presence .presence-node:last-child .presence-node-dot {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent2) 100%);
}

.merge-satkar-presence .presence-node h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 8px;
}

.merge-satkar-presence .presence-node p {
  color: var(--text3);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.merge-satkar-presence .presence-cta-bar {
  display: flex;
  justify-content: center;
}

@media (max-width: 991px) {
  .merge-satkar-presence .presence-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .merge-satkar-presence .presence-flow::before {
    display: none;
  }
}

@media (max-width: 575px) {
  .merge-satkar-presence .presence-flow {
    grid-template-columns: 1fr;
  }

  .merge-satkar-presence .presence-cta-bar .btn-primary-custom {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   8. VIDEO SECTION
   ========================================================================== */
.merge-satkar-video .video-cats {
  row-gap: 10px;
}

.merge-satkar-video .video-cat-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.merge-satkar-video .video-cat-chip:hover {
  color: var(--accent);
  border-color: rgba(38, 132, 229, 0.4);
  background: var(--accent-light);
}

.merge-satkar-video .video-cat-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.merge-satkar-video .video-thumb-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/10;
  box-shadow: var(--shadow);
}

.merge-satkar-video .video-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.merge-satkar-video .video-thumb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 26, 46, 0.75), rgba(7, 26, 46, 0.05));
}

.merge-satkar-video .video-thumb-card:hover img {
  transform: scale(1.08);
}

.merge-satkar-video .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  z-index: 2;
  box-shadow: 0 0 0 10px rgba(38, 132, 229, 0.25);
  transition: all 0.3s ease;
}

.merge-satkar-video .video-thumb-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 14px rgba(38, 132, 229, 0.2);
}

.merge-satkar-video .video-thumb-label {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.merge-satkar-video .video-grid-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.merge-satkar-video .video-grid-item.is-hidden {
  display: none;
}


/* ==========================================================================
   9. INSIGHTS (news card reuse + filters)
   ========================================================================== */
.merge-satkar-insights .news-card.is-hidden {
  display: none;
}


/* ==========================================================================
   10. CONTACT — recaptcha spacing
   ========================================================================== */
.merge-satkar-contact .g-recaptcha {
  transform-origin: left top;
}


/* ==========================================================================
   11. CTA location line
   ========================================================================== */
.cta-location-line {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}


/* ==========================================================================
   12. BRANDS — modern logo cards + marquee with hover
   ========================================================================== */
.merge-palaiche-brands {
  padding: 50px 0;
  background: var(--surface2);
}

.merge-palaiche-brands .brands-titlebox {
  margin-bottom: 56px;
}

.merge-palaiche-brands .brands-subtitle-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  border: 1px solid rgba(38, 132, 229, 0.2);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.merge-palaiche-brands .brands-title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
}

.merge-palaiche-brands .brands-text {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text2);
  line-height: 1.75;
}

.merge-palaiche-brands .brands-marquee {
  position: relative;
  overflow-x: hidden;
}

.merge-palaiche-brands .brands-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
}

.merge-palaiche-brands .brands-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--surface2), transparent);
}

.merge-palaiche-brands .brands-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--surface2), transparent);
}

.merge-palaiche-brands .brands-mask {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 15%, #000 85%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 15%, #000 85%, rgba(0, 0, 0, 0));
}

.merge-palaiche-brands .brands-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: LoopSlide 32s linear infinite;
}

.merge-palaiche-brands .brands-track:hover {
  animation-play-state: paused;
}

.merge-palaiche-brands .brand-logo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
}

.merge-palaiche-brands .brand-logo-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(38, 132, 229, 0.18);
}

.merge-palaiche-brands .brand-logo {
  height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition: all 0.3s ease-in-out;
}

.merge-palaiche-brands .brand-logo-card:hover .brand-logo {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes LoopSlide {
  to {
    transform: translateX(calc(-50% - 14px));
  }
}


/* ==========================================================================
   13. FOOTER — background image layer
   ========================================================================== */
.footer-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
}

.footer-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--footer-bg) 0%, rgba(7, 26, 46, 0.96) 100%);
}

.footer-inner {
  position: relative;
  z-index: 1;
}

.footer-service-areas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--footer-text);
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 24px;
}

.footer-service-areas i {
  color: var(--accent2);
}

.footer-service-areas strong {
  color: var(--footer-head);
  font-weight: 600;
}


/* ==========================================================================
   14. WOW.JS SHIM
   ========================================================================== */
html.js-wow-ready .wow {
  visibility: hidden;
}

html.js-wow-ready .wow.animated {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  html.js-wow-ready .wow {
    visibility: visible !important;
    animation: none !important;
  }
}


/* ==========================================================================
   16. VIDEO LIGHTBOX
   ========================================================================== */
.satkar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.satkar-lightbox.is-open {
  opacity: 1;
}

.satkar-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 46, 0.9);
}

.satkar-lightbox-body {
  position: relative;
  width: min(960px, 92vw);
}

.satkar-lightbox-frame-wrap {
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.satkar-lightbox-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.satkar-lightbox-close {
  position: absolute;
  top: -46px;
  right: -4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
}

.satkar-lightbox-close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Vertical videos (YouTube Shorts) — 9:16, sized to fit the screen height */
.satkar-lightbox.is-vertical .satkar-lightbox-body {
  width: min(420px, 92vw, calc((100vh - 120px) * 9 / 16));
}

.satkar-lightbox.is-vertical .satkar-lightbox-frame-wrap {
  padding-top: 177.78%;
}

/* Instagram reels — Instagram's embed wraps the video in its own header and
   caption, so give it a fixed, taller frame on a white card */
.satkar-lightbox.is-instagram .satkar-lightbox-body {
  width: min(400px, 92vw);
}

.satkar-lightbox.is-instagram .satkar-lightbox-frame-wrap {
  padding-top: 0;
  height: min(calc(100vh - 120px), 780px);
  background: #fff;
}


/* ==========================================================================
   17. ALTERNATING SECTION BACKGROUNDS — light + dark themes
   Full-width sections alternate between colour A and colour B.
   The Services section (#services) is intentionally NOT touched.
   ========================================================================== */
:root {
  --section-bg-a: #ffffff;
  --section-bg-b: rgba(38, 132, 229, 0.08);
}

#about {
  background: var(--section-bg-a);
}

#whychoose {
  background: var(--section-bg-b);
}

#manufacturing-specialization {
  background: #02172F;
}

#industries.merge-iteck-industries {
  background: var(--section-bg-b) !important;
}

#presence {
  background: var(--section-bg-a);
}

#portfolio {
  background: var(--section-bg-b);
}

#video {
  background: var(--section-bg-a);
}

#faq {
  background: var(--section-bg-b);
}

#insights {
  background: var(--section-bg-a);
}

#contact {
  background: var(--section-bg-b);
}

#brands.merge-palaiche-brands {
  background: var(--section-bg-a);
}

/* keep the brands marquee edge-fades matching the new section colour */
#brands.merge-palaiche-brands .brands-fade-left {
  background: linear-gradient(to right, var(--section-bg-a), transparent);
}

#brands.merge-palaiche-brands .brands-fade-right {
  background: linear-gradient(to left, var(--section-bg-a), transparent);
}


/* ==========================================================================
   18. col-lg-7 — centre the content block on desktop with consistent spacing
   ========================================================================== */
@media (min-width: 992px) {
  .col-lg-7 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    /* text-align: center; */
  }

  .col-lg-7 .section-label,
  .col-lg-7 .section-sub,
  .col-lg-7 p {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================================
   19. TEXT VISIBILITY — sharper, higher-contrast copy on the home page
   Light theme -> pure black, dark theme -> pure white (secondary greys
   darkened / lightened to match so body copy no longer looks washed out).
   ========================================================================== */
:root {
  --text: #000000;
  --text2: #1c1c1c;
  --text3: #444444;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   20. FONT AWESOME — correct webfont path
   The bundled css/all.min.css requests ../webfonts/* (site-root /webfonts/),
   but the font files ship in /font/webfonts/. Re-declaring the faces here
   (loaded after all.min.css) points them at the real location so every
   fa-solid / fa-brands icon — notably in the Services section — renders.
   ========================================================================== */
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../font/webfonts/fa-solid-900.woff2) format("woff2"),
    url(../font/webfonts/fa-solid-900.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../font/webfonts/fa-regular-400.woff2) format("woff2"),
    url(../font/webfonts/fa-regular-400.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(../font/webfonts/fa-light-300.woff2) format("woff2"),
    url(../font/webfonts/fa-light-300.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../font/webfonts/fa-brands-400.woff2) format("woff2"),
    url(../font/webfonts/fa-brands-400.ttf) format("truetype");
}

/* make the resting (non-hover) service icons clearly visible on the dark cards */
.merge-xyz-services .info-card {
  --_icon-color: #ffffff;
}

.merge-xyz-services .info-card .icon-wrapper.icon-framed {
  background-color: rgba(255, 255, 255, 0.14);
}


/* ==========================================================================
   21. INNER PAGES (ABOUT TAB) — shared page banner + breadcrumb and the
       Company Profile / Our Team / Clients / Testimonials / Career /
       Company Brochure / Our Books layouts.
       All colours + typography inherit the home-page design tokens
       (--accent, --text, --surface, --border, --font-head, …).
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1  SHARED PAGE BANNER  (used identically on every inner page)
   Banner image dimensions: 1920 x 480 px  (aspect ratio 4 : 1).
   Export under ~250 KB as JPG / WebP. The background currently points at a
   dummy placeholder image hosted on the internet — replace the URL in each
   page (or drop a branded file at images/banner/page-banner.jpg) later.
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  isolation: isolate;
  background: var(--accent);
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(0 0 0 / 92%) 0%, rgb(0 0 0 / 82%) 55%, rgb(0 0 0 / 70%) 100%);
}

.page-banner-inner {
  padding: 66px 15px;
  text-align: center;
}

.page-banner-title {
  font-family: var(--font-head);
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 14px;
}

.page-banner-sub {
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.7;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.page-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}

.page-breadcrumb a:hover {
  color: #fff;
}

.page-breadcrumb i {
  font-size: 0.68rem;
  opacity: 0.6;
}

.page-breadcrumb .current {
  color: #fff;
}

@media (max-width: 767px) {
  .page-banner-inner {
    padding: 44px 15px;
  }
}

/* --------------------------------------------------------------------------
   21.2  GENERIC INNER-PAGE HELPERS
   -------------------------------------------------------------------------- */
/* .inner-narrow {
  max-width: 1000px;
  margin-inline: auto;
} */

.inner-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text2);
}

.inner-media img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
  border: 1px solid var(--border);
}

.inner-check {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.inner-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text2);
  line-height: 1.6;
  font-size: 0.95rem;
}

.inner-check li i {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   21.3  COMPANY PROFILE
   -------------------------------------------------------------------------- */
.cp-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cp-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* source images are 960 x 640 */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.cp-vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.cp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px;
  height: 100%;
}

.cp-card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.cp-card h3 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
}

.cp-card p {
  color: var(--text2);
  line-height: 1.7;
  margin: 0;
  font-size: 17px;
}

.cp-founder {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
}

.cp-founder img {
  width: 100%;
  aspect-ratio: 550 / 374;
  /* manish-jain.png native ratio */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

.cp-edu {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.cp-edu li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text2);
  font-size: 0.95rem;
}

.cp-edu li i {
  color: var(--accent);
  margin-top: 3px;
}

@media (max-width: 991px) {
  .cp-vm-grid {
    grid-template-columns: 1fr;
  }

  .cp-founder {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cp-founder .cp-edu li,
  .cp-founder .inner-check li {
    text-align: left;
  }
}

@media (max-width: 575px) {
  .cp-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   21.4  OUR TEAM
   -------------------------------------------------------------------------- */
.team-lead {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 60px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 34px;
  margin-bottom: 50px;
}

.team-lead-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.team-lead-role {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(38, 132, 229, 0.3);
}

.team-card-photo {
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface2);
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-card-photo img {
  transform: scale(1.05);
}

.team-card-body {
  padding: 20px 18px 24px;
}

.team-card-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.team-card-role {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.team-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.team-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 0.85rem;
  transition: all 0.25s ease;
}

.team-socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (max-width: 767px) {
  .team-lead {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 26px;
  }
}

/* --------------------------------------------------------------------------
   21.5  CLIENTS
   -------------------------------------------------------------------------- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

.client-logo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.client-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #2684E5;
}

.client-logo-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* blends white-background logos into the card */
}

/* --------------------------------------------------------------------------
   21.6  TESTIMONIALS  (review screenshots + lightweight image lightbox)
   Source screenshots are tall portraits (~2550 x 3507).
   -------------------------------------------------------------------------- */
/* Video testimonials — flex-wrap so 5 videos sit 3 + 2 (last row centred) */
.tst-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
}

.tst-video {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  aspect-ratio: 16 / 9;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tst-video:hover {
  box-shadow: var(--shadow-lg);
  border-color: #044a9e;
}

.tst-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 991.98px) {
  .tst-video {
    flex-basis: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 575.98px) {
  .tst-videos {
    gap: 16px;
    margin-bottom: 32px;
  }

  .tst-video {
    flex-basis: 100%;
    max-width: 100%;
    border-radius: 14px;
  }
}

.tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

.tst-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tst-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border: 1px solid #044a9e;
}

.tst-shot {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface2);
}

.tst-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

.tst-card:hover .tst-shot img {
  transform: scale(1.04);
}

.tst-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(38, 132, 229, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tst-card:hover .tst-zoom {
  opacity: 1;
}

.tst-cap {
  padding: 14px 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-align: center;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(7, 26, 46, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.img-lightbox.is-open {
  opacity: 1;
}

.img-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.img-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.img-lightbox-close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   21.7  CAREER  (job openings accordion + application form)
   -------------------------------------------------------------------------- */
.career-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

.career-values span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid rgba(38, 132, 229, 0.2);
  border-radius: 999px;
  padding: 7px 16px;
}

.job-accordion .accordion-item {
  background: var(--card-bg);
  border: 1px solid var(--faq-border) !important;
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.job-accordion .accordion-button {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 22px 26px;
  box-shadow: none !important;
}

.job-accordion .accordion-button:not(.collapsed) {
  color: var(--accent) !important;
}

.job-accordion .accordion-button::after {
  background-image: none;
  content: '\F282';
  font-family: 'bootstrap-icons';
  font-size: 1.1rem;
  color: var(--accent);
  width: auto;
  height: auto;
  transition: none;
}

.job-accordion .accordion-button:not(.collapsed)::after {
  content: '\F286';
  transform: none;
}

.job-accordion .accordion-body {
  padding: 6px 26px 26px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.job-meta span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}

.job-block {
  margin-bottom: 18px;
}

.job-block h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.job-block ul {
  margin: 0;
  padding-left: 20px;
}

.job-block li {
  color: var(--text3);
  line-height: 1.7;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.job-block p {
  color: var(--text3);
  font-size: 0.9rem;
  margin: 0;
}

.career-form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px;
}

.recaptcha-alert {
  color: #dc3545;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .career-form-card {
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   21.8  COMPANY BROCHURE  (embedded PDF)
   PDF asset: images/company-brochure/company-brochure.pdf
   -------------------------------------------------------------------------- */
.brochure-frame {
  position: relative;
  width: 100%;
  /* max-width: 820px; */
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface2);
}

.brochure-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.brochure-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

.brochure-note {
  text-align: center;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text3);
}

@media (max-width: 575px) {
  .brochure-frame {
    aspect-ratio: 2 / 3;
  }
}

/* --------------------------------------------------------------------------
   21.9  OUR BOOKS
   Book cover sources are portrait (~900 x 1391).
   -------------------------------------------------------------------------- */
.book-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 30px;
}

.book-cover img {
  width: 100%;
  aspect-ratio: 900 / 1391;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.book-info h3 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.book-tagline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
}

.book-info p {
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 16px;
}

.book-key {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}

.book-key li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text3);
  line-height: 1.55;
}

.book-key li i {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.books-why {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.books-why-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
}

.books-why-item .bi {
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.books-why-item h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.books-why-item p {
  color: var(--text3);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.books-audience {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 26px;
}

.books-audience li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text2);
  line-height: 1.6;
}

.books-audience li i {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .book-row {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
  }

  .book-cover img {
    max-width: 240px;
    margin: 0 auto;
  }

  .book-key {
    grid-template-columns: 1fr;
    text-align: left;
  }
}


/* ==========================================================================
   22. SATKAR 2026 REFRESH — layout containment, premium motion,
       services white-card override, equal-height manufacturing,
       modern features strip, section banner.
       (Single light theme only — dark theme fully removed.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1  TEXT / CONTAINER CONTAINMENT
   Keep every heading + supporting line inside its column with no overflow,
   clipping or horizontal scroll on any breakpoint.
   -------------------------------------------------------------------------- */
.section-title,
.section-sub,
.merge-xyz-services .title,
.merge-iteck-industries .section-head h2,
.brands-title,
.brands-text,
.cta-title,
.cta-sub {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.merge-xyz-services .title {
  white-space: normal;
  display: block;
}

/* centred heading blocks keep copy on a comfortable measure and truly centred */
.presence-head .section-sub,
.mfg-head .section-sub,
.mfg-shell .section-sub,
#video .section-sub,
#contact .section-sub,
.text-center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.mfg-head .section-title,
.mfg-head .section-sub,
.presence-head .section-title {
  margin-left: auto;
  margin-right: auto;
}

/* guard against any accidental page-level horizontal scroll */
html,
body {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   22.2  PREMIUM SCROLL-REVEAL UTILITY  ([data-reveal] + optional --reveal-i)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   22.3  SERVICES — info-cards on pure white with black copy (task 4)
   Section background + section text colours are intentionally left unchanged.
   -------------------------------------------------------------------------- */
.merge-xyz-services .info-card {
  background-color: #fff;
  border: 1px solid rgba(38, 132, 229, 0.16);
  box-shadow: 0 14px 40px rgba(7, 26, 46, 0.22);
  backdrop-filter: none;
  --_icon-color: #2684E5;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}

.merge-xyz-services .info-card .title,
.merge-xyz-services .info-card .subtitle,
.merge-xyz-services .info-card .card-heading .title {
  color: #000 !important;
}

.merge-xyz-services .info-card .subtitle {
  opacity: 1;
}

.merge-xyz-services .info-card .card-number {
  color: rgba(38, 132, 229, 0.16);
}

.merge-xyz-services .info-card .icon-wrapper.icon-framed {
  background-color: rgba(38, 132, 229, 0.12);
  color: #2684E5;
}

/* legacy hover flipped card copy to white — keep it black on the white card */
.merge-xyz-services .info-card.reveal-has-bg-image::before {
  background: linear-gradient(135deg, rgba(38, 132, 229, 0.05), rgba(28, 111, 208, 0.09));
}

.merge-xyz-services .info-card.reveal-has-bg-image:hover .title,
.merge-xyz-services .info-card.reveal-has-bg-image:hover .subtitle {
  color: #000 !important;
}

.merge-xyz-services .info-card.reveal-has-bg-image:hover .card-number {
  color: rgba(38, 132, 229, 0.16) !important;
}

.merge-xyz-services .info-card:hover .icon-wrapper.icon-framed {
  background-color: #2684E5;
  color: #fff;
}

.merge-xyz-services .info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(38, 132, 229, 0.28);
  border-color: rgba(38, 132, 229, 0.30);
}

/* --------------------------------------------------------------------------
   22.4  MANUFACTURING SPECIALIZATION — equal-height layout columns (task 5)
   -------------------------------------------------------------------------- */
.merge-satkar-manufacturing .mfg-layout {
  align-items: stretch;
}

.merge-satkar-manufacturing .mfg-aside {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.merge-satkar-manufacturing .mfg-aside .mfg-cta {
  margin-top: auto;
}

.merge-satkar-manufacturing .mfg-feats {
  align-self: stretch;
}

@media (min-width: 992px) {
  .merge-satkar-manufacturing .mfg-feats {
    display: flex;
    flex-direction: column;
  }

  .merge-satkar-manufacturing .mfg-feats .mfg-feat {
    flex: 1 1 0;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   22.5  FEATURES STRIP — modern stat cards (task 6)
   -------------------------------------------------------------------------- */
.merge-shifah-features .feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  background: #fff;
  border: 1px solid rgba(38, 132, 229, 0.14);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 30px 70px rgba(7, 26, 46, 0.14);
}

.merge-shifah-features .feature-stat {
  position: relative;
  text-align: center;
  padding: 32px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  border: 1px solid #2684E5;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}

.merge-shifah-features .feature-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-image:
    linear-gradient(90deg, var(--accent), var(--accent2)),
    /* top: left -> right */
    linear-gradient(270deg, var(--accent), var(--accent2));
  /* bottom: right -> left */
  background-position: top left, bottom right;
  background-size: 0% 3px, 0% 3px;
  transition: background-size 0.45s ease;
}

.merge-shifah-features .feature-stat:hover::before {
  background-size: 100% 3px, 100% 3px;
}

.merge-shifah-features .feature-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-image:
    linear-gradient(180deg, var(--accent), var(--accent2)),
    /* right: top -> bottom */
    linear-gradient(0deg, var(--accent), var(--accent2));
  /* left: bottom -> top */
  background-position: top right, bottom left;
  background-size: 3px 0%, 3px 0%;
  transition: background-size 0.45s ease;
}

.merge-shifah-features .feature-stat:hover::after {
  background-size: 3px 100%, 3px 100%;
}

.merge-shifah-features .feature-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 1.55rem;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease, color 0.3s ease;
}

.merge-shifah-features .feature-stat:hover .feature-stat-icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--accent);
  color: #fff;
}

.merge-shifah-features .feature-stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.merge-shifah-features .feature-stat-value h2,
.merge-shifah-features .feature-stat-suffix {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--accent);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  margin: 0;
  display: inline-block;
}

.merge-shifah-features .feature-stat h4 {
  margin: 12px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text2);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .merge-shifah-features .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .merge-shifah-features .feature-grid {
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .merge-shifah-features .feature-stat {
    padding: 22px 10px;
  }

  .merge-shifah-features .feature-stat-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   22.6  WHY CHOOSE US — full-section background banner + JS parallax layer,
   with a heavy light overlay so all foreground copy stays high-contrast.
   -------------------------------------------------------------------------- */
#whychoose.merge-inspire-whychoose {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: 0px 0 50px;
}

#whychoose .wc-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#whychoose .wc-banner-img {
  position: absolute;
  inset: -14% 0;
  background: url("../images/home/digital-agency-studio-seo-dashboards.jpg") center / cover no-repeat;
  will-change: transform;
}

#whychoose .wc-banner-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg,
      rgba(245, 248, 252, 0.94) 0%,
      rgba(245, 248, 252, 0.96) 50%,
      rgba(245, 248, 252, 0.985) 100%); */
}

#whychoose .container {
  position: relative;
  z-index: 1;
}

.merge-inspire-whychoose .whychoose-single-item {
  transition: transform 0.35s ease;
}

.merge-inspire-whychoose .whychoose-single-item:hover {
  transform: translateY(-4px);
}

.merge-inspire-whychoose .whychoose-icon-number {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.merge-inspire-whychoose .whychoose-single-item:hover .whychoose-icon-number {
  transform: scale(1.07);
  box-shadow: 0 0 0 6px var(--accent-light);
}

@media (prefers-reduced-motion: reduce) {
  #whychoose .wc-banner-img {
    transform: none !important;
  }
}

/* §23 (2026 agency pass) removed — superseded by §24 AGENCY REBUILD below. */

/* ==========================================================================
   24. AGENCY REBUILD 2026 — editorial / restrained system  (sk- namespace)
   Rebuilds the 12 brief sections (nav, hero, features, why, services, mfg,
   presence, video, faq, cta, brands, footer). Untouched sections (#about,
   #industries, #portfolio, #insights, #contact, modals) inherit only the
   global token + .section-label + .section-pad changes made in style.css.
   Reuses the existing [data-reveal] -> .is-visible observer (§22.2) and the
   Swiper inits in newmain.js. Breakpoints: 480 / 768 / 1024 / 1200.
   ========================================================================== */

:root {
  --sk-ink: #071a2e;
  --sk-ink-soft: #3e4a5c;
  --sk-ink-mute: #7a8695;
  --sk-line: rgba(7, 26, 46, 0.12);
  --sk-line-2: rgba(7, 26, 46, 0.22);
  --sk-paper: #ffffff;
  --sk-paper-alt: #f4f6fa;
  --sk-deep: #0a1c30;
  --sk-accent: #044a9e;
  --sk-accent-ink: #1c6fd0;
  --sk-fs-display: clamp(2.6rem, 6vw, 5rem);
  --sk-fs-h2: clamp(2rem, 3.6vw, 3.3rem);
  --sk-fs-h3: clamp(1.12rem, 1.4vw, 1.35rem);
  --sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* alternate-band tone used by §1–22 alt sections: flat tint -> soft cool surface */
  --section-bg-b: #f4f6fa;
}

/* ---- shared editorial primitives ---------------------------------------- */
.sk-features .container,
.sk-why .container,
.sk-mfg .container,
.sk-presence .container,
.sk-video .container,
.sk-faq .container,
.sk-brands .container {
  max-width: 1320px;
}

.sk-num {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--sk-line-2);
  letter-spacing: -0.02em;
}

/* section eyebrow already reset in style.css; dark-context variant */
.sk-why .section-label,
.merge-xyz-services .section-label,
.sk-cta .section-label {
  color: rgba(255, 255, 255, 0.72);
}

/* headings inside rebuilt light sections */
.sk-features .section-title,
.sk-mfg .section-title,
.sk-presence .section-title,
.sk-video .section-title,
.sk-faq .section-title {
  font-size: var(--sk-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* ---- buttons ---------------------------------------------------------------
   Keep .btn-primary-custom base (colours/hover from style.css) but square it
   off and set it in caps for the editorial voice. */
.sk-btn {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  padding: 15px 10px;
}

.sk-btn.btn-outline-custom {
  border-width: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .sk-btn--magnetic {
    transition: transform 0.25s var(--sk-ease), background 0.3s, color 0.3s, box-shadow 0.3s;
    will-change: transform;
  }
}

/* ==========================================================================
   24.1  MAIN NAVIGATION
   ========================================================================== */
.sk-nav .navbar-brand {
  height: 74px;
}

.sk-nav .navbar-nav {
  gap: 2px;
}

.sk-nav .nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px !important;
}

.sk-nav .nav-link::after {
  height: 1px;
  bottom: 4px;
  background: var(--sk-accent);
}

/* modern chevron drawn in CSS (replaces the bi-chevron glyph) */
.sk-caret {
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--sk-ease);
  opacity: 0.6;
}

.sk-nav .nav-item.dropdown:hover .sk-caret,
.sk-nav .dropdown-toggle[aria-expanded="true"] .sk-caret {
  transform: translateY(1px) rotate(225deg);
  opacity: 1;
}

/* Desktop: dropdowns also open on hover (js/premium.js → initNavHover calls
   the Bootstrap API). This invisible strip bridges the gap between the toggle
   and the panel so the pointer never crosses dead space and drops the hover. */
@media (min-width: 992px) {
  .sk-nav .nav-item.dropdown>.dropdown-menu.sk-dd::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
  }
}

/* dropdown panel — wide, hairline, editorial */
.sk-nav .dropdown-menu.sk-dd {
  --sk-dd-pad: 14px;
  margin-top: 16px !important;
  padding: var(--sk-dd-pad);
  min-width: 300px;
  border: 1px solid var(--sk-line);
  border-radius: 4px;
  box-shadow: 0 30px 60px -24px rgba(7, 26, 46, 0.28);
  background: #fff;
  animation: skDdIn 0.24s var(--sk-ease);
}

.sk-nav .dropdown-menu.sk-dd::before {
  content: "";
  position: absolute;
  left: var(--sk-dd-pad);
  right: var(--sk-dd-pad);
  top: 0;
  height: 2px;
  background: var(--sk-accent);
}

.sk-nav .dropdown-menu.sk-dd.sk-dd--wide {
  min-width: 520px;
  columns: 2;
  column-gap: 10px;
}

.sk-nav .sk-dd .dropdown-item {
  --sk-di-rule: rgba(7, 26, 46, 0.14);
  break-inside: avoid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px 11px 18px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--sk-ink) !important;
  border-left: 2px solid var(--sk-di-rule);
  border-radius: 0 3px 3px 0;
  transition: background 0.22s, border-color 0.22s, padding-left 0.22s, color 0.22s;
}

.sk-nav .sk-dd .dropdown-item::after {
  content: "\2192";
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s, transform 0.22s;
}

.sk-nav .sk-dd .dropdown-item:hover,
.sk-nav .sk-dd .dropdown-item:focus {
  background: var(--sk-paper-alt);
  border-left-color: var(--sk-accent);
  color: var(--sk-accent-ink) !important;
  padding-left: 24px;
}

.sk-nav .sk-dd .dropdown-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes skDdIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* burger -> X */
.sk-burger .navbar-toggler-icon span {
  transition: transform 0.3s var(--sk-ease), opacity 0.2s;
}

.sk-burger[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sk-burger[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) {
  opacity: 0;
}

.sk-burger[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {
  .sk-nav .navbar-nav {
    padding: 14px 0 6px;
    gap: 0;
  }

  .sk-nav .nav-link {
    padding: 14px 4px !important;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--sk-line);
  }

  .sk-nav .dropdown-menu.sk-dd,
  .sk-nav .dropdown-menu.sk-dd.sk-dd--wide {
    min-width: 0;
    columns: 1;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--sk-line);
    border-radius: 0;
    margin: 4px 0 10px 6px !important;
    padding: 4px 0 4px 10px;
    animation: none;
  }

  .sk-nav .dropdown-menu.sk-dd::before {
    display: none;
  }
}

/* ==========================================================================
   24.2  HERO
   ========================================================================== */
.sk-hero {
  /* Dark tech atmosphere across the FULL hero (not just the right visual):
     solid deep-navy base + two soft blue glows (behind the circular showcase,
     and a faint echo lower-left) for depth. The existing .sk-net-canvas
     particle layer already renders on top of this — left untouched. */
  background:
    radial-gradient(ellipse 60% 55% at 78% 42%, rgba(38, 132, 229, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% 85%, rgba(28, 111, 208, 0.09), transparent 72%),
    var(--sk-deep);
}

.sk-hero .slider-one .swiper-slide {
  padding: clamp(70px, 10vw, 120px) 0 clamp(60px, 8vw, 90px);
}

.sk-hero .slider-one_eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: 0;
  border-radius: 0;
  /* padding: 0 0 0 46px; */
  position: relative;
  margin-bottom: 24px;
}

/* .sk-hero .slider-one_eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--sk-accent);
} */

.sk-hero .slider-one_heading {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #fff;
}

.sk-hero .slider-one_heading span {
  color: var(--sk-accent);
}

.sk-hero .slider-one_heading span::before {
  height: 3px;
  bottom: 0;
  opacity: 0.45;
}

/* Reference-matched slide 1 heading: plain accent colour on "Your Business",
   no decorative underline bar (matches homepage-hero.jpeg exactly, before
   JS's .sk-enhanced state also neutralises the bar for every slide). */
.sk-hero .slider-one_heading--plain span::before {
  content: none;
}

.sk-hero .slider-one_text {
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 33em;
  margin-top: 22px;
}

.sk-hero .slider-one_trust-line {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  margin-top: 26px;
}

/* ---- feature highlights row (below the CTA, persistent across slides) --- */
.sk-hero-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px 30px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sk-hero-point {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sk-hero-point__ic {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(95, 177, 255, 0.55);
  color: #5fb1ff;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.sk-hero-point:hover .sk-hero-point__ic {
  background: rgba(38, 132, 229, 0.18);
  border-color: #5fb1ff;
  transform: translateY(-2px);
}

.sk-hero-point__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 767px) {
  .sk-hero-points {
    gap: 16px 22px;
    margin-top: 26px;
    padding-top: 18px;
  }

  .sk-hero-point__ic {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .sk-hero-point__label {
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-hero-point__ic {
    transition: none;
  }
}

/* figure / gallery */
.sk-hero-figure {
  position: relative;
  /* no top padding: the services ring reserves its own label room */
  padding-top: 0;
}

/* ---- decorative hand-drawn labels (reference top-right / bottom-right) -- */
.slider-one_image-column {
  position: relative;
}

.sk-hero-doodle {
  position: absolute;
  z-index: 5;
  font-family: "Caveat", cursive;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(210, 230, 255, 0.85);
  pointer-events: none;
  white-space: nowrap;
}

/* Both doodles hug the right edge of the services ring: --hvn-bleed is the
   extra width the ring takes beyond the column on wide screens
   (css/hero-video-network.css), so they move out with it. */
.sk-hero-doodle--top {
  /* top: 0; */
  top: 40px;
  right: calc(0px - var(--hvn-bleed, 0px));
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  text-align: right;
}

.sk-hero-doodle__arrow {
  display: block;
  margin: 4px 0 0 auto;
  color: rgba(210, 230, 255, 0.75);
}

.sk-hero-doodle--bottom {
  right: calc(0px - var(--hvn-bleed, 0px));
  bottom: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  text-align: right;
  text-decoration: underline;
  text-decoration-color: rgba(95, 177, 255, 0.6);
  text-underline-offset: 6px;
}

@media (max-width: 1199px) {
  .sk-hero-doodle {
    display: none;
  }
}

.sk-hero-figure-tag {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.sk-hero-gallery {
  position: relative;
  /* square box so the video stack clips into a full, uncropped circle that
     matches the hero-banner.png artwork at every breakpoint */
  width: min(100%, clamp(300px, 34vw, 480px));
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.sk-hero-gallery .hero-gallery-slider.swiper {
  width: 100%;
  height: clamp(340px, 34vw, 480px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.sk-hero-gallery .hero-gallery-slider .swiper-wrapper {
  height: 100%;
}

.sk-hero-gallery .hero-gallery-slider .swiper-slide {
  height: 100%;
  overflow: hidden;
}

.sk-hero-gallery .hero-gallery-slider .swiper-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* per-slide hero videos. .sk-hero-video-stack carries the hero-banner.png
   artwork UNCLIPPED (no border-radius/overflow here) so its full circular
   rim and the diamond fragments that break outside the circle stay visible,
   matching the reference composition. Only the inner .sk-hero-video-mask is
   clipped to a circle, inset a couple of percent so the artwork's rim shows
   as a ring around the video instead of being covered by it. */
/* .sk-hero-gallery .sk-hero-video-stack {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero/hero-banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sk-hero-gallery .sk-hero-video-mask {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  overflow: hidden;
}

.sk-hero-gallery .sk-hero-video-mask video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sk-hero-gallery .sk-hero-video-mask video.is-active {
  opacity: 1;
  z-index: 1;
} */

.sk-hero-figure {
  height: auto;
  /* The services ring (css/hero-video-network.css) sizes itself as a true
     circle from the column width; the figure just wraps it. */
  aspect-ratio: auto;
}

.sk-hero-gallery .sk-hero-video-stack {
  position: absolute;
  inset: 0;
  /* background-image: url("../images/hero/hero-banner.png"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sk-hero-gallery .sk-hero-video-mask {
  position: absolute;
  inset: 0;
  /* was inset: 2% */
  clip-path: circle(48.5% at 50% 51%);
  -webkit-clip-path: circle(50.2% at 50% 53.3%);
  overflow: hidden;
}

.sk-hero-gallery .sk-hero-video-mask video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sk-hero-gallery .sk-hero-video-mask video.is-active {
  opacity: 1;
  z-index: 1;
}

.sk-hero-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  display: flex;
  gap: 0;
  align-items: center;
  z-index: 3;
}

.sk-hero-nav .hero-gallery-arrow {
  width: 52px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--sk-ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.25s, color 0.25s;
}

.sk-hero-nav .hero-gallery-arrow:hover {
  background: var(--sk-accent);
  color: #fff;
}

.sk-hero-nav .hero-gallery-prev {
  border-right: 0;
}

@media (max-width: 991px) {
  /* .sk-hero-figure {
    margin-top: 40px;
  } */

  .sk-hero-nav {
    bottom: -20px;
  }
}

/* ==========================================================================
   24.3  FEATURES — hairline-ruled stat row
   ========================================================================== */
.sk-features {
  /* background: #fff; */
  border-top: 1px solid var(--sk-line);
  /* padding: clamp(56px, 7vw, 84px) 0; */
  padding: 50px 0 50px;
}

.sk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sk-stat {
  padding: 8px 30px;
  /* border-left: 1px solid var(--sk-line); */
}

.sk-stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.sk-stat-num {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sk-ink);
}

.sk-stat-suffix {
  color: var(--sk-accent);
  font-size: 0.5em;
  margin-top: 0.3em;
}

.sk-stat-label {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sk-ink-mute);
}

@media (max-width: 768px) {
  .sk-stats {
    grid-template-columns: 1fr 1fr;
    gap: 30px 0;
  }

  .sk-stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .sk-stat:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .sk-stats {
    grid-template-columns: 1fr;
  }

  .sk-stat {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--sk-line);
  }

  .sk-stat:first-child {
    border-top: 0;
  }
}

/* ==========================================================================
   24.4  WHY CHOOSE US — solid cards on the darkened banner (contrast fix)
   ========================================================================== */
.sk-why {
  position: relative;
  overflow: hidden;
  /* padding: var(--pad-section, clamp(90px, 12vw, 160px)) 0; */
  padding: 30px 0 30px;
}

.sk-why .wc-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sk-why .wc-banner-img {
  position: absolute;
  inset: -14% 0;
  background: url("../images/home/digital-agency-studio-seo-dashboards.jpg") center / cover no-repeat;
  will-change: transform;
}

.sk-why .wc-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(7, 20, 36, 0.90) 0%,
      rgba(7, 20, 36, 0.86) 45%,
      rgba(7, 20, 36, 0.94) 100%);
}

.sk-why .container {
  position: relative;
  z-index: 1;
}

.sk-why-head {
  /* max-width: 780px; */
  margin-bottom: clamp(30px, 5vw, 30px);
}

.sk-why-title {
  font-size: var(--sk-fs-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.sk-why-title span {
  color: rgba(255, 255, 255, 0.55);
}

.sk-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sk-why-card {
  position: relative;
  /* background: #0c2136; */
  padding: clamp(28px, 3vw, 38px);
  overflow: hidden;
  transition: background 0.35s var(--sk-ease), transform 0.35s var(--sk-ease);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sk-why-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--sk-accent);
  transition: width 0.4s var(--sk-ease);
}

.sk-why-card:hover {
  background: #102a44;
  transform: translateY(-4px);
}

.sk-why-card:hover::before {
  width: 100%;
}

.sk-why-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}

.sk-why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 18px 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--sk-accent);
  font-size: 1.25rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.sk-why-card:hover .sk-why-icon {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
  color: #fff;
}

.sk-why-card h3 {
  font-size: var(--sk-fs-h3);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.sk-why-card p {
  font-size: 0.9rem;
  line-height: 1.72;
  /* color: rgba(255, 255, 255, 0.66); */
  color: #ffffff;
  margin: 0;
}

/* 6th card — client support through the ERP. A light card in the style of
   the services section's .sk-svc-card, so it stands apart from the dark
   cards and carries the Client Login button. */
.sk-why-card--erp {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--sk-accent);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.sk-why-card--erp:hover {
  background: var(--surface, #fff);
}

/* keep the hover accent line inside the rounded corners */
.sk-why-card--erp::before {
  border-radius: 10px 10px 0 0;
}

.sk-why-erp-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.sk-why-card--erp .sk-why-icon {
  flex: none;
  width: 52px;
  height: 52px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--sk-accent);
  font-size: 1.5rem;
}

.sk-why-card--erp:hover .sk-why-icon {
  background: var(--sk-accent);
  color: #fff;
}

.sk-why-card--erp h3 {
  color: var(--text);
  margin: 0;
}

.sk-why-card--erp .sk-why-erp-tagline {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sk-accent);
  margin: 0 0 12px;
}

.sk-why-erp-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sk-why-erp-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text2);
}

.sk-why-erp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--sk-accent);
}

.sk-why-card--erp .btn-primary-custom {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 992px) {
  .sk-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sk-why-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-why .wc-banner-img {
    transform: none !important;
  }
}

/* ==========================================================================
   24.5  SERVICES — retune the existing dark marquee (markup unchanged)
   ========================================================================== */
.merge-xyz-services .cards-area {
  background: var(--sk-deep) !important;
}

.merge-xyz-services .title {
  font-size: var(--sk-fs-h2) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.08 !important;
}

.merge-xyz-services .section-label::before {
  background: rgba(255, 255, 255, 0.5);
}

.merge-xyz-services .heading-group {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.merge-xyz-services .info-card {
  border-radius: 4px !important;
}

/* ==========================================================================
   24.6  MANUFACTURING SPECIALIZATION — tight asymmetric agency block
   ========================================================================== */
.sk-mfg {
  background: #fff;
}

.sk-mfg .mfg-shell {
  display: block;
}

.sk-mfg .mfg-head {
  /* max-width: 760px; */
  margin-bottom: clamp(36px, 4vw, 56px);
}

.sk-mfg .mfg-head .section-sub {
  margin-top: 14px;
  color: var(--sk-ink-soft);
}

.sk-mfg .mfg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.sk-mfg .mfg-aside {
  border-top: 2px solid var(--sk-ink);
  padding-top: 22px;
}

.sk-mfg .mfg-aside>p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--sk-ink-soft);
}

.sk-mfg .mfg-intro-note {
  margin-top: 18px;
  font-weight: 700;
  color: var(--sk-ink);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sk-mfg .mfg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 26px;
}

.sk-mfg .mfg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sk-ink-soft);
  border: 1px solid var(--sk-line);
  border-radius: 2px;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.sk-mfg .mfg-chip i {
  color: var(--sk-accent);
  font-size: 0.9em;
}

.sk-mfg .mfg-chip:hover {
  border-color: var(--sk-accent);
  color: var(--sk-ink);
  background: var(--sk-paper-alt);
}

.sk-mfg .mfg-feats {
  display: block;
  border-top: 1px solid var(--sk-line);
}

.sk-mfg .mfg-feat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--sk-line);
  transition: padding-left 0.3s var(--sk-ease);
}

.sk-mfg .mfg-feat:hover {
  padding-left: 8px;
}

.sk-mfg .mfg-feat-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--sk-ink-mute);
  padding-top: 4px;
}

.sk-mfg .mfg-feat-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sk-accent);
  border: 1px solid var(--sk-line);
  font-size: 1rem;
}

.sk-mfg .mfg-feat-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sk-ink);
  margin-bottom: 5px;
}

.sk-mfg .mfg-feat-body p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--sk-ink-soft);
  margin: 0;
}

.sk-mfg .mfg-cta {
  margin-top: 4px;
}

@media (max-width: 992px) {
  .sk-mfg .mfg-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .sk-mfg .mfg-feat {
    grid-template-columns: auto 1fr;
  }

  .sk-mfg .mfg-feat-icon {
    display: none;
  }
}

/* ==========================================================================
   24.7  PRESENCE — hairline-connected stepper
   ========================================================================== */
.sk-presence {
  background: var(--sk-paper-alt);
}

.sk-presence .presence-head {
  /* max-width: 820px; */
  margin-bottom: clamp(44px, 5vw, 68px);
}

.sk-presence .presence-head .section-sub {
  margin-top: 14px;
  color: var(--sk-ink-soft);
  max-width: none;
}

.sk-presence .presence-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

.sk-presence .presence-flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 1px;
  background: var(--sk-line-2);
}

.sk-presence .presence-node {
  position: relative;
  padding: 0 18px 0 0;
}

.sk-presence .presence-node-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--sk-ink);
  color: var(--sk-ink);
  font-size: 1rem;
  margin-bottom: 20px;
  transition: background 0.3s var(--sk-ease), color 0.3s, transform 0.3s var(--sk-ease);
}

.sk-presence .presence-node:hover .presence-node-dot {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
  color: #fff;
  transform: translateY(-3px);
}

.sk-presence .presence-node h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sk-ink);
  margin-bottom: 8px;
}

.sk-presence .presence-node:hover h4 {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--sk-accent);
}

.sk-presence .presence-node p {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--sk-ink-soft);
  margin: 0;
}

.sk-presence .presence-cta-bar {
  margin-top: clamp(30px, 5vw, 30px);
  padding-top: 26px;
  border-top: 1px solid var(--sk-line);
}

@media (max-width: 900px) {
  .sk-presence .presence-flow {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
  }

  .sk-presence .presence-flow::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .sk-presence .presence-flow {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   24.8  VIDEO
   ========================================================================== */
.sk-video {
  background: #fff;
}

.sk-video-head {
  /* max-width: 640px; */
  /* max-width: 880px; */
  margin-bottom: clamp(30px, 4vw, 30px);
}

.sk-video-head .section-sub {
  margin-top: 12px;
  color: var(--sk-ink-soft);
}

.sk-video .video-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 16px;
  /* border-bottom: 1px solid var(--sk-line);
  margin-bottom: clamp(32px, 4vw, 48px); */
}

.sk-video .video-cat-chip {
  background: none;
  border: 0;
  padding: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sk-ink-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.sk-video .video-cat-chip:hover {
  color: var(--sk-ink);
}

.sk-video .video-cat-chip.active {
  color: var(--sk-ink);
  border-bottom-color: var(--sk-accent);
}

.sk-video .video-grid-item.is-hidden {
  display: none;
}

.sk-video .video-thumb-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sk-line);
  background: #000;
}

.sk-video .video-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sk-ease), opacity 0.3s;
  opacity: 0.9;
}

.sk-video .video-thumb-card:hover img {
  transform: scale(1.05);
  opacity: 0.7;
}

.sk-video .video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  background: rgba(7, 26, 46, 0.25);
  transition: background 0.3s, transform 0.3s var(--sk-ease);
}

.sk-video .video-thumb-card:hover .video-play-btn {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.sk-video .video-thumb-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   24.9  FAQ — full-width hairline rows, numbered, +/x indicator
   ========================================================================== */
.sk-faq {
  background: var(--sk-paper-alt);
}

.sk-faq-rail {
  position: sticky;
  top: 110px;
}

/* Animated Satkar mark: the real 75% wordmark image sits flush against a
   canvas that draws the missing ~25% globe as a rotating diamond-particle
   sphere, so the two halves read as one continuous logo. */
.sk-faq-logo-globe {
  display: flex;
  align-items: center;
  height: clamp(56px, 7vw, 84px);
  max-width: 100%;
  margin-top: 34px;
}

.sk-faq-logo-globe__mark {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  width: auto;
}

.sk-faq-logo-globe__canvas {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  aspect-ratio: 0.7377;
}

.sk-faq-accordion {
  counter-reset: skfaq;
  border-top: 1px solid var(--sk-ink);
}

.sk-faq .sk-faq-accordion .accordion-item {
  counter-increment: skfaq;
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--sk-line) !important;
  border-radius: 0 !important;
  margin: 0;
}

.sk-faq .sk-faq-accordion .accordion-button {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 26px 60px 26px 58px;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: var(--sk-ink) !important;
  position: relative;
}

.sk-faq .sk-faq-accordion .accordion-button::before {
  content: counter(skfaq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--sk-ink-mute);
  -webkit-text-stroke: 0;
}

.sk-faq .sk-faq-accordion .accordion-button::after {
  content: "\f282";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  width: auto;
  height: auto;
  background: none !important;
  background-image: none !important;
  font-family: "bootstrap-icons";
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  color: var(--sk-ink-mute);
  transition: transform 0.3s var(--sk-ease), color 0.3s;
}

.sk-faq .sk-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--sk-accent-ink) !important;
}

.sk-faq .sk-faq-accordion .accordion-button:not(.collapsed)::before {
  color: var(--sk-accent);
}

.sk-faq .sk-faq-accordion .accordion-button:not(.collapsed)::after {
  color: var(--sk-accent);
  transform: translateY(-50%) rotate(0deg);
}

.sk-faq .sk-faq-accordion .accordion-body {
  padding: 0 60px 28px 58px;
  border-top: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sk-ink-soft);
  font-weight: 500;
}

@media (max-width: 992px) {
  .sk-faq-rail {
    position: static;
  }
}

@media (max-width: 480px) {
  .sk-faq .sk-faq-accordion .accordion-button {
    padding: 22px 44px 22px 40px;
  }

  .sk-faq .sk-faq-accordion .accordion-body {
    padding: 0 0 24px 40px;
  }
}

/* ==========================================================================
   24.10  CTA
   ========================================================================== */
#cta.sk-cta {
  background: var(--sk-deep);
}

.sk-cta .cta-overlay {
  background: radial-gradient(120% 140% at 50% 0%, rgba(38, 132, 229, 0.18), transparent 60%);
}

.sk-cta .cta-content {
  /* padding: clamp(80px, 11vw, 150px) 0; */
  text-align: center;
  max-width: 940px;
  margin: 0 auto;
}

.sk-cta .sk-cta-eyebrow {
  justify-content: center;
  margin-bottom: 26px;
}

.sk-cta .cta-title {
  /* font-size: var(--sk-fs-display);
  font-weight: 800;
  letter-spacing: -0.03em; */
  line-height: 1.04;
}

.sk-cta .cta-title span {
  color: var(--sk-accent);
}

.sk-cta .cta-sub {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  line-height: 1.75;
  margin: 22px auto 38px;
}

.sk-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.sk-cta-ghost.btn-outline-custom {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.sk-cta-ghost.btn-outline-custom:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sk-cta .cta-location-line {
  margin-top: 34px;
  padding-top: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-block;
}

/* ==========================================================================
   24.11  BRANDS — CSS marquee, hairline frame, greyscale -> colour
   ========================================================================== */
.sk-brands {
  background: #fff;
  /* padding: var(--pad-section, clamp(90px, 12vw, 160px)) 0; */
  padding: 30px 0 30px;
}

.sk-brands .brands-titlebox {
  /* max-width: 640px; */
  margin-bottom: clamp(38px, 4vw, 56px);
}

.sk-brands .brands-title {
  font-size: var(--sk-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sk-ink);
  margin-bottom: 14px;
}

.sk-brands .brands-text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--sk-ink-soft);
}

.sk-brands .brands-marquee {
  position: relative;
  border-block: 1px solid #044a9e;
  padding: 6px 0;
}

.sk-brands .brands-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}

.sk-brands .brands-fade-left {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent);
}

.sk-brands .brands-fade-right {
  right: 0;
  background: linear-gradient(270deg, #fff, transparent);
}

.sk-brands .brands-mask {
  overflow: hidden;
}

.sk-brands .brands-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: skMarquee 80s linear infinite;
}

.sk-brands .brands-marquee:hover .brands-track {
  animation-play-state: paused;
}

.sk-brands .brand-logo-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 28px 28px;
  border-right: 1px solid #044a9e;
}

.sk-brands .brand-logo {
  /* height: 40px; */
  width: auto;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.3s, opacity 0.3s, transform 0.3s var(--sk-ease);
}

.sk-brands .brand-logo-card:hover .brand-logo {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

@keyframes skMarquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-brands .brands-track {
    animation: none;
  }
}

/* ==========================================================================
   24.12  FOOTER
   ========================================================================== */
.sk-footer {
  background: var(--sk-deep);
  padding-top: clamp(40px, 4vw, 52px);
}

.sk-footer .footer-inner {
  position: relative;
  z-index: 1;
}

.sk-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
}

.sk-footer .footer-logo-img {
  height: 62px;
  width: auto;
  display: block;
}

.sk-footer .footer-about {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.9;
}

.sk-footer .footer-heading {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.sk-footer .footer-heading::after {
  width: 22px;
  height: 1px;
  background: var(--sk-accent);
}

.sk-footer .footer-links a {
  font-size: 0.86rem;
  padding: 3px 0;
  color: rgba(255, 255, 255, 0.6);
}

.sk-footer .footer-links a:hover {
  color: #fff;
}

.sk-footer .footer-social {
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
}

.sk-footer .footer-service-areas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

.sk-footer .footer-service-areas strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.sk-footer .footer-service-areas strong i {
  color: var(--sk-accent);
}

.sk-footer .footer-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.sk-footer .footer-area-chips span {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  padding: 6px 13px;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.sk-footer .footer-area-chips span:hover {
  border-color: var(--sk-accent);
  color: #fff;
  background: rgba(38, 132, 229, 0.14);
}

.sk-footer .footer-divider {
  border-color: rgba(255, 255, 255, 0.08);
  margin-top: 18px;
  margin-bottom: 0;
}

.sk-footer .footer-bottom {
  padding: 12px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.sk-footer .footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
}

.sk-footer .footer-bottom a:hover {
  color: #fff;
}

/* ==========================================================================
   24.13  ENTRANCE MOTION
   Intentionally none. Content is always rendered at its natural opacity so it
   can never be trapped invisible by a throttled/blocked observer or animation
   clock. Motion in this rebuild is confined to :hover and the hero sliders.
   ========================================================================== */

/* ==========================================================================
   24.14  REDUCED MOTION — blanket safety for the new interactions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .sk-btn--magnetic,
  .sk-why-card,
  .sk-why-card::before,
  .sk-mfg .mfg-feat,
  .sk-presence .presence-node-dot,
  .sk-video .video-thumb-card img {
    transition: none !important;
    transform: none !important;
  }

  /* The caret's rotate() IS its glyph shape — keep the transform, drop only
     the hover transition. */
  .sk-caret {
    transition: none !important;
  }
}

/* ==========================================================================
   25. PREMIUM ANIMATION LAYER  (works with js/premium.js)
   Preloader, scroll progress, custom cursor, full-screen mobile menu,
   hero WebGL canvas + word-reveal primitives, pinned Services layout,
   section transitions. Content is never hidden by CSS alone — GSAP owns
   the reveal states, so the page is fully visible with JS off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1  PRELOADER
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sk-deep, #0a1c30);
  /* Failsafe: if premium.js never runs, clear the overlay after 3.5s so the
     site stays usable. The JS path dismisses it in ~1s via .is-done. */
  animation: skPreloaderSafety 0.4s ease 3.5s forwards;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(280px, 60vw);
}

.preloader__logo {
  overflow: hidden;
}

.preloader__logo img {
  display: block;
  width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.96;
  animation: skPreloaderLogo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preloader__bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.preloader__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sk-accent, #2684E5);
  transform: scaleX(0.05);
  transform-origin: left center;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}

@keyframes skPreloaderLogo {
  from {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.04);
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

@keyframes skPreloaderSafety {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   25.2  SCROLL PROGRESS BAR
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1060;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--sk-accent, #2684E5), var(--accent2, #1c6fd0));
  will-change: transform;
}

/* --------------------------------------------------------------------------
   25.3  CUSTOM CURSOR  (activated by JS only on fine-pointer desktop)
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
}

.cursor.is-active {
  opacity: 1;
}

.cursor.is-out {
  opacity: 0;
}

.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
}

.cursor__dot {
  width: 7px;
  height: 7px;
  background: #fff;
}

.cursor__ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease;
}

.cursor.is-hover .cursor__ring {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.12);
}

.cursor.is-view .cursor__ring {
  width: auto;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--sk-accent, #2684E5);
  border-color: var(--sk-accent, #2684E5);
  mix-blend-mode: normal;
}

.cursor__label {
  font-family: var(--font-body, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cursor.is-view .cursor__label {
  opacity: 1;
  transform: scale(1);
}

@media (hover: none),
(pointer: coarse) {
  .cursor {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   25.3b  APPOINTMENT + CLIENT LOGIN — topbar buttons (header.html), cloned
          into the mobile menu footer by premium.js
   -------------------------------------------------------------------------- */
.sk-topbar-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sk-topbar-btn,
#topbar a.sk-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--sk-accent, #2684E5);
  border: 1px solid var(--sk-accent, #2684E5);
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Appointment: outlined, so Client Login stays the primary action */
.sk-topbar-btn.sk-appointment,
#topbar a.sk-topbar-btn.sk-appointment {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
}

.sk-topbar-btn i,
#topbar .sk-topbar-btn i {
  color: inherit;
  font-size: 0.9em;
}

.sk-topbar-btn:hover,
.sk-topbar-btn:focus-visible,
#topbar a.sk-topbar-btn:hover,
#topbar a.sk-topbar-btn:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--sk-deep, #0a1c30);
}

/* the base 60px gaps + the two buttons no longer fit on one topbar line
   (the location line is shown from 1400px up — see header.html) */
.topbar-info {
  gap: 14px 28px;
}

@media (max-width: 1199.98px) {
  .topbar-info {
    gap: 8px 16px;
  }
}

/* tablets + phones: the topbar wraps to two rows (contacts + Client Login /
   socials) — centre both instead of leaving a ragged left edge */
@media (max-width: 991.98px) {
  #topbar .d-flex.justify-content-between {
    justify-content: center !important;
    row-gap: 6px !important;
  }

  .topbar-info {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .topbar-info {
    gap: 8px 12px;
  }

  #topbar a.sk-topbar-btn {
    padding: 3px 11px;
  }
}

/* --------------------------------------------------------------------------
   25.4  FULL-SCREEN MOBILE MENU  (built by premium.js from #navbarNav)
   -------------------------------------------------------------------------- */
html.menu-open {
  overflow: hidden;
}

.sk-menu {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  visibility: hidden;
  pointer-events: none;
}

.sk-menu.is-visible {
  visibility: visible;
}

.sk-menu.is-open {
  pointer-events: auto;
}

.sk-menu__bg {
  position: absolute;
  inset: 0;
  background: var(--sk-deep, #0a1c30);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.sk-menu.is-open .sk-menu__bg {
  clip-path: inset(0 0 0 0);
}

.sk-menu__nav {
  position: relative;
  z-index: 1;
  margin: 20px auto;
  width: min(90vw, 520px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}

/* logo centered in its row; the close button sits on the right edge without
   pushing the logo off-center */
.sk-menu__head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  padding: 0 52px;
}

.sk-menu__brand {
  display: block;
  max-width: 100%;
}

/* white Satkar logo (premium.js MENU_LOGO_SRC) */
.sk-menu__logo {
  display: block;
  height: auto;
  width: 240px;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

.sk-menu__close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.sk-menu__close:hover,
.sk-menu__close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) rotate(90deg);
}

.sk-menu__close:focus-visible {
  outline: 2px solid #1d8cf0;
  outline-offset: 2px;
}

/* the logo stays pinned above; the tab list + footer scroll together when
   they're taller than the available viewport height */
.sk-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sk-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sk-menu__item {
  opacity: 0;
  transform: translateY(28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sk-menu.is-open .sk-menu__item {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(0.18s + var(--i, 0) * 0.05s),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.18s + var(--i, 0) * 0.05s);
}

/* one tab expanded -> every other tab steps aside */
.sk-menu__list.has-expanded .sk-menu__item:not(.is-expanded) {
  display: none;
}

.sk-menu__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sk-menu__link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 16px 4px;
  font-family: var(--font-head, sans-serif);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 0.2s ease, padding-left 0.25s ease;
}

.sk-menu__link:hover,
.sk-menu__link:focus-visible,
.sk-menu__item.is-expanded .sk-menu__link {
  color: var(--sk-accent, #2684E5);
}

.sk-menu__link:hover,
.sk-menu__link:focus-visible {
  padding-left: 12px;
}

.sk-menu__toggle,
.sk-menu__cue {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #fff;
}

.sk-menu__toggle {
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sk-menu__toggle:hover,
.sk-menu__toggle:focus-visible,
.sk-menu__toggle[aria-expanded="true"] {
  background: var(--sk-accent, #2684E5);
  border-color: var(--sk-accent, #2684E5);
}

.sk-menu__toggle i,
.sk-menu__cue i {
  display: block;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sk-menu__toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.sk-menu__cue {
  color: rgba(255, 255, 255, 0.45);
}

.sk-menu__sub {
  display: none;
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 4px 6px;
}

.sk-menu__item.is-expanded .sk-menu__sub {
  display: block;
}

.sk-menu__item.is-expanded .sk-menu__sub li {
  animation: skMenuSubIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--j, 0) * 0.035s);
}

@keyframes skMenuSubIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sk-menu__sub a {
  display: block;
  padding: 10px 4px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.sk-menu__sub a:hover,
.sk-menu__sub a:focus-visible {
  color: #fff;
  padding-left: 10px;
}

/* Client Login + social links at the foot of the menu */
.sk-menu__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 12px;
  padding: 28px 4px 8px;
  opacity: 0;
}

.sk-menu.is-open .sk-menu__footer {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}

.sk-menu__footer .sk-topbar-actions {
  justify-content: flex-start;
}

.sk-menu__footer .sk-topbar-btn {
  padding: 11px 20px;
  font-size: 0.9rem;
}

.sk-menu__social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sk-menu__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sk-menu__social a:hover,
.sk-menu__social a:focus-visible {
  background: var(--sk-accent, #2684E5);
  border-color: var(--sk-accent, #2684E5);
  color: #fff;
}

/* burger -> X once premium.js takes over the toggler */
.navbar-toggler.is-open .navbar-toggler-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggler.is-open .navbar-toggler-icon span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.is-open .navbar-toggler-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar-toggler.is-open {
  position: fixed;
  right: max(16px, calc((100vw - 1200px) / 2 + 15px));
  z-index: 1056;
}

/* --------------------------------------------------------------------------
   25.5  HERO — WebGL canvas + word-reveal primitives
   -------------------------------------------------------------------------- */
.sk-hero {
  position: relative;
}

.sk-hero .auto-container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* ------------------------------------------------------------------
   GLOBAL SECTION-AWARE PARTICLE NETWORK
   One fixed, full-viewport 2D canvas that sits behind every homepage
   section's content but in front of section backgrounds/decoration.
   pointer-events:none so it never blocks buttons, links, video or nav.
   Colours + opacity are driven per-section from premium.js §7.
   ------------------------------------------------------------------ */
.sk-net-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.sk-net-canvas.is-live {
  opacity: 1;
}

/* Keep every homepage section's content above the network layer while
   leaving section backgrounds / decorative overlays behind it, so the
   section-aware colour adaptation stays visible. These wrappers are
   already position:relative in most sections; this just makes it uniform. */
body>section>.container,
body>section>.auto-container,
body>footer>.container {
  position: relative;
  z-index: 1;
}

/* Neutralise the base scaleY heading animation from §1 so the GSAP word-reveal
   is the single owner of the hero headline motion. */
.sk-enhanced .sk-hero .slider-one_heading,
.sk-enhanced .sk-hero .swiper-slide-active .slider-one_heading {
  opacity: 1;
  transform: none;
}

/* Same single-owner treatment for the supporting copy. The base state from §1
   (opacity:0 + scaleY(0), revealed by a `.swiper-slide-active` CSS transition)
   collides with the GSAP hero timeline on the first slide and can leave that
   transition stranded — so the eyebrow, paragraph and buttons on slide 1 never
   appear. Under the enhanced engine GSAP owns their entrance (initial timeline
   + per-slide re-reveal in premium.js). */
.sk-enhanced .sk-hero .slider-one_eyebrow,
.sk-enhanced .sk-hero .slider-one_text,
.sk-enhanced .sk-hero .slider-one_options {
  opacity: 1;
  transform: none;
  transition: none;
}

.sk-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.sk-word {
  display: inline-block;
  will-change: transform;
}

/* After a split, every word is a <span> inside the heading, so selectors like
   `.section-title span` / `.slider-one_heading span` (and their brand-accent
   colour) would apply to all of them. Re-assert inherit on the word primitives
   with enough specificity to beat those rules; only the preserved brand-accent
   word (.sk-word--hl) keeps the accent colour. */
.sk-enhanced .sk-hero .slider-one_heading .sk-word-wrap,
.sk-enhanced .sk-hero .slider-one_heading .sk-word,
.sk-enhanced .sk-cta .cta-title .sk-word-wrap,
.sk-enhanced .sk-cta .cta-title .sk-word,
.sk-enhanced .section-title .sk-word-wrap,
.sk-enhanced .section-title .sk-word,
.sk-enhanced .sk-why-title .sk-word-wrap,
.sk-enhanced .sk-why-title .sk-word,
.sk-enhanced .brands-title .sk-word-wrap,
.sk-enhanced .brands-title .sk-word,
.sk-enhanced .merge-xyz-services .title .sk-word-wrap,
.sk-enhanced .merge-xyz-services .title .sk-word {
  color: inherit;
}

.sk-enhanced .sk-hero .slider-one_heading .sk-word--hl,
.sk-enhanced .sk-cta .cta-title .sk-word--hl,
.sk-enhanced .section-title .sk-word--hl,
.sk-enhanced .sk-why-title .sk-word--hl,
.sk-enhanced .brands-title .sk-word--hl,
.sk-enhanced .merge-xyz-services .title .sk-word--hl {
  color: var(--sk-accent, #2684E5);
}

.sk-enhanced .sk-hero .slider-one_heading .sk-word-wrap::before,
.sk-enhanced .sk-hero .slider-one_heading .sk-word::before {
  content: none;
}

/* --------------------------------------------------------------------------
   25.6  SERVICES — pinned horizontal track (desktop, class set by JS)
   -------------------------------------------------------------------------- */
.sk-services-pin .scroller,
.sk-services-pin .scroller.masked {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.sk-services-pin .scroller__items-list {
  animation: none;
  width: max-content;
  will-change: transform;
}

.sk-services-pin .scroller__item[aria-hidden="true"] {
  display: none;
}

.sk-services-pin .info-card {
  transform: scale(0.9);
  opacity: 0.5;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.sk-services-pin .info-card.is-active {
  transform: scale(1);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   25.7  SERVICE CARD — coordinated hover micro-interaction (desktop)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .merge-xyz-services .info-card .butn .icon {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .merge-xyz-services .info-card:hover .butn .icon {
    transform: rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   25.8  SECTION TRANSITIONS — hairline where a deep-ink section meets white
   -------------------------------------------------------------------------- */
.sk-mfg::before,
.sk-brands::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sk-line, rgba(7, 26, 46, 0.12));
}

/* --------------------------------------------------------------------------
   25.9  REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo img {
    animation: none;
    clip-path: none;
  }

  .cursor {
    display: none !important;
  }

  /* keep the logo canvases present — JS draws a still diamond globe on them so
     the header/footer mark still reads complete — just drop the fade-in. */
  .sk-net-canvas,
  .sk-logo-strip {
    transition: none !important;
  }

  .sk-menu__bg,
  .sk-menu__item,
  .sk-menu.is-open .sk-menu__item,
  .sk-menu.is-open .sk-menu__footer,
  .sk-menu__toggle i {
    transition: none !important;
  }

  .sk-menu__item.is-expanded .sk-menu__sub li {
    animation: none;
  }

  .sk-menu__bg {
    clip-path: inset(0 0 0 0);
  }
}

/* ==========================================================================
   26.  SERVICES / WHAT WE DO — 6-card grid (2 rows) after Why Choose
   Light section between the dark Why-Choose block and the Manufacturing block.
   ========================================================================== */
.sk-svc {
  background: var(--bg2);
  border-top: 1px solid var(--sk-line);
}

.sk-svc-head {
  /* max-width: 760px; */
  margin-bottom: clamp(30px, 5vw, 30px);
}

.sk-svc-head .section-sub {
  color: var(--text2);
  max-width: 100%;
}

.sk-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sk-svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--sk-accent);
  border-radius: 10px;
  padding: clamp(24px, 2.4vw, 34px);
  transition: transform 0.35s var(--sk-ease),
    box-shadow 0.35s var(--sk-ease),
    border-color 0.35s var(--sk-ease);
}

@media (hover: hover) and (pointer: fine) {
  .sk-svc-card:hover {
    transform: translateY(-6px);
    border-color: var(--sk-accent);
    box-shadow: 0 18px 44px rgba(7, 26, 46, 0.12);
    /* background-color: #044a9e; */
    color: #fff;
  }
}

.sk-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--sk-accent);
  font-size: 1.5rem;
  margin-bottom: 20px;
  transition: background 0.3s var(--sk-ease), color 0.3s var(--sk-ease);
}

.sk-svc-card:hover .sk-svc-icon {
  background: var(--sk-accent);
  color: #fff;
}

.sk-svc-card h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
}

.sk-svc-tagline {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sk-accent);
  margin-bottom: 12px;
}

.sk-svc-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text2);
  margin-bottom: 18px;
}

.sk-svc-list-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}

.sk-svc-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-svc-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text2);
}

.sk-svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--sk-accent);
}

.sk-svc-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sk-accent);
  transition: gap 0.25s var(--sk-ease);
}

.sk-svc-cta i {
  transition: transform 0.25s var(--sk-ease);
}

.sk-svc-card:hover .sk-svc-cta {
  gap: 13px;
}

.sk-svc-card:hover .sk-svc-cta i {
  transform: translateX(3px);
}

/* 6th card — section CTA */
.sk-svc-card--cta {
  background: var(--sk-deep);
  border-color: var(--sk-deep);
  justify-content: center;
}

.sk-svc-card--cta .sk-svc-icon {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.sk-svc-card--cta:hover .sk-svc-icon {
  background: var(--sk-accent);
  color: #fff;
}

.sk-svc-card--cta h3 {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 12px;
}

.sk-svc-card--cta p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
}

.sk-svc-card--cta .btn-primary-custom {
  align-self: flex-start;
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .sk-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sk-svc-grid {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .sk-svc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-svc-card--cta {
    text-align: left;
  }
}

/* ==========================================================================
   27.  LOGO-COMPLETION PARTICLE JOURNEY  (works with js/premium.js §7)
   The header + footer carry the 75% Satkar logo asset; the missing ~25%
   globe is drawn with canvas particles that travel between the two ends,
   driven by normalised scroll progress. Additive only — no existing header,
   footer, logo or canvas rule is modified. The main journey renders on the
   existing .sk-net-canvas; .sk-logo-strip is a thin top surface that sits
   above the opaque sticky nav so the docked header formation stays visible.
   ========================================================================== */
.sk-logo-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 1041;
  /* above #mainNav (1040), below #topbar (1050) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.sk-logo-strip.is-live {
  opacity: 1;
}

@media (max-width: 575px) {
  .sk-logo-strip {
    height: 120px;
  }
}

/* ==========================================================================
   28.  HOMEPAGE REFINEMENT PASS (2026-09)
   Scoped, additive overrides for: nav container alignment + Home icon,
   Flaticon (UICONS) content icons, hero banner, features redesign,
   dark manufacturing + presence contrast, FAQ background, brand logos.
   Loaded last so equal-specificity rules win over sections 24 / 26 above.
   ========================================================================== */

/* ---- 28.0  Flaticon UICONS — shared sizing / vertical rhythm ------------- */
.sk-why-icon .fi,
.sk-svc-icon .fi,
.sk-mfg .mfg-feat-icon .fi,
.sk-presence .presence-node-dot .fi,
.sk-features .sk-stat-ic .fi,
.sk-nav .nav-link .fi {
  display: block;
  line-height: 1;
}

.sk-why-icon .fi::before,
.sk-svc-icon .fi::before,
.sk-mfg .mfg-feat-icon .fi::before,
.sk-presence .presence-node-dot .fi::before,
.sk-features .sk-stat-ic .fi::before {
  display: block;
}

/* ---- 28.1  NAVBAR — match the 1200px section container, align Home icon -- */
.sk-nav>.container {
  max-width: 1320px;
}

.sk-nav .navbar>.container {
  align-items: center;
}

.sk-nav .nav-link.nav-link--home {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.sk-nav .nav-link.nav-link--home .fi {
  font-size: 1.15rem;
  transform: translateY(1px);
}

/* keep the icon-only Home item clear of the brand mark on wide screens */
@media (min-width: 992px) {
  .sk-nav .navbar-nav>.nav-item:first-child {
    margin-left: 6px;
  }
}

@media (max-width: 991px) {
  .sk-nav .nav-link.nav-link--home {
    padding-left: 4px !important;
  }

  .sk-nav .nav-link.nav-link--home .fi {
    font-size: 1.05rem;
  }
}

/* ---- 28.2  HERO — hero-banner.png now lives on .sk-hero-video-stack
   (see 24.3 above) so the circular artwork and the video clip mask are
   always the same box at every breakpoint. -------------------------- */

/* ---- 28.3  FEATURES — reference-style centred stat card --------------- */
#features.sk-features {
  /* background: #fff; */
  padding: 50px 0 30px;
  margin-top: -160px;
}

/* The stat card above overlaps the hero's bottom edge by ~130px (160px pull-up
   minus the section's 30px top padding). Reserve that room below the hero
   content so the video network is never covered. Kept as margin on the row so
   the uniform 30px section padding is untouched. Phone value: 480px block below. */
.sk-hero .auto-container > .row {
  margin-bottom: 120px;
}

#features .sk-stats {
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid #044a9e;
  border-radius: 16px;
  padding: 20px 0;
  box-shadow: 0 26px 60px -34px rgba(7, 26, 46, 0.22);
}

#features .sk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 6px clamp(14px, 2vw, 30px);
  border-left: 1px solid #044a9e;
}

#features .sk-stat:first-child {
  border-left: 0;
  padding-left: clamp(14px, 2vw, 30px);
}

#features .sk-stat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
  color: #044A9E;
  margin-bottom: 16px;
}

#features .sk-stat-num {
  justify-content: center;
  color: #044A9E;
}

#features .sk-stat-suffix {
  color: #044A9E;
}

#features .sk-stat-label {
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sk-ink-soft);
}

@media (max-width: 768px) {
  #features .sk-stats {
    grid-template-columns: 1fr 1fr;
    gap: 30px 0;
  }

  #features .sk-stat {
    padding: 6px 16px;
  }

  #features .sk-stat:nth-child(odd) {
    border-left: 0;
    padding-left: 16px;
  }

  #features .sk-stat:nth-child(3),
  #features .sk-stat:nth-child(4) {
    border-top: 1px solid var(--sk-line);
    padding-top: 26px;
  }
}

@media (max-width: 480px) {
  #features .sk-stats {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #features .sk-stat {
    border-left: 0;
    border-top: 1px solid var(--sk-line);
    padding: 24px 0;
  }

  #features .sk-stat:first-child {
    border-top: 0;
    padding-left: 0;
  }

  #features .sk-stat:nth-child(3),
  #features .sk-stat:nth-child(4) {
    padding-top: 24px;
  }
}

/* ---- 28.4  SERVICES — icon beside heading + secondary label chip ------ */
.sk-svc-cardhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.sk-svc-cardhead .sk-svc-icon {
  margin-bottom: 0;
}

.sk-svc-cardhead h3 {
  margin-bottom: 0;
}

.sk-svc-list-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #044A9E;
  background: var(--accent-light);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.sk-svc-list-label::before {
  content: "";
  width: 14px;
  height: 10px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13M10 1.5l4 3.5-4 3.5'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13M10 1.5l4 3.5-4 3.5'/%3E%3C/svg%3E") no-repeat left center / contain;
}

@media (max-width: 560px) {
  .sk-svc-cardhead .sk-svc-icon {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
  }
}

/* ---- 28.5  MANUFACTURING SPECIALIZATION — readable on #02172F -------- */
.sk-mfg .section-label {
  color: rgba(255, 255, 255, 0.72);
}

.sk-mfg .section-title {
  color: #fff;
}

.sk-mfg .section-title span {
  color: #044a9e;
}

.sk-mfg .mfg-head .section-sub {
  color: rgba(255, 255, 255, 0.74);
}

.sk-mfg .mfg-aside {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.sk-mfg .mfg-aside>p {
  color: rgba(255, 255, 255, 0.78);
}

.sk-mfg .mfg-intro-note {
  color: #fff;
}

.sk-mfg .mfg-chip {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.22);
}

.sk-mfg .mfg-chip i {
  color: #044a9e;
}

.sk-mfg .mfg-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.sk-mfg .mfg-feats {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.sk-mfg .mfg-feat {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.sk-mfg .mfg-feat-num {
  color: rgba(255, 255, 255, 0.5);
}

.sk-mfg .mfg-feat-icon {
  color: #fff;
  background: rgba(4, 74, 158, 0.45);
  border-color: rgba(255, 255, 255, 0.22);
}

.sk-mfg .mfg-feat-body h4 {
  color: #fff;
}

.sk-mfg .mfg-feat-body p {
  color: rgba(255, 255, 255, 0.74);
}

.sk-mfg .mfg-cta:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.sk-mfg::before {
  background: rgba(255, 255, 255, 0.14);
}

/* ---- 28.6  PRESENCE — premium dark (#02172F) treatment -------------- */
#presence.sk-presence {
  background: #02172F;
}

.sk-presence .section-label {
  color: rgba(255, 255, 255, 0.72);
}

.sk-presence .section-title {
  color: #fff;
}

.sk-presence .section-title span {
  color: #044a9e;
}

.sk-presence .presence-head .section-sub {
  color: rgba(255, 255, 255, 0.74);
}

.sk-presence .presence-flow::before {
  background: rgba(255, 255, 255, 0.18);
}

.sk-presence .presence-node-dot {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.sk-presence .presence-node:hover .presence-node-dot {
  background: #044A9E;
  border-color: #044A9E;
  color: #fff;
}

.sk-presence .presence-node h4 {
  color: #fff;
}

.sk-presence .presence-node p {
  color: rgba(255, 255, 255, 0.72);
}

/* .sk-presence .presence-cta-bar {
  border-top-color: rgba(255, 255, 255, 0.16);
} */

.sk-presence .presence-cta-bar .btn-primary-custom:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ---- 28.7  FAQ — faq-bg.jpg behind the right-hand accordion column ---
   faq-bg.jpg is a dark navy tech-pattern, so the right column becomes a
   premium dark card and its accordion text is lifted to #fff. */
#faq .row>.col-lg-8 {
  position: relative;
  background-image:
    linear-gradient(rgba(2, 23, 47, 0.74), rgba(2, 23, 47, 0.84)),
    url("../images/faq/faq-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* keeps the artwork stationary in the viewport as the accordion scrolls
     past it, instead of scrolling together with the card content */
  background-attachment: fixed;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden;
}

/* background-attachment: fixed is unreliable/janky on touch browsers
   (notably iOS Safari) and unnecessary once the card is full width, so the
   image just scrolls with the card below the desktop/tablet breakpoint */
@media (max-width: 991px) {
  #faq .row>.col-lg-8 {
    background-attachment: scroll;
  }
}

/* accordion stays see-through so the card reads as one dark surface */
#faq .row>.col-lg-8 .accordion,
#faq .row>.col-lg-8 .accordion-item,
#faq .row>.col-lg-8 .accordion-button,
#faq .row>.col-lg-8 .accordion-collapse {
  background: transparent !important;
}

#faq .row>.col-lg-8 .accordion-body {
  background: #f4f6fa !important;
}

#faq .sk-faq-accordion {
  border-top-color: rgba(255, 255, 255, 0.30);
}

#faq .sk-faq-accordion .accordion-item {
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

#faq .sk-faq-accordion .accordion-button {
  color: #fff !important;
}

#faq .sk-faq-accordion .accordion-button::before {
  color: rgba(255, 255, 255, 0.5);
}

#faq .sk-faq-accordion .accordion-button::after {
  color: rgba(255, 255, 255, 0.7);
}

/* #faq .sk-faq-accordion .accordion-button:not(.collapsed) {
  color: #044a9e !important;
} */

#faq .sk-faq-accordion .accordion-button:not(.collapsed)::before,
#faq .sk-faq-accordion .accordion-button:not(.collapsed)::after {
  color: #fff;
}

#faq .sk-faq-accordion .accordion-body {
  color: #000;
}

@media (max-width: 991px) {
  #faq .row>.col-lg-8 {
    padding: clamp(18px, 5vw, 28px);
  }
}

/* ---- 28.8  BRANDS — logos fully visible by default ------------------ */
.sk-brands .brand-logo {
  filter: none;
  opacity: 1;
}

.sk-brands .brand-logo-card:hover .brand-logo {
  filter: none;
  opacity: 1;
  transform: scale(1.3);
}


@media (max-width: 480px) {
  #features.sk-features {
    margin-top: -100px;
  }

  /* overlap shrinks to ~70px here (100px pull-up minus 30px padding) */
  .sk-hero .auto-container > .row {
    margin-bottom: 60px;
  }
}

/* ==========================================================================
   29.  SERVICE-PAGE ADDITIONS (Website Design & Development / SEO pages) —
   small, scoped additions reusing existing tokens; no new colours.
   ========================================================================== */

/* Two-column checklist for long .inner-check lists on the service pages */
.feature-checklist {
  column-count: 1;
  column-gap: 32px;
}

@media (min-width: 576px) {
  .feature-checklist {
    column-count: 2;
  }
}

.feature-checklist li {
  break-inside: avoid;
}

/* Numbered "icon" badge reusing the .sk-svc-icon slot for process-step cards */
.sk-svc-icon--num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Comparison table (Our SEO Services) styled to match the site's card system */
.svc-compare-table {
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  overflow: hidden;
}

.svc-compare-table table {
  margin-bottom: 0;
}

.svc-compare-table thead th {
  background: var(--sk-accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  padding: 16px 20px;
}

.svc-compare-table tbody td {
  padding: 14px 20px;
  font-size: 0.92rem;
  color: var(--text2);
  border-color: var(--sk-line);
}

.svc-compare-table tbody td:first-child {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.svc-compare-table tbody tr:nth-child(odd) {
  background: var(--sk-paper-alt);
}

/* ============================================================
   SCROLL-TO-TOP BUTTON (.scrollToTop.scroll-btn)
   Ports the existing implementation from assets/css/style.css so it
   renders identically on pages using this css/style.css stack instead
   of the legacy template stylesheet. Values are copied from the live
   implementation already shipping on the blog pages — not a new design.
   ============================================================ */
.scrollToTop.scroll-btn {
  position: fixed;
  right: 60px;
  bottom: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.4s;
  z-index: 96;
  display: inline-block;
  border-radius: 50%;
}

.scrollToTop.scroll-btn i {
  display: inline-block;
  background-color: #0E5AF2;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 2;
  border-radius: inherit;
  position: relative;
  transition: all ease 0.8s;
}

.scrollToTop.scroll-btn:before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  right: -6px;
  bottom: -6px;
  background-color: transparent;
  border-radius: inherit;
  z-index: 1;
  border: 2px dashed #0E5AF2;
  animation: sk-scroll-btn-spin 13s infinite linear;
}

.scrollToTop.scroll-btn:focus i,
.scrollToTop.scroll-btn:hover i {
  background-color: #1A1A1A;
  color: #ffffff;
}

.scrollToTop.scroll-btn.show {
  bottom: 60px;
  opacity: 1;
  visibility: visible;
}

@keyframes sk-scroll-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .scrollToTop.scroll-btn {
    right: 20px;
  }

  .scrollToTop.scroll-btn.show {
    bottom: 20px;
  }
}

/* ==========================================================================
   OUR TEAM PAGE — Founder / Founding Team / Expert Team
   Scoped components: .founder-modern-*, .founding-team-*, .expert-team-*
   Shared helpers: .tm-* (eyebrow, heading, sub, dots, icon, checklist)
   ========================================================================== */
.founder-modern-section,
.founding-team-section,
.expert-team-section {
  --tm-navy: #0a1a6b;
  --tm-blue: #0b5cf0;
  --tm-blue-2: #2684e5;
  --tm-ink: #1f2a5a;
  --tm-soft-2: #f5f9ff;
  --tm-line: rgba(11, 92, 240, 0.12);
  --tm-shadow: 0 10px 34px rgba(20, 60, 140, 0.08);
  position: relative;
  overflow: hidden;
  background: #fff;
  font-family: var(--font-body, 'Ubuntu', sans-serif);
  color: var(--tm-ink);
}

.founder-modern-section {
  padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
  /* background: #f8fbff; */
}

.founding-team-section {
  /* padding: clamp(36px, 5vw, 64px) 0; */
  padding: 30px 0 30px;
}

.expert-team-section {
  /* padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 88px); */
  padding: 30px 0 50px;
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

/* ---- shared ---- */
.tm-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-blue);
}

.tm-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  height: 10px;
  background: var(--tm-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.tm-heading {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tm-navy);
  max-width: none;
}

.tm-heading span {
  background: linear-gradient(90deg, var(--tm-blue) 0%, var(--tm-blue-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tm-blue);
}

.tm-sub {
  margin: 0;
  max-width: 760px;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: #4a5a8c;
}

.tm-head {
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

.tm-head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.tm-dots {
  position: absolute;
  width: 88px;
  height: 66px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(38, 132, 229, 0.35) 2px, transparent 2.5px);
  background-size: 22px 22px;
}

.tm-dots--tr {
  top: 56px;
  right: clamp(12px, 3vw, 40px);
}

.tm-dots--bl {
  bottom: 10px;
  left: 10px;
}

.tm-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e3f0ff;
  color: var(--tm-blue);
  font-size: 1.5rem;
}

.tm-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.tm-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.02rem;
  color: var(--tm-ink);
}

.tm-checklist li::before {
  content: "\F26A";
  /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  flex: 0 0 auto;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tm-blue);
}

/* ---- founder ---- */
.founder-modern-panel {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background: linear-gradient(135deg, #eef6ff 0%, #e6f1ff 100%);
  overflow: hidden;
}

.founder-modern-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(38, 132, 229, 0.09);
  pointer-events: none;
}

.founder-modern-photo {
  position: relative;
  margin: 0 0 56px 0;
  z-index: 1;
}

.founder-modern-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 0.86 / 1; */
  object-fit: cover;
  object-position: center top;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(10, 26, 107, 0.18);
}

.founder-modern-quote {
  position: absolute;
  left: -12px;
  bottom: -80px;
  width: min(62%, 300px);
  padding: 16px 20px 18px;
  border-radius: 20px;
  background: #0a3a78;
  color: #fff;
  box-shadow: 0 16px 36px rgba(10, 40, 100, 0.3);
}

.founder-modern-quote .bi-quote {
  display: block;
  font-size: 3rem;
  line-height: 0.7;
  margin-bottom: 4px;
}

.founder-modern-quote blockquote {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.4;
}

.founder-modern-quote cite {
  font-style: normal;
  font-size: 0.95rem;
  opacity: 0.9;
}

.founder-modern-content {
  position: relative;
  z-index: 1;
}

.founder-modern-content .tm-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
}

.founder-modern-role {
  margin: 8px 0 0;
  padding-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-navy);
  position: relative;
}

.founder-modern-role::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: #044a9e;
}

.founder-modern-name {
  margin: 10px 0 4px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tm-navy);
}

.founder-modern-tagline {
  margin: 0 0 14px;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 500;
  color: var(--tm-blue);
}

.founder-modern-bio {
  margin: 0 0 22px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--tm-ink);
}

.founder-modern-exp {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px clamp(18px, 3vw, 40px);
  border-radius: 18px;
  background: #dcecff;
}

.founder-modern-exp .bi-trophy {
  font-size: 3.2rem;
  line-height: 1;
  color: var(--tm-blue);
}

.founder-modern-exp strong {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tm-navy);
}

.founder-modern-exp span {
  font-size: 1.1rem;
  color: var(--tm-navy);
}

.founder-modern-social {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.founder-modern-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.founder-modern-social a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(10, 26, 107, 0.2);
  color: #fff;
}

.founder-modern-social .is-linkedin {
  background: #0a66c2;
}

.founder-modern-social .is-instagram {
  background: linear-gradient(45deg, #f9a03c 0%, #e1306c 50%, #833ab4 100%);
}

.founder-modern-social .is-facebook {
  background: #1877f2;
}

.founder-modern-social .is-youtube {
  background: #ff0000;
}

.founder-modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 2px solid var(--tm-blue);
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--tm-blue);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.founder-modern-btn:hover {
  background: var(--tm-blue);
  color: #fff;
}

@media (min-width: 768px) {
  .founder-modern-content .tm-checklist {
    margin-top: 8px;
  }
}

/* ---- founding team ---- */
.founding-team-script {
  flex: 0 0 auto;
  margin: 0;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.25;
  color: var(--tm-navy);
  transform: rotate(-4deg);
  position: relative;
  padding-bottom: 14px;
}

.founding-team-script::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tm-blue), var(--tm-blue-2));
  transform: rotate(-3deg);
}

.founding-team-card {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  height: 100%;
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--tm-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--tm-shadow);
}

.founding-team-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.founding-team-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
}

.founding-team-quote {
  flex: 1;
  margin: 0;
  padding: 10px 10px 10px;
  border-radius: 14px;
  background: var(--tm-soft-2);
  color: var(--tm-ink);
}

.founding-team-quote .bi-quote {
  display: block;
  font-size: 2.4rem;
  line-height: 0.8;
  color: var(--tm-blue);
}

.founding-team-quote p {
  margin: 4px 0 10px;
  font-size: 16px;
  line-height: 1.5;
}

.founding-team-quote p::after {
  content: "\201D";
}

.founding-team-quote cite {
  font-style: normal;
  font-weight: 500;
  color: var(--tm-blue);
}

.founding-team-body {
  min-width: 0;
}

.founding-team-name {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: var(--tm-navy);
}

.founding-team-role {
  position: relative;
  margin: 0 0 14px;
  padding-top: 12px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--tm-blue);
}

.founding-team-role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--tm-blue);
}

.founding-team-text {
  margin: 0 0 16px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #4a5a8c;
}

.founding-team-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.founding-team-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  /* font-weight: 500; */
  line-height: 1.35;
  color: var(--tm-navy);
  font-size: 15px;
}

.founding-team-points .tm-ico {
  width: 45px;
  height: 45px;
  font-size: 1.4rem;
}

.founding-team-note {
  margin: 16px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4a5a8c;
}

/* ---- expert team ---- */
.expert-team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.expert-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 20px;
  text-align: center;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--tm-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20, 60, 140, 0.13);
}

.expert-team-photo {
  width: 100%;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #eef2f8;
}

.expert-team-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 1.22 / 1; */
  object-fit: cover;
  object-position: center 18%;
}

.expert-team-name {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tm-navy);
}

.expert-team-role {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0b6bd6;
}

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
  .founding-team-card {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  }

  .expert-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .founder-modern-photo {
    max-width: 460px;
    margin-inline: auto;
  }

  .founder-modern-quote {
    left: 0;
  }

  .tm-dots {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .tm-head--split {
    flex-direction: column;
    gap: 14px;
  }

  .founding-team-script {
    align-self: flex-end;
  }

  .expert-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .founder-modern-exp {
    padding: 16px 20px;
  }
}

@media (max-width: 575.98px) {
  .founding-team-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .founding-team-media img {
    aspect-ratio: 4 / 3;
    object-position: center 20%;
  }

  .founder-modern-quote {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -36px 12px 0;
  }

  .founder-modern-photo {
    margin-bottom: 0;
  }

  .founder-modern-btn {
    width: 100%;
    justify-content: center;
  }

  .tm-eyebrow {
    letter-spacing: 0.08em;
    font-size: 0.8rem;
  }

  .expert-team-card {
    padding: 8px 8px 16px;
  }

  .expert-team-name {
    font-size: 1rem;
  }

  .expert-team-role {
    font-size: 0.72rem;
  }
}

@media (max-width: 359.98px) {
  .expert-team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.founder-modern-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.founder-modern-main,
.founder-modern-media {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .founder-modern-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.founder-modern-content .tm-heading {
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
}

.founder-modern-content .tm-heading span {
  white-space: nowrap;
}

.founder-modern-panel .tm-dots--tr {
  top: 14px;
  right: 18px;
}

.founder-modern-tagline {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.expert-team-section .tm-sub {
  max-width: 920px;
}

/* ============================================================
   START A PROJECT POPUP (#enquireModal on index.html)
   Reuses .contact-form-card for the panel so it matches the
   #contact "Send Us a Message" card exactly.
   ============================================================ */
/* The blog template (assets/css) drops .modal to z-index 9 and the backdrop
   to 8, under the sticky header (1040) — restore Bootstrap's stacking for
   this popup only so other modals keep their own. */
.sk-project-modal {
  z-index: 1065;
}

body:has(> .sk-project-modal.show)>.modal-backdrop {
  z-index: 1060;
}

.sk-project-modal .modal-dialog {
  max-width: 820px;
}

.sk-project-modal .modal-content.contact-form-card {
  position: relative;
  padding: 0;
  border-radius: 18px !important;
  background: var(--card-bg) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sk-project-modal .modal-body {
  padding: 40px !important;
}

.sk-project-modal .section-label {
  margin-bottom: 8px;
}

.sk-project-modal__title {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

.sk-project-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.sk-project-modal__close:hover,
.sk-project-modal__close:focus-visible {
  background: #2684E5;
  border-color: #2684E5;
  color: #fff;
  transform: rotate(90deg);
}

.sk-project-modal__close:focus-visible {
  outline: 2px solid #2684E5;
  outline-offset: 3px;
}

/* Smooth open/close: fade + gentle rise instead of Bootstrap's slide-down */
.sk-project-modal.fade .modal-dialog {
  transform: translateY(24px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sk-project-modal.show .modal-dialog {
  transform: none;
}

@media (max-width: 767px) {
  .sk-project-modal .modal-body {
    padding: 56px 20px 24px !important;
  }

  .sk-project-modal__close {
    top: 12px;
    right: 12px;
  }

  /* reCAPTCHA v2 is a fixed 304px wide — scale it down on narrow phones */
  .sk-project-modal .g-recaptcha {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sk-project-modal.fade .modal-dialog,
  .sk-project-modal__close {
    transition: none;
  }

  .sk-project-modal.fade .modal-dialog {
    transform: none;
  }

  .sk-project-modal__close:hover,
  .sk-project-modal__close:focus-visible {
    transform: none;
  }
}

/* ============================================================
   FOOTER — identical on every page (blog pages included)
   The blog pages load the old blog template (assets/css/style.css +
   Bootstrap 5.0 beta), which leaks into the shared footer: the browser's
   default list indent stays on .footer-links, the template's
   `.row:not([class*=gx-])` rule overrides the footer's g-5/g-4 gutters,
   and its fixed 26px body line-height replaces the site's 1.5. Pin the
   homepage values here so the footer renders the same everywhere.
   ============================================================ */
.sk-footer {
  line-height: 1.5;
}

.sk-footer .footer-links {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.sk-footer .footer-links li {
  margin-bottom: 4px;
}

/* Gutters as the site's own (customised) Bootstrap 5.3 resolves them on the
   homepage: columns padded by half the gutter on every side, g-5 keeps its
   3rem vertical gutter, the nested g-4 row has none. */
.sk-footer .row.g-5 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 1.5rem;
}

.sk-footer .row.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

/* phones: Industries | Resources sit side by side (footer.html col-6) —
   same gutter as the outer row so they line up with Company | Services */
@media (max-width: 575.98px) {
  .sk-footer .row.g-4 {
    --bs-gutter-x: 3rem;
  }
}

.sk-footer .row>* {
  padding-top: calc(var(--bs-gutter-x) * .25);
  padding-bottom: calc(var(--bs-gutter-x) * .25);
}

/* ============================================================
   FOOTER — DOWNLOAD BROCHURE (first column, under the socials)
   Form handled by js/newmain.js -> subscribe.php -> approve.php.
   Every property is pinned so the blog pages' legacy template
   (generic input / button / p rules) can't restyle it.
   ============================================================ */
.sk-footer .sk-brochure {
  margin-top: 18px;
  max-width: 380px;
}

.sk-footer .sk-brochure__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}

.sk-footer .sk-brochure__label i {
  color: var(--sk-accent, #2684E5);
  font-size: 1rem;
}

.sk-footer .sk-brochure__form {
  margin: 0;
}

.sk-footer .sk-brochure__row {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sk-footer .sk-brochure__row:focus-within {
  border-color: var(--sk-accent, #2684E5);
  box-shadow: 0 0 0 3px rgba(38, 132, 229, 0.18);
}

.sk-footer .sk-brochure__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: normal;
  outline: none;
}

.sk-footer .sk-brochure__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.sk-footer .sk-brochure__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0 2px 2px 0;
  background: var(--sk-accent, #2684E5);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sk-footer .sk-brochure__btn:hover,
.sk-footer .sk-brochure__btn:focus-visible {
  background: #fff;
  color: var(--sk-deep, #0a1c30);
}

.sk-footer .sk-brochure__btn[disabled] {
  opacity: 0.7;
  cursor: wait;
}

/* reCAPTCHA sits between the label and the field; rendered as the footer
   nears the viewport, so it is in place before anyone starts typing */
.sk-footer .sk-brochure__captcha:not(:empty) {
  margin-bottom: 12px;
  min-height: 78px;
}

.sk-footer .sk-brochure__msg {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #7ee2a8;
}

.sk-footer .sk-brochure__msg:empty {
  display: none;
}

.sk-footer .sk-brochure__msg.is-error {
  color: #ff9a9a;
}

/* ============================================================
   FOOTER — CONTACT STRIP (address, numbers, Appointment / Client
   Login — above Service Areas). Same boxed treatment as
   .footer-service-areas.
     desktop  : address | phone | phone | buttons (right-aligned)
     < 1200px : address full width, then phones + buttons
     < 768px  : phones side by side, buttons full width
     < 400px  : everything stacked
   ============================================================ */
.sk-footer .footer-contact-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px 36px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

/* the strip now opens the boxed area; Service Areas sits right under it */
.sk-footer .footer-contact-strip + .footer-service-areas {
  margin-top: 12px;
}

.sk-footer .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sk-footer .footer-contact-item--address {
  align-items: flex-start;
}

.sk-footer .footer-contact-item > i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  color: var(--sk-accent, #2684E5);
  font-size: 0.95rem;
}

.sk-footer .footer-contact-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}

.sk-footer .footer-contact-item address,
.sk-footer .footer-contact-item a {
  margin: 0;
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sk-footer .footer-contact-item--phone a {
  white-space: nowrap;
  overflow-wrap: normal;
}

.sk-footer .footer-contact-item a:hover,
.sk-footer .footer-contact-item a:focus-visible {
  color: #fff;
}

/* the header's buttons, a touch larger for the footer */
.sk-footer .footer-contact-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}

.sk-footer .footer-contact-actions .sk-topbar-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .sk-footer .footer-contact-strip {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .sk-footer .footer-contact-item--address {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .sk-footer .footer-contact-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 20px;
    padding: 16px;
  }

  .sk-footer .footer-service-areas {
    padding: 16px;
  }

  .sk-footer .footer-area-chips {
    gap: 8px;
  }

  .sk-footer .footer-contact-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .sk-footer .footer-contact-actions .sk-topbar-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 12px;
  }
}

@media (max-width: 399.98px) {
  .sk-footer .footer-contact-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   HOME — OUR WORK (#portfolio)
   Cards are links to the matching project on the Our Work pages.
   ============================================================ */
#portfolio a.portfolio-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

#portfolio a.portfolio-item:focus-visible {
  outline: 3px solid #2684E5;
  outline-offset: 3px;
}

/* project thumbnails are light website screenshots — keep the caption legible */
#portfolio .portfolio-overlay {
  background: linear-gradient(to top, rgba(7, 26, 46, 0.94) 0%, rgba(7, 26, 46, 0.6) 38%, rgba(7, 26, 46, 0.05) 75%);
}

#portfolio .portfolio-cat {
  color: #9fd0ff;
  line-height: 1.45;
}

#portfolio .portfolio-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 32px;
}

#portfolio .portfolio-more .btn-outline-custom {
  padding: 10px 18px;
  font-size: 0.85rem;
}

/* ============================================================
   HOME — INSIGHTS BLOG SEARCH (#insights) — js/newmain.js §9b
   ============================================================ */
#insights .insights-search {
  position: relative;
  max-width: 640px;
  margin: 0 0 14px;
}

#insights .insights-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #2684E5;
  font-size: 1rem;
  pointer-events: none;
}

#insights .insights-search__input {
  width: 100%;
  height: 54px;
  padding: 0 52px 0 48px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(7, 26, 46, 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

#insights .insights-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

#insights .insights-search__input::placeholder {
  color: var(--text3);
}

#insights .insights-search__input:focus {
  outline: none;
  border-color: #2684E5;
  box-shadow: 0 0 0 4px rgba(38, 132, 229, 0.12);
}

#insights .insights-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(38, 132, 229, 0.08);
  color: var(--text2);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

#insights .insights-search__clear[hidden] {
  display: none;
}

#insights .insights-search__clear:hover,
#insights .insights-search__clear:focus-visible {
  background: #2684E5;
  color: #fff;
}

#insights .insights-search-status {
  min-height: 1.4em;
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--text2);
}

#insights .insights-search-status:empty {
  margin-bottom: 8px;
}

#insights .insights-search-status a {
  color: #2684E5;
  font-weight: 600;
}

#insights .insights-results[hidden],
#insights .portfolio-filters[hidden],
#insights .news-grid[hidden],
#insights .insights-results-more[hidden] {
  display: none !important;
}

#insights a.insights-result {
  display: block;
  color: inherit;
  text-decoration: none;
}

#insights a.insights-result:focus-visible {
  outline: 3px solid #2684E5;
  outline-offset: 3px;
}

#insights .insights-result mark {
  padding: 0 2px;
  color: inherit;
  background: rgba(38, 132, 229, 0.18);
  border-radius: 3px;
}

#insights .insights-results-more {
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 575px) {
  #insights .insights-search__input {
    height: 50px;
    font-size: 16px;
    /* stops iOS zooming into the field */
  }
}

/* ============================================================
   HOME — VIDEO SECTION (#video): horizontal + vertical groups
   Videos keep their real shape: 16:9 cards in "Videos", 9:16 cards
   (YouTube Shorts, Instagram reels) in "Reels & Shorts".
   ============================================================ */
.sk-video .video-group[hidden] {
  display: none;
}

.sk-video .video-group+.video-group {
  margin-top: 44px;
}

.sk-video .video-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.sk-video .video-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sk-line, rgba(7, 26, 46, 0.1));
}

/* caption over the thumbnail */
/* .sk-video .video-thumb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 26, 46, 0.88) 0%, rgba(7, 26, 46, 0.25) 45%, transparent 70%);
  pointer-events: none;
} */

.sk-video .video-thumb-text {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.sk-video .video-thumb-text .video-thumb-label {
  position: static;
  font-size: 0.72rem;
  color: #9fd0ff;
}

.sk-video .video-thumb-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.sk-video .video-play-btn {
  z-index: 2;
}

/* vertical row */
.sk-video .video-reels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.sk-video .video-thumb-card--vertical {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
}

.sk-video .video-thumb-card--vertical .video-thumb-title {
  font-size: 0.9rem;
}

.sk-video .video-platform {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(7, 26, 46, 0.6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sk-video .video-platform .bi-youtube {
  color: #ff4e45;
}

/* Instagram reels have no public thumbnail — branded cover instead */
/* .sk-video .video-ig-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 26%;
  background:
    radial-gradient(circle at 30% 107%, rgba(253, 244, 151, 0.55) 0%, transparent 45%),
    linear-gradient(160deg, #515bd4 0%, #8134af 35%, #dd2a7b 70%, #f58529 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 2.6rem;
} */

@media (max-width: 991.98px) {
  .sk-video .video-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .sk-video .video-reels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sk-video .video-thumb-text {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }

  .sk-video .video-thumb-card--vertical .video-play-btn {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }
}

/* ============================================================
   HOME — INSIGHTS: one sliding row of real blog posts (links)
   The row scrolls sideways (arrows / swipe / keyboard); a tab
   filters which posts are in it (js/newmain.js §9).
   ============================================================ */
/* filtered-out cards — must beat every display rule below */
#insights .news-card.is-hidden {
  display: none !important;
}

#insights a.news-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

#insights a.news-card:focus-visible {
  outline: 3px solid #2684E5;
  outline-offset: 3px;
}

#insights .news-title,
#insights .news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#insights .insights-carousel {
  position: relative;
}

#insights .insights-carousel[hidden] {
  display: none !important;
}

#insights .insights-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* room for the card hover lift + shadow, which overflow would clip */
  padding: 10px 2px 26px;
  margin: -10px -2px -26px;
  scrollbar-width: none;
}

#insights .insights-track::-webkit-scrollbar {
  display: none;
}

#insights .insights-track:focus-visible {
  outline: 2px dashed rgba(38, 132, 229, 0.5);
  outline-offset: 4px;
}

/* 3 cards in view on desktop, 2 on tablets, ~1 on phones */
#insights .insights-track>.news-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

#insights .insights-nav {
  position: absolute;
  z-index: 3;
  top: 28%;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #044a9e;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(38, 132, 229, 0.35);
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s, background-color 0.25s;
}

#insights .insights-nav--prev {
  left: -24px;
}

#insights .insights-nav--next {
  right: -24px;
}

#insights .insights-nav:hover,
#insights .insights-nav:focus-visible {
  background: #044a9e;
  transform: scale(1.06);
}

#insights .insights-nav:focus-visible {
  outline: 3px solid rgba(38, 132, 229, 0.4);
  outline-offset: 3px;
}

/* nothing more that way — hide the arrow */
#insights .insights-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* search results keep a normal grid */
#insights .insights-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1399.98px) {
  #insights .insights-nav--prev {
    left: -12px;
  }

  #insights .insights-nav--next {
    right: -12px;
  }
}

@media (max-width: 991.98px) {
  #insights .insights-track>.news-card {
    flex-basis: calc((100% - 24px) / 2);
  }

  #insights .insights-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #insights .insights-nav {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 575.98px) {
  #insights .insights-track {
    gap: 16px;
  }

  /* a peek of the next card hints that the row scrolls */
  #insights .insights-track>.news-card {
    flex-basis: 86%;
  }

  #insights .insights-results {
    grid-template-columns: minmax(0, 1fr);
  }

  #insights .insights-nav--prev {
    left: -6px;
  }

  #insights .insights-nav--next {
    right: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #insights .insights-nav {
    transition: none;
  }
}


/* ============================================================
   HOME #contact — Contact Information card
   Flex column so the "Talk to us right now" panel (margin-top:auto
   + flex-grow) absorbs whatever height the form card leaves, so the
   card never ends in empty white space.
   ============================================================ */
.sk-contact-info {
  display: flex;
  flex-direction: column;
}

.sk-contact-info .contact-item {
  padding: 13px 0;
}

.sk-contact-info .contact-item p+p {
  margin-top: 2px;
}

.sk-contact-info .contact-item a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sk-contact-info .contact-item a:hover {
  color: var(--accent);
}

.sk-contact-info .sk-ci-strong {
  font-weight: 700;
}

.sk-contact-info .sk-ci-muted {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text2, var(--text3));
  line-height: 1.55;
}

.sk-ci-phones {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sk-ci-phones li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
  padding: 3px 0;
  font-size: 0.93rem;
}

.sk-ci-phones span {
  font-size: 0.8rem;
  color: var(--text3);
}

.sk-ci-phones a {
  font-weight: 600;
  white-space: nowrap;
}

.sk-ci-follow {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sk-ci-follow-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: 10px;
}

.sk-contact-info .sk-ci-follow .footer-social {
  color: var(--text3);
  border-color: var(--border);
}

.sk-contact-info .sk-ci-follow .footer-social:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Instant-connect panel */
.sk-ci-instant {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  color: #fff;
  /* background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18) 0, transparent 55%),
    linear-gradient(140deg, #2684e5 0%, #044a9e 100%); */
  background: #044a9e;
  box-shadow: 0 14px 30px -14px rgba(4, 74, 158, 0.55);
}

/* soft concentric "signal" rings in the corner */
.sk-ci-instant::before,
.sk-ci-instant::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.sk-ci-instant::after {
  top: -95px;
  right: -95px;
  width: 230px;
  height: 230px;
  border-color: rgba(255, 255, 255, 0.1);
}

.sk-ci-instant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
}

.sk-ci-pulse {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3ddc84;
}

.sk-ci-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3ddc84;
  animation: skCiPulse 1.8s ease-out infinite;
}

@keyframes skCiPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.sk-ci-instant-sub {
  margin: 6px 0 14px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
}

.sk-ci-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sk-ci-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sk-ci-action i {
  font-size: 1.15rem;
}

.sk-ci-action:hover,
.sk-ci-action:focus-visible {
  color: #044a9e;
  background: #fff;
  transform: translateY(-2px);
}

.sk-ci-action--wa:hover,
.sk-ci-action--wa:focus-visible {
  color: #128c4b;
}

@media (prefers-reduced-motion: reduce) {
  .sk-ci-pulse::after {
    animation: none;
  }

  .sk-ci-action {
    transition: none;
  }

  .sk-ci-action:hover,
  .sk-ci-action:focus-visible {
    transform: none;
  }
}

.sk-ci-instant-icon {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   UNIFORM SECTION SPACING
   Every <section> on every page gets exactly 30px top and bottom padding at
   all screen sizes. !important is deliberate: it overrides the page-specific
   section padding rules, their media queries and inline style attributes.
   Horizontal padding is untouched.
   ========================================================================== */
section {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* ==========================================================================
   30.  PROCESS & FLOW MOTION  (works with js/premium.js §14)
   One short sequence per process / flow section, played the first time it
   scrolls into view (.pf-in). Each family has its own pattern. Animations
   use fill-mode "backwards" only, so once they finish every element falls
   back to its own styles and existing hover effects keep working.
   --pf-i = position in the sequence, --pf-j = position inside a column,
   --pf-n = number of items. .pf--v = the flow is stacked vertically.
   ========================================================================== */
.pf {
  --pf-step: 140ms;
  --pf-glow: rgba(38, 132, 229, 0.45);
}

/* hidden until the section plays */
.pf:not(.pf-in) .pf-link,
.pf--steps:not(.pf-in) .pf-icon,
.pf--steps:not(.pf-in) .pf-txt,
.pf--line:not(.pf-in) .pf-icon,
.pf--line:not(.pf-in) .pf-txt,
.pf--chain:not(.pf-in) > .pf-item,
.pf--branch:not(.pf-in) .pf-box,
.pf--route:not(.pf-in) > .pf-item,
.pf--rail:not(.pf-in) > .pf-item,
.pf--cards:not(.pf-in) > .pf-item {
  opacity: 0;
}

.pf--route:not(.pf-in)::before,
.pf--line:not(.pf-in)::before {
  transform: scaleX(0);
}

.pf--rail:not(.pf-in)::before,
.pf--line.pf--v:not(.pf-in)::before {
  transform: scaleY(0);
}

/* ---- keyframes ---------------------------------------------------------- */
@keyframes pf-pop {
  0% { opacity: 0; transform: scale(0.55); }
  65% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pf-ring {
  0% { box-shadow: 0 0 0 0 var(--pf-glow); }
  100% { box-shadow: 0 0 0 16px rgba(38, 132, 229, 0); }
}

@keyframes pf-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-slide-x {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-travel-x {
  from { opacity: 0; transform: translateX(-20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-travel-y {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-draw-x {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes pf-draw-y {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes pf-land {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--pf-glow); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(38, 132, 229, 0); }
}

@keyframes pf-fan {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pf-grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes pf-card {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes pf-flip {
  from { opacity: 0; transform: perspective(300px) rotateX(90deg); }
  to { opacity: 1; transform: none; }
}

/* ---- steps: numbered process rows (reference: branding / SEO / video ...) */
.pf--steps.pf-in .pf-icon {
  animation:
    pf-pop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) backwards,
    pf-ring 1s ease-out backwards;
  animation-delay:
    calc(var(--pf-i) * var(--pf-step)),
    calc(var(--pf-i) * var(--pf-step) + 280ms);
}

.pf--steps.pf-in .pf-txt {
  animation: pf-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * var(--pf-step) + 160ms);
}

.pf--steps.pf-in .pf-link {
  animation: pf-slide-x 0.45s ease-out backwards;
  animation-delay: calc(var(--pf-i) * var(--pf-step) + 220ms);
}

/* ---- chain: node -> node -> result (reference: ecosystem strips) --------- */
.pf--chain {
  --pf-step: 120ms;
}

.pf--chain.pf-in > .pf-item {
  animation: pf-travel-x 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * var(--pf-step) * 2);
}

.pf--chain.pf-in > .pf-link {
  animation: pf-draw-x 0.35s ease-out backwards;
  animation-delay: calc(var(--pf-i) * var(--pf-step) * 2 + 140ms);
}

.pf--chain.pf--v.pf-in > .pf-item {
  animation-name: pf-travel-y;
}

.pf--chain.pf--v.pf-in > .pf-link {
  animation-name: pf-draw-y;
}

/* the result node lands last */
.pf--chain.pf-in > .pf-item--last {
  animation:
    pf-travel-x 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    pf-land 0.9s ease-out backwards;
  animation-delay:
    calc(var(--pf-i) * var(--pf-step) * 2),
    calc(var(--pf-i) * var(--pf-step) * 2 + 420ms);
}

.pf--chain.pf--v.pf-in > .pf-item--last {
  animation-name: pf-travel-y, pf-land;
}

/* a result pill placed just after the chain closes it */
.pf--chain:not(.pf-in) + .pf-result {
  opacity: 0;
}

.pf--chain.pf-in + .pf-result {
  animation:
    pf-travel-x 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    pf-land 0.9s ease-out backwards;
  animation-delay:
    calc(var(--pf-n) * var(--pf-step, 120ms) * 2),
    calc(var(--pf-n) * var(--pf-step, 120ms) * 2 + 420ms);
}

/* ---- branch: columns open in turn, boxes fan out (Digital Marketing) ---- */
.pf--branch.pf-in .pf-box {
  animation: pf-fan 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * 220ms + var(--pf-j, 0) * 80ms);
}

.pf--branch.pf-in > .pf-link {
  animation: pf-draw-x 0.35s ease-out backwards;
  animation-delay: calc(var(--pf-i) * 220ms + 160ms);
}

.pf--branch.pf--v.pf-in > .pf-link {
  animation-name: pf-draw-y;
}

.pf--branch.pf-in > .pf-item--last .pf-box:last-child {
  animation:
    pf-fan 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    pf-land 0.9s ease-out backwards;
  animation-delay:
    calc(var(--pf-i) * 220ms + var(--pf-j, 0) * 80ms),
    calc(var(--pf-i) * 220ms + var(--pf-j, 0) * 80ms + 400ms);
}

/* ---- route: dashed line draws, stops pop as it reaches them (Company Profile) */
.pf--route.pf-in::before {
  transform-origin: left center;
  animation: pf-grow-x 1.1s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.pf--route.pf-in > .pf-item {
  animation: pf-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  animation-delay: calc(var(--pf-i) * 1100ms / max(var(--pf-n) - 1, 1));
}

.pf--route.pf-in > .pf-item--last > :first-child {
  animation: pf-ring 1.1s ease-out backwards;
  animation-delay: 1250ms;
}

/* ---- rail: vertical timeline draws down, items slide in ------------------ */
.pf--rail.pf-in::before {
  transform-origin: center top;
  animation: pf-grow-y calc(var(--pf-n) * 110ms + 300ms) cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.pf--rail.pf-in > .pf-item {
  animation: pf-slide-x 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * 110ms + 80ms);
}

/* ---- line: progress line fills, icons light up (Digital Marketing example) */
.pf--line.pf-in::before {
  transform-origin: left center;
  animation: pf-grow-x calc(var(--pf-n) * var(--pf-step)) linear backwards;
}

.pf--line.pf--v.pf-in::before {
  transform-origin: center top;
  animation-name: pf-grow-y;
}

.pf--line.pf-in .pf-icon {
  animation:
    pf-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards,
    pf-ring 0.9s ease-out backwards;
  animation-delay:
    calc(var(--pf-i) * var(--pf-step)),
    calc(var(--pf-i) * var(--pf-step) + 220ms);
}

.pf--line.pf-in .pf-txt {
  animation: pf-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * var(--pf-step) + 140ms);
}

/* ---- cards: step cards rise in a wave, numbers flip in (Our Work) ------- */
.pf--cards.pf-in > .pf-item {
  animation: pf-card 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * 90ms);
}

.pf--cards.pf-in .pf-num {
  animation: pf-flip 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--pf-i) * 90ms + 260ms);
}

/* reduced motion, and print (a page is never scrolled when printed):
   every section shows statically */
@media print, (prefers-reduced-motion: reduce) {
  .pf-item,
  .pf-icon,
  .pf-txt,
  .pf-link,
  .pf-box,
  .pf-num,
  .pf-result,
  .pf--route::before,
  .pf--rail::before,
  .pf--line::before {
    animation: none !important;
    opacity: 1 !important;
  }

  .pf--route::before,
  .pf--rail::before,
  .pf--line::before {
    transform: none !important;
  }
}

/* ============================================================================
   BLOG POSTS — SYNCHRONISED TWO-COLUMN SCROLL  (desktop/laptop, ≥992px)
   ----------------------------------------------------------------------------
   The 60 blog posts share .blog-layout-container > main.blog-main-col +
   aside.blog-sidebar (layout itself is in each post's inline <style>).
   js/newmain.js ("BLOG POSTS — SYNCHRONISED TWO-COLUMN SCROLL") adds
   .is-scroll-synced to the container only on ≥992px screens, so with JS off,
   on tablet/mobile, and on every other page none of this applies.
   Both columns become viewport-tall scroll panes docked under the sticky
   #mainNav (--blog-sync-top is its measured height); the page itself still
   scrolls normally above (breadcrumb) and below (footer) the layout.
   ============================================================================ */
@media screen and (min-width: 992px) {
  .blog-layout-container.is-scroll-synced {
    --blog-scroll-thumb: #044a9e;
    --blog-scroll-track: rgba(4, 74, 158, 0.08);
    --blog-sync-gap: 16px;
  }

  .blog-layout-container.is-scroll-synced > .blog-main-col,
  .blog-layout-container.is-scroll-synced > .blog-sidebar {
    position: sticky;
    top: calc(var(--blog-sync-top, 76px) + var(--blog-sync-gap));
    max-height: calc(100vh - var(--blog-sync-top, 76px) - 2 * var(--blog-sync-gap));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--blog-scroll-thumb) var(--blog-scroll-track);
    /* room so card shadows are not clipped by the pane; the negative margin
       keeps the cards exactly where they were */
    margin: -6px -10px 0;
    padding: 6px 10px 18px;
  }

  .blog-layout-container.is-scroll-synced > .blog-main-col::-webkit-scrollbar,
  .blog-layout-container.is-scroll-synced > .blog-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .blog-layout-container.is-scroll-synced > .blog-main-col::-webkit-scrollbar-track,
  .blog-layout-container.is-scroll-synced > .blog-sidebar::-webkit-scrollbar-track {
    background: var(--blog-scroll-track);
    border-radius: 6px;
  }

  .blog-layout-container.is-scroll-synced > .blog-main-col::-webkit-scrollbar-thumb,
  .blog-layout-container.is-scroll-synced > .blog-sidebar::-webkit-scrollbar-thumb {
    background: var(--blog-scroll-thumb);
    border-radius: 6px;
  }

  /* the sidebar pane now does the "stay in view" job of the old sticky inner */
  .blog-layout-container.is-scroll-synced .sidebar-sticky {
    position: static;
  }
}

/* ============================================================================
   INLINE YOUTUBE PLAYER  (js/newmain.js §7b)
   ----------------------------------------------------------------------------
   [data-yt-embed="<id>"] is any positioned poster box (video-content.html
   intro, video-projects.html .vp-player). Clicking it appends
   iframe.sk-yt-frame on top and adds .is-playing.
   ============================================================================ */
[data-yt-embed] {
  cursor: pointer;
}

[data-yt-embed].is-playing {
  cursor: auto;
  background: #000;
}

[data-yt-embed] button.vp-play,
[data-yt-embed] button.video-content-play__btn {
  border: 0;
  padding: 0;
  cursor: pointer;
}

[data-yt-embed] button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.sk-yt-frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* the poster's hover zoom / overlay stop once the real player is up */
[data-yt-embed].is-playing::before,
[data-yt-embed].is-playing .vp-play,
[data-yt-embed].is-playing .vp-player__badge,
[data-yt-embed].is-playing .video-content-play {
  display: none;
}