/*
 * Shared stylesheet for the new placeholder info pages: Services, Capabilities,
 * Compliance & Certifications. Project-owned; does not touch legacy Elementor
 * CSS/JS. Reuses the same visual language as public/css/product-catalog.css
 * and public/css/about-team.css (green accent #4d7e3e, kzp-* class prefix).
 */

:root {
  /* Shared vertical rhythm between major Home page sections -- one value
     so every section boundary reads with the same amount of breathing
     room, rather than each section carrying its own ad-hoc padding/margin.
     Responsive via clamp() (scales with viewport width, 20px floor at
     mobile up to 36px ceiling at desktop) rather than one fixed pixel
     value everywhere, since a desktop-tuned gap reads as oversized on
     small screens.

     Revised down from an earlier 88px: since this value is applied as
     BOTH the previous section's bottom padding AND the next section's
     top padding, two adjacent 88px paddings stacked into a ~176-326px
     combined visual gap between content -- clearly excessive. 36px per
     side (desktop) combines to a ~70-90px visual gap, which is enough to
     read as a new section without the empty-looking dead space the 88px
     value produced. Hero is deliberately NOT driven by this variable --
     its 64px padding is tuned to an earlier fixed-viewport-height
     constraint, unrelated to this section-to-section rhythm. */
  --kzp-section-gap: clamp(20px, 4vw, 36px);
}

.kzp-info-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px 20px;
}

.kzp-info-hero__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4d7e3e;
  margin: 0 0 10px;
}

.kzp-info-hero h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 12px;
}

.kzp-info-hero p {
  font-size: 15px;
  color: #6b7268;
  max-width: 700px;
  margin: 0;
}

.kzp-info-hero__heading {
  font-size: 28px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 12px;
}

/* Used where this block sits standalone between two unrelated sections
   (e.g. the Home page) rather than atop a left-aligned content grid. */
.kzp-info-hero--centered {
  text-align: center;
}
.kzp-info-hero--centered p {
  margin: 0 auto;
}

.kzp-info-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--kzp-section-gap) 20px;
}

/* Shared spacing hook for the plain Elementor sections (Tile Row, Welcome/
   Who We Are banner, Why Choose Us x3, Client Logos, Map) that previously
   had 0px of their own padding and relied on a small (30-40px) Elementor
   theme default margin -- overridden here with !important since the
   Astra/Elementor vendor CSS this competes with can't be edited directly,
   and normalized from margin to padding so the gap is consistent and
   predictable regardless of adjacent sections' own margins. */
.kzp-section-pad {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--kzp-section-gap) !important;
  padding-bottom: var(--kzp-section-gap) !important;
}

/* Top/bottom-only variants for a composite block made of several adjacent
   Elementor <section>s that together read as ONE section (Why Choose Us is
   3 sibling sections: heading+divider, then two rows of icon cards) -- only
   the outer edges of the whole block need the bigger gap; giving every
   sub-section its own full top+bottom padding would blow up the internal
   spacing between the heading and its own icon rows. */
.kzp-section-pad-top {
  margin-top: 0 !important;
  padding-top: var(--kzp-section-gap) !important;
}
.kzp-section-pad-bottom {
  margin-bottom: 0 !important;
  padding-bottom: var(--kzp-section-gap) !important;
}

/* The directional slide-in animation on the services cards (left/right
   translateX) would otherwise poke past the viewport edge before/during
   reveal, creating real horizontal page scroll — contained here the same
   way the logo marquee already contains its own horizontal transforms. */
#homeservicespreview {
  overflow-x: hidden;
}

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

@media (max-width: 768px) {
  .kzp-info-grid { grid-template-columns: 1fr; }
}

/* Capabilities — "Quality Assurance" card, expanded with a checklist.
   Given the extra content it sits full-width below the grid (and above the
   trailing "Lead Time Management" card) rather than forcing it into a
   same-size grid cell as the other 4 cards. Padding matches .kzp-info-card
   exactly (not a wider 32px) so the photo-bleed treatment below can use the
   same -24px offset on every card in this section, and so the card reads
   consistent with the rest of the grid per the site's shared card styling. */
.kzp-info-card--full {
  margin-top: 24px;
  padding: 28px 24px;
}

.kzp-qa-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e5df;
}

.kzp-qa-detail__heading {
  font-size: 16px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 8px;
}

.kzp-qa-detail__intro {
  font-size: 13.5px;
  color: #6b7268;
  max-width: 800px;
  margin: 0 0 16px;
}

.kzp-qa-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
}

.kzp-qa-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: #3a3d38;
}

.kzp-qa-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4d7e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 576px) {
  .kzp-qa-checklist { grid-template-columns: 1fr; }
}

.kzp-info-card {
  min-width: 0;
  border: 1px solid #e2e5df;
  border-radius: 8px;
  padding: 28px 24px;
  background: #fff;
}

/* Home page's services preview cards get a real photo up top instead of
   relying on the numbered badge alone — bleeds to the card's own edges.
   ROOT CAUSE of the earlier broken layout: .elementor img (loaded from the
   vendor Elementor frontend.min.css) sets `height:auto` with a selector
   (.elementor img — 1 class + 1 element) that is MORE specific than a bare
   `.kzp-service-card__photo` (1 class alone), so it silently won and forced
   every photo back to its own natural aspect ratio — producing a different
   rendered height per card (their source images all differ in aspect
   ratio), which is what pushed the numbered badge to a different vertical
   position on every card. Scoping the override under the #homeservicespreview
   id (below) raises its specificity above the vendor rule so the fixed
   160px crop actually applies. */
#homeservicespreview .kzp-info-card {
  padding-top: 0;
  overflow: hidden;
}

#homeservicespreview .kzp-service-card__photo {
  display: block;
  width: calc(100% + 48px);
  margin: 0 -24px 0;
  height: 160px;
  object-fit: cover;
}

/* Badge overlaps the photo's bottom-left corner — same treatment on every
   card, regardless of photo content, so the grid reads uniformly. */
#homeservicespreview .kzp-info-card__icon {
  position: relative;
  margin: -24px 0 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Services page — same photo-card treatment as Home's services preview
   above (#homeservicespreview), reused here under its own id so the live
   /services page's 7 cards match the Home page's 6-card design exactly:
   photo bleeds to the card edges, numbered badge overlaps its bottom-left
   corner. Needs its own id (not just a class) for the same specificity
   reason documented above -- this page also loads the vendor Elementor
   frontend.min.css, whose `.elementor img { height:auto }` rule would
   otherwise win over a plain class selector. */
#servicespagegrid .kzp-info-card {
  padding-top: 0;
  overflow: hidden;
}

#servicespagegrid .kzp-service-card__photo {
  display: block;
  width: calc(100% + 48px);
  margin: 0 -24px 0;
  height: 160px;
  object-fit: cover;
}

#servicespagegrid .kzp-info-card__icon {
  position: relative;
  margin: -24px 0 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Capabilities page — same photo-card treatment as Services/Home above,
   scoped to the whole #capabilitiespagegrid section (not just one
   .kzp-info-grid) since this page's 5 cards span two separate grids plus
   the full-width Quality Assurance card sitting between them; the id needs
   to cover all three so every card gets the identical photo bleed. Same
   specificity reason as documented above — this page also loads the
   vendor Elementor frontend.min.css. */
#capabilitiespagegrid .kzp-info-card {
  padding-top: 0;
  overflow: hidden;
}

#capabilitiespagegrid .kzp-service-card__photo {
  display: block;
  width: calc(100% + 48px);
  margin: 0 -24px 0;
  height: 160px;
  object-fit: cover;
}

#capabilitiespagegrid .kzp-info-card__icon {
  position: relative;
  margin: -24px 0 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.kzp-info-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef3ea;
  color: #4d7e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}

/* Supply Chain — badge wraps a real process-icon <img> (or a font icon)
   instead of a number/letter, so it needs its own inner sizing rather than
   relying on the badge's own font-size. */
.kzp-info-card__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.kzp-info-card__icon i {
  font-size: 20px;
  line-height: 1;
}

/* Supply Chain — the mid-page "WE MANAGE ALL VITAL ASPECTS..." statement,
   previously a plain <h1> sitting bare between two icon grids. Styled as a
   distinct full-width callout band so it reads as a deliberate pull-quote
   rather than a second, competing page title (the page's real <h1> is now
   the hero heading above). */
.kzp-supply-callout {
  background: #eef3ea;
  padding: var(--kzp-section-gap) 20px;
}

.kzp-supply-callout__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.kzp-supply-callout__heading {
  font-size: 22px;
  font-weight: 700;
  color: #1c1f1a;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 768px) {
  .kzp-supply-callout__heading {
    font-size: 18px;
  }
}

.kzp-info-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1c1f1a;
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.kzp-info-card p {
  font-size: 13.5px;
  color: #6b7268;
  margin: 0;
}

.kzp-info-note {
  font-size: 13px;
  color: #9a9f95;
  font-style: italic;
  margin: 24px 0 0;
}

/* Compliance & Certifications grid */
.kzp-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .kzp-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kzp-cert-card {
  min-width: 0;
  text-align: center;
  border: 1px solid #e2e5df;
  border-radius: 8px;
  padding: 24px 16px;
  background: #fff;
}

.kzp-cert-card__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #4d7e3e;
  color: #4d7e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 auto 14px;
}

/* Nested inside the "Certifications" info-card (narrower column, so use a
   tighter 2-up layout and smaller badges instead of the full-width 4-up grid) */
.kzp-info-card .kzp-cert-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.kzp-info-card .kzp-cert-card {
  padding: 14px 8px;
}

.kzp-info-card .kzp-cert-card__badge {
  width: 36px;
  height: 36px;
  font-size: 14px;
  margin: 0 auto 8px;
}

.kzp-info-card .kzp-cert-card span {
  font-size: 11.5px;
}

.kzp-cert-card span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1c1f1a;
  overflow-wrap: break-word;
}

/* Home page — content row is back down to 3 tiles (About Us / Products /
   Supply Chain) now that Contact Us and Our Team were removed (Our Team
   moved to its own dedicated preview section further down the page). Scoped
   to this specific section (.kzp-tile-row) rather than the shared
   .elementor-col-25 class, which the footer's 4-column contact block also
   uses on every page — an unscoped override would have broken that too. */
@media (min-width: 769px) {
  .kzp-tile-row .elementor-container {
    display: flex;
    flex-wrap: wrap;
  }
  .kzp-tile-row .elementor-column {
    width: 33.333%;
  }
}

@media (max-width: 768px) {
  /* Exactly 3 tiles doesn't wrap cleanly at 2-per-row (a lone third tile
     stretching or floating alone) -- stack to 1-per-row instead. */
  .kzp-tile-row .elementor-column {
    width: 100%;
  }
}

/* Home page — the 5 photo-background section tiles (About Us / Products /
   Supply Chain / Welcome / Who We Are). Their heading text is hardcoded to
   plain white (#FFFFFF) in the legacy generated Elementor CSS with no
   overlay, which reads fine on a dark photo but disappears against a
   light one. A dark gradient scrim + text-shadow here guarantees the
   white heading stays readable regardless of how bright the tile's own
   background photo is -- applied uniformly to all 5 tiles rather than
   only the previously-broken "Who We Are" one, since the other 4 were
   only "readable enough" by luck of their specific photo's tone, not by
   any deliberate contrast guarantee. */
.kzp-tile-bg {
  position: relative;
}

.kzp-tile-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
  z-index: 0;
}

.kzp-tile-bg > * {
  position: relative;
  z-index: 1;
}

.kzp-tile-bg .elementor-heading-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
}

/* Home page — Services preview section (reuses .kzp-info-grid/.kzp-info-card
   from the live Services page, plus a "View All Services" CTA button). */
.kzp-services-preview__cta {
  text-align: center;
  margin-top: 12px;
}

.kzp-services-preview__btn {
  display: inline-block;
  padding: 13px 32px;
  background: #4d7e3e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s ease;
}

.kzp-services-preview__btn:hover {
  background: #3d6431;
  color: #fff;
}

/* Home page — Our Team preview section (reuses .kzp-team__grid/.kzp-team__card
   from the dedicated Our Team page's about-team.css, plus a "Meet the Full
   Team" CTA styled identically to the Services preview's button). Full-bleed
   background + inner max-width wrapper, the same pattern .kzp-process
   already uses, so the pale green tint reads as a clear section band across
   the whole viewport rather than a contained box floating on white. */
.kzp-team-preview {
  background: #f4f7f2;
  padding: var(--kzp-section-gap) 0;
  text-align: center;
}

.kzp-team-preview__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.kzp-team-preview__cta {
  text-align: center;
  margin-top: 12px;
}

.kzp-team-preview__btn {
  display: inline-block;
  padding: 13px 32px;
  background: #4d7e3e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s ease;
}

.kzp-team-preview__btn:hover {
  background: #3d6431;
  color: #fff;
}

/* Contact Us — small label above the form, added alongside the existing
   marketing tagline heading to make the inquiry/quote dual-purpose clear */
.kzp-form-intro {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4d7e3e;
  margin: 0 0 16px;
}

/* "Our Process" step flow (Home page) */
.kzp-process {
  background: #f9faf8;
  padding: var(--kzp-section-gap) 0;
}

.kzp-process__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.kzp-process__heading {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 36px;
}

/* ---- two-up layout: banner (left) + carousel (right) ---- */
.kzp-process__layout {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.kzp-process__banner {
  flex: 0 0 38%;
  max-width: 38%;
  min-height: 380px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.kzp-process__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  animation: kzProcessKenBurns 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}

/* JS toggles this while the banner is in view — the zoom is a continuous,
   scroll-linked effect (plays/pauses with visibility), deliberately kept
   separate from the one-time .kzp-reveal-in entrance below. */
.kzp-process__banner.kzp-banner-playing .kzp-process__banner-img {
  animation-play-state: running;
}

@keyframes kzProcessKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

/* ---- carousel ---- */
.kzp-process__carousel-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kzp-process__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 4px 4px 10px;
}
.kzp-process__track::-webkit-scrollbar { display: none; }
.kzp-process__track.kzp-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.kzp-process-card {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e2e5df;
  border-radius: 10px;
  padding: 22px 20px;
  text-align: left;
}

.kzp-process-step__badge {
  width: 40px;
  height: 40px;
  margin: 0 0 14px;
  border-radius: 50%;
  background: #4d7e3e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.kzp-process-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1c1f1a;
  margin: 0 0 6px;
  overflow-wrap: break-word;
}

.kzp-process-card p {
  font-size: 13px;
  color: #6b7268;
  margin: 0;
}

.kzp-process__arrow {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e2e5df;
  background: #fff;
  color: #4d7e3e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.kzp-process__arrow:hover {
  background: #4d7e3e;
  color: #fff;
}

/* ---- progress dots ---- */
.kzp-process__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.kzp-process__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d7ddd1;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.kzp-process__dot.kzp-dot-active {
  background: #4d7e3e;
  transform: scale(1.35);
}

@media (max-width: 900px) {
  .kzp-process__layout { flex-direction: column; }
  .kzp-process__banner { flex: 0 0 auto; max-width: 100%; width: 100%; min-height: 220px; }
}

@media (max-width: 560px) {
  .kzp-process-card { width: 78vw; }
  .kzp-process__arrow { width: 32px; height: 32px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .kzp-process__banner-img {
    animation: none !important;
    transform: none !important;
  }
  .kzp-process__track {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------------
   Scroll-triggered reveal animations (public/js/kz-scroll-reveal.js drives
   *when* [data-reveal-item] gets the .kzp-reveal-in class; the two motion
   styles below are scoped per-section so "Our Process" and "Our Services"
   read as visually distinct, per design request).
   ------------------------------------------------------------------------ */

/* Our Process — single container reveal: fade + slight scale-up. The
   carousel/banner layout reveals as one cohesive unit rather than staggering
   each card (per-item staggering read awkwardly once the steps became a
   horizontally-scrolling strip instead of a static grid). */
#ourprocess [data-reveal-item] {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .6s ease, transform .6s ease;
}
#ourprocess [data-reveal-item].kzp-reveal-in {
  opacity: 1;
  transform: scale(1);
}

/* Our Services — directional entrance by column position: left column
   slides in from the left, right column from the right, middle column
   rises from below (a variation on Our Process's vertical style). Visually
   distinct from Our Process's fade-up-stagger above. */
#homeservicespreview [data-reveal-item] {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
#homeservicespreview [data-reveal-item][data-reveal-dir="left"] {
  transform: translateX(-60px);
}
#homeservicespreview [data-reveal-item][data-reveal-dir="right"] {
  transform: translateX(60px);
}
#homeservicespreview [data-reveal-item][data-reveal-dir="up"] {
  transform: translateY(40px);
}
#homeservicespreview [data-reveal-item].kzp-reveal-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* Meet Our Team — subtle 3D "flip-in": each card starts rotated on its Y
   axis and slightly scaled down, then settles flat. Distinct motion
   signature from both Our Process (flat fade + scale, single container)
   and Our Services (flat directional slide by column) above it. */
#hometeampreview [data-reveal-item] {
  opacity: 0;
  transform: perspective(800px) rotateY(-18deg) scale(.92);
  transition: opacity .6s ease, transform .6s ease;
}
#hometeampreview [data-reveal-item].kzp-reveal-in {
  opacity: 1;
  transform: perspective(800px) rotateY(0deg) scale(1);
}

/* Supply Chain — same directional-by-column treatment as Our Services
   above, reused (not duplicated) via the shared .kzp-supply-row class so
   each of the page's 4 process-card rows can be observed and staggered
   independently by kzInitScrollReveal() as it scrolls into view, rather
   than all 12 cards firing together on page load. A longer stagger than
   Home's (200ms vs 150ms) per the client's request for a more visible
   sequence. */
.kzp-supply-row [data-reveal-item] {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.kzp-supply-row [data-reveal-item][data-reveal-dir="left"] {
  transform: translateX(-60px);
}
.kzp-supply-row [data-reveal-item][data-reveal-dir="right"] {
  transform: translateX(60px);
}
.kzp-supply-row [data-reveal-item][data-reveal-dir="up"] {
  transform: translateY(40px);
}
.kzp-supply-row [data-reveal-item].kzp-reveal-in {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  #ourprocess [data-reveal-item],
  #homeservicespreview [data-reveal-item],
  #hometeampreview [data-reveal-item],
  .kzp-supply-row [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Supply Chain — each of the 4 process-card rows is now its own
   .kzp-info-grid instance (rather than one continuous grid) so
   kzInitScrollReveal() can observe/stagger them independently; this
   margin reproduces the row-to-row gap the old single continuous grid's
   `gap` used to provide between wrapped rows. */
.kzp-supply-row {
  margin-top: 24px;
  /* Same fix as #homeservicespreview above: the pre-reveal translateX(±60px)
     state on the left/right cards would otherwise poke past the viewport
     edge and create real horizontal page scroll before each row animates
     in, since (unlike Home's version) these rows sit directly in
     .entry-content rather than inside a padded .kzp-info-section. */
  overflow-x: hidden;
}

/* Supply Chain card photo -- same "bleeds to the card edges, badge
   overlaps its bottom-left corner" treatment already established for
   Home's Our Services cards (#homeservicespreview), reused here under
   its own class since these cards live outside that section. */
.kzp-supply-row .kzp-info-card {
  padding-top: 0;
  overflow: hidden;
}

.kzp-supply-card__photo {
  display: block;
  width: calc(100% + 48px);
  margin: 0 -24px 0;
  height: 140px;
  object-fit: cover;
}

.kzp-supply-row .kzp-info-card__icon {
  position: relative;
  margin: -24px 0 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------------------
   Vision & Mission — Our Vision / Our Mission cards (replaces the old
   single stacked-paragraph text column) and a small 2-photo accent
   collage for the body image, distinct in spirit from the hero's
   circular collage but not a copy of it (rectangular, one small photo
   overlapping the main one).
   ------------------------------------------------------------------------ */

.kzp-vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

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

.kzp-vm-card {
  min-width: 0;
  border: 1px solid #e2e5df;
  border-radius: 8px;
  padding: 28px 24px;
  background: #fff;
}

.kzp-vm-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #4d7e3e;
  color: #4d7e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 0 18px;
}

.kzp-vm-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1c1f1a;
  margin: 0 0 10px;
}

.kzp-vm-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #3a3d38;
  margin: 0;
}

.kzp-vm-visual {
  position: relative;
  min-height: 260px;
}

.kzp-vm-visual__main {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.kzp-vm-visual__accent {
  position: absolute;
  left: -20px;
  bottom: -24px;
  width: 42%;
  max-width: 200px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 5px solid #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
  .kzp-vm-visual {
    margin-top: 20px;
    min-height: 220px;
  }
  .kzp-vm-visual__main {
    min-height: 220px;
  }
  .kzp-vm-visual__accent {
    left: -12px;
    bottom: -20px;
    width: 38%;
  }
}

/* ------------------------------------------------------------------------
   Client Logos marquee (Home page, sits just before the map near the end
   of the page) — continuous CSS-driven loop, no JS. The Blade view renders
   the logo list twice back-to-back;
   translating the track by exactly -50% loops seamlessly regardless of how
   many logos exist, since that's always "one full set" of the doubled list.
   ------------------------------------------------------------------------ */
.kzp-logo-marquee {
  overflow: hidden;
  width: 100%;
}

.kzp-logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation-name: kzpMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.kzp-logo-marquee:hover .kzp-logo-marquee__track,
.kzp-logo-marquee:focus-within .kzp-logo-marquee__track {
  animation-play-state: paused;
}

.kzp-logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

/* Circular badge frame around each logo -- ~1.8x the old 60px rectangular
   image. object-fit:contain (not cover) so varied-aspect-ratio demo logos
   (square badges, wide text wordmarks) never get awkwardly cropped; the
   white fill behind them keeps transparent-background logos readable
   instead of showing the marquee's own backdrop through gaps. */
.kzp-logo-marquee__badge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e5df;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.kzp-logo-marquee__badge img {
  display: block;
  max-width: 66%;
  max-height: 66%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 576px) {
  .kzp-logo-marquee__item { padding: 0 18px; }
  .kzp-logo-marquee__badge { width: 84px; height: 84px; }
}

@keyframes kzpMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kzp-logo-marquee__track {
    animation: none;
  }
}

/* ------------------------------------------------------------------------
   Legacy Elementor heading recolor -- these specific widgets never had a
   custom color set, so they inherited the Elementor kit's default,
   unconfigured "primary" color (#6EC1E4, a sky blue with no relation to
   this site's actual green/gold brand identity) via the
   --e-global-color-primary CSS variable. Overridden here per-widget
   (targeting each one's own unique .elementor-element-<id> wrapper class,
   which Elementor already emits) rather than by changing the shared
   variable itself, since that would recolor every consumer of the
   variable -- including non-heading elements like icon-list icons and
   text-editor drop caps (see audit notes) -- to one flat color, which is
   not the intent here.

   Two shades of green are used, not one, to keep a parent/child
   hierarchy distinct on the Products page: the darker shade for the
   section-level heading that introduces the grid below it (more visual
   weight), the brighter primary shade for the parallel grid-item labels
   underneath (echoing the same green already used for icons/badges
   elsewhere) and for the standalone narrative heading on Our Story. The
   gold accent (rgb(196,161,94), used in the hero) was considered for the
   Products section heading but rejected: on this heading's plain white
   background it computes to only ~2.4:1 contrast, below the 3:1 floor
   WCAG allows even for large bold text -- gold reads fine over the
   hero's dark photo overlay, not over plain white body copy. */

/* Our Story -- "Built Around Better Apparel Sourcing" and the new second-
   row heading below it (same treatment: standalone heading paired with
   body copy + photo; ~4.8:1 contrast on white) */
.elementor-element-aa11002 .elementor-heading-title,
.elementor-element-aa11003 .elementor-heading-title {
  color: #4d7e3e;
}

/* Products -- "Applications For Your DECORATION" section heading
   (introduces the 6-item grid below; darker shade, ~7.35:1 contrast on white) */
.elementor-element-1d7e7a8 .elementor-heading-title {
  color: #3a5f2f;
}

/* ------------------------------------------------------------------------
   Site-wide footer social links (Facebook/LinkedIn/Instagram/YouTube/
   WhatsApp) -- sits in the footer's first "K&Z FASHIONS" column, right
   under the copyright line, on every page. Each icon only renders when its
   Setting (admin -> Contact Info) actually has a URL, so this stays
   invisible until the admin fills one in. Small light circles against the
   footer's dark background, brand-green fill on hover.
   ------------------------------------------------------------------------ */
.kzp-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.kzp-footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background-color .2s ease, transform .15s ease;
}

.kzp-footer-social a:hover {
  background: #4d7e3e;
  color: #fff;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------------
   Site-wide WhatsApp click-to-chat floating button. Bottom-LEFT (not
   bottom-right) deliberately, so it never overlaps the existing WPFront
   "scroll to top" button, which already occupies the bottom-right corner
   on every page (location:1, marginX/Y:20 -- see wpfront_scroll_top_init()
   in each page's own footer script block). Uses WhatsApp's own brand green
   (#25D366), not the site's #4d7e3e, since the recognizable WhatsApp color
   is itself part of the affordance -- users scan for it by color+icon
   shape, same as they would a payment-brand mark.
   ------------------------------------------------------------------------ */
.kzp-whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kzp-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.kzp-whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.kzp-whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: .55;
  z-index: -1;
  animation: kzpWhatsappPulse 2.2s ease-out infinite;
}

@keyframes kzpWhatsappPulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 576px) {
  .kzp-whatsapp-float {
    left: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .kzp-whatsapp-float svg {
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kzp-whatsapp-float::before {
    animation: none;
    opacity: 0;
  }
}

/* ------------------------------------------------------------------------
   Contact Us — modernized page: photo hero with dark overlay (replaces the
   previous bare full-viewport-height fabric photo with no text), matching
   card-panel treatment for the form + contact-info/map/key-contacts blocks,
   and restyled form fields/button/icon badges. Same brand palette as the
   rest of the site (#4d7e3e green, #e7c98a gold accent from kz-panel-hero.css,
   #eef3ea green-tint used for the Key Contacts highlight, matching the tint
   already used for .kzp-supply-callout and the info-card icon badges).
   ------------------------------------------------------------------------ */

/* ---- Hero: reuses the section's existing Elementor background-image
   (post-15.css), just adds a dark gradient overlay + heading/subtext and
   caps the height -- the original elementor-section-height-full class
   (100vh) is removed in the blade rather than fought with !important. */
.kzp-contact-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.kzp-contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 16, .55) 0%, rgba(15, 21, 11, .78) 100%);
  z-index: 0;
}

.kzp-contact-hero > .elementor-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.kzp-contact-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.kzp-contact-hero__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #e7c98a;
  margin: 0 0 12px;
}

/* Specificity note: the legacy Astra theme CSS has a rule
   `.entry-content h1 { color: var(--ast-global-color-3) }` (1 class + 1
   element = specificity 0,1,1), which beats a single class selector here
   (0,1,0) -- doubling the class below (0,2,0) is what actually wins, or the
   dark theme color plus this rule's text-shadow render as illegible
   "ghosted" text. */
.kzp-contact-hero .kzp-contact-hero__heading {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.kzp-contact-hero__subtext {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .kzp-contact-hero { min-height: 220px; }
  .kzp-contact-hero__inner { padding: 28px 20px; }
}

/* ---- Form + contact-info cards, scoped by id (not just class) for the
   same reason documented elsewhere in this file: this page loads the
   vendor Elementor frontend.min.css, and several rules below (field
   borders, button color/shape, icon-list badges) need to beat its
   specificity. */
#contactuspage {
  padding-top: var(--kzp-section-gap);
  padding-bottom: var(--kzp-section-gap);
}

#contactuspage .elementor-container {
  align-items: flex-start;
}

#contactuspage .kzp-contact-card {
  background: #fff;
  border: 1px solid #e2e5df;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  padding: 32px;
}

#contactuspage .kzp-contact-card--key {
  background: #eef3ea;
  border-color: #dfe8d8;
  padding: 24px 28px;
  box-shadow: none;
}

#contactuspage .kzp-contact-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#contactuspage .kzp-contact-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e5df;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  line-height: 0;
}

#contactuspage .kzp-contact-map iframe {
  display: block;
}

#contactuspage .kzp-contact-card--form h2,
#contactuspage .kzp-contact-card--info h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

/* ---- Form fields ---- */
#contactuspage .elementor-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #3a3d38;
  margin-bottom: 6px;
}

#contactuspage .elementor-field-textual {
  border: 1px solid #dde1d8;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fafbf9;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#contactuspage .elementor-field-textual:focus {
  border-color: #4d7e3e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(77, 126, 62, .13);
  outline: none;
}

#contactuspage .elementor-form-fields-wrapper {
  row-gap: 18px;
}

#contactuspage .elementor-button {
  background-color: #4d7e3e;
  border-radius: 999px;
  padding: 15px 42px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .2s ease, transform .15s ease;
}

#contactuspage .elementor-button:hover,
#contactuspage .elementor-button:focus {
  background-color: #3d6431;
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Icon-list badges: brand-colored circle behind each icon, replacing
   the plain bare icon. Key Contacts list gets white circles instead of
   green-tint since it already sits on the green-tint card background. */
#contactuspage .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#contactuspage .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
}

#contactuspage .elementor-icon-list-item > a {
  display: flex;
  align-items: flex-start;
}

#contactuspage .elementor-icon-list-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #eef3ea;
  color: #4d7e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
}

#contactuspage .kzp-contact-card--key .elementor-icon-list-icon {
  background: #fff;
}

#contactuspage .elementor-icon-list-icon i {
  font-size: 14px;
}

#contactuspage .elementor-icon-list-text {
  font-size: 14px;
  line-height: 1.6;
  color: #3a3d38;
  padding-top: 6px;
}

/* Force the two-column layout to stack a bit earlier than Elementor's own
   kit breakpoint -- the new card padding + circle icon badges need more
   room than the original bare content did, and at exactly 768px (between
   this page's old comfortable width and Elementor's own stacking
   threshold) the two columns were squeezing to ~230px and overflowing. */
@media (max-width: 900px) {
  #contactuspage .elementor-container {
    flex-direction: column;
  }
  #contactuspage .elementor-column.elementor-col-50 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #contactuspage .kzp-contact-card,
  #contactuspage .kzp-contact-card--key {
    padding: 24px 20px;
  }
}

/* Products -- the 6 parallel grid-item labels underneath (~4.8:1 contrast on white) */
.elementor-element-54218db .elementor-heading-title,
.elementor-element-920b9a0 .elementor-heading-title,
.elementor-element-5f8c249 .elementor-heading-title,
.elementor-element-2d15787 .elementor-heading-title,
.elementor-element-ad7411f .elementor-heading-title,
.elementor-element-828d829 .elementor-heading-title {
  color: #4d7e3e;
}