/* ==========================================================================
   KCR GLOBAL PVT LTD — Core Stylesheet
   ========================================================================== */

:root {
  /* Color tokens — strict 3-color KCR Global brand palette */
  --navy: #172435;
  --navy-dark: #172435;
  --navy-tint: rgba(23, 36, 53, 0.06);
  --teal: #f6e8c3;        /* gold/beige accent — variable name kept for minimal diff */
  --teal-dark: #f6e8c3;
  --teal-tint: rgba(246, 232, 195, 0.18);
  --gold-warm: #f6e8c3;
  --bg-light: rgba(246, 232, 195, 0.12);
  --white: #FFFFFF;
  --charcoal: #172435;
  --text-secondary: rgba(23, 36, 53, 0.65);
  --orange: #172435;
  --border-light: rgba(23, 36, 53, 0.14);

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 3.5rem;
  --space-2xl: 4.5rem;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 4px 16px rgba(31, 56, 100, 0.08);
  --shadow-md: 0 12px 32px rgba(31, 56, 100, 0.12);
  --shadow-lg: 0 24px 60px rgba(31, 56, 100, 0.18);

  /* Layout */
  --container-width: 1240px;
  --header-height: 90px;
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 4.5rem; font-weight: 700; }
h2 { font-size: 2.6rem; }
h3 { font-size: 1.5rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--navy);
  display: inline-block;
}
.hero .eyebrow, .page-hero .eyebrow, .bg-navy .eyebrow, .site-footer .eyebrow {
  color: var(--teal);
}
.hero .eyebrow::before, .page-hero .eyebrow::before, .bg-navy .eyebrow::before, .site-footer .eyebrow::before {
  background: var(--teal);
}

.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--text-secondary); font-size: 1.08rem; margin-top: var(--space-sm); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--space-2xl) 0; position: relative; }
.bg-light { background: var(--bg-light); }
.bg-navy { background: var(--navy); color: rgba(255,255,255,0.88); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--teal); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy); color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); transform: translateY(-3px); }
.btn-ghost-white { background: rgba(255,255,255,0.08); color: var(--white); border: 1.5px solid rgba(255,255,255,0.5); backdrop-filter: blur(6px); }
.btn-ghost-white:hover { background: var(--white); color: var(--navy); }
.btn-orange { background: var(--navy); color: var(--white); }
.btn-orange:hover { background: var(--teal); color: var(--navy); transform: translateY(-3px); }
.btn-sm { padding: 0.7rem 1.4rem; font-size: 0.85rem; }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; }
@keyframes ripple { to { transform: scale(3.5); opacity: 0; } }
/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0 clamp(1.2rem, 3vw, 2.4rem);
  transition: background var(--transition), box-shadow var(--transition), height var(--transition), padding var(--transition);
}
.site-header.scrolled {
  background: var(--navy);
  box-shadow: 0 4px 24px rgba(23,36,53,0.35);
  height: 80px;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: clamp(1.5rem, 4vw, 3rem); }

.logo { display: flex; align-items: center; flex-shrink: 0; transition: color var(--transition); }
.logo-img { display: block; height: 70px; width: auto; max-width: none; object-fit: contain; transition: height var(--transition); }
.site-header.scrolled .logo-img { height: 56px; }

.main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.6vw, 2.1rem); margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: clamp(1.1rem, 1.6vw, 2.1rem); }
.main-nav a { font-family: var(--font-heading); font-weight: 500; font-size: 0.94rem; color: var(--white); transition: color var(--transition); position: relative; padding: 0.4rem 0; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--teal); }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--teal); transition: width var(--transition); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.main-nav li.has-mega { position: relative; }
.header-actions { display: flex; align-items: center; gap: 1.2rem; margin-left: 0.6rem; }
.header-actions .btn { color: var(--white); border-color: rgba(255,255,255,0.6); }
.header-actions .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.6); }
.header-actions .btn-secondary:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* Mega menu */
.mega-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 780px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
li.has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-col h5 { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); opacity: 0.7; margin-bottom: 0.9rem; }
.mega-col ul li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; color: var(--charcoal); font-weight: 400; font-size: 0.93rem; transition: background var(--transition), color var(--transition), padding-left var(--transition); }
.mega-col ul li a:hover { background: var(--bg-light); color: var(--navy); padding-left: 0.9rem; font-weight: 600; }
.mega-col ul li a::after { display: none; }
.mega-promo { background: linear-gradient(160deg, var(--navy), var(--navy-dark)); border-radius: var(--radius-sm); padding: 1.4rem; color: var(--white); display: flex; flex-direction: column; justify-content: space-between; }
.mega-promo p { font-size: 0.88rem; opacity: 0.85; margin: 0.5rem 0 1rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; z-index: 1100; background: transparent; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.nav-toggle span { height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,0.75); padding-top: var(--space-2xl); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .logo { color: var(--white); margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.93rem; line-height: 1.7; opacity: 0.75; max-width: 320px; }
.footer-col h5 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul li a { font-size: 0.92rem; opacity: 0.75; transition: opacity var(--transition), padding-left var(--transition); }
.footer-col ul li a:hover { opacity: 1; padding-left: 4px; color: var(--teal); }
.newsletter-form { display: flex; margin-top: 1rem; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }
.newsletter-form input { flex: 1; background: transparent; border: none; padding: 0.85rem 1.1rem; color: var(--white); font-size: 0.88rem; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button { background: var(--teal); color: var(--white); padding: 0 1.3rem; font-weight: 600; }
.social-icons { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.social-icons a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.social-icons a:hover { background: var(--teal); border-color: var(--teal); color: var(--navy); transform: translateY(-3px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 0; font-size: 0.85rem; opacity: 0.6; flex-wrap: wrap; gap: 0.8rem; }
.footer-bottom a { opacity: 0.9; }
.footer-bottom a:hover { color: var(--teal); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 72vh; display: flex; align-items: center; color: var(--white); overflow: hidden; background: var(--navy); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(23,36,53,0.92) 10%, rgba(23,36,53,0.6) 100%); }
.hero-shapes span { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); animation: float 9s ease-in-out infinite; }
.hero-shapes span:nth-child(1) { width: 340px; height: 340px; top: -80px; right: 8%; animation-delay: 0s; }
.hero-shapes span:nth-child(2) { width: 180px; height: 180px; bottom: 10%; right: 26%; animation-delay: 2s; }
.hero-shapes span:nth-child(3) { width: 90px; height: 90px; bottom: 30%; left: 6%; animation-delay: 4s; }
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-24px) translateX(10px); } }

.hero-content { position: relative; z-index: 2; padding-top: calc(var(--header-height) - 0.6rem); padding-bottom: 4.5rem; max-width: 940px; }
.hero-content h1 { color: var(--white); font-size: 2.5rem; letter-spacing: -0.01em; margin-bottom: 0.85rem; max-width: 900px; text-wrap: balance; }
.hero-content .sub { font-size: 0.98rem; color: rgba(255,255,255,0.82); max-width: 520px; margin-bottom: 1.3rem; }
.hero-actions { display: flex; gap: 1.1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }

.hero-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); max-width: 760px; }
.hero-stats.hero-stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat-box { background: rgba(15,26,48,0.35); padding: 0.9rem 1rem; }
.stat-box .num { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--white); display: flex; align-items: baseline; gap: 0.15rem; }
.stat-box .num span.suffix { font-size: 1.4rem; color: var(--teal); }
.stat-box .label { font-size: 0.82rem; color: rgba(255,255,255,0.68); margin-top: 0.3rem; }

.scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.6); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.scroll-cue .line { width: 1px; height: 34px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; }
.scroll-cue .line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--teal); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 50% { top: 100%; } 100% { top: 100%; } }

/* Inner-page hero (secondary pages) */
.page-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; color: var(--white); background: var(--navy); overflow: hidden; padding-bottom: var(--space-lg); }
.page-hero .hero-bg::after { background: linear-gradient(120deg, rgba(23,36,53,0.92), rgba(23,36,53,0.65)); }
.page-hero-content { position: relative; z-index: 2; padding-top: var(--header-height); }
.breadcrumb { display: flex; gap: 0.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--teal); }
.page-hero h1 { font-size: 3rem; color: var(--white); }

/* ---------- Cards ---------- */
.card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.product-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); }
.product-card .thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--bg-light); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.product-card:hover .thumb img { transform: scale(1.08); }
.product-card .tag { position: absolute; top: 14px; left: 14px; background: var(--orange); color: var(--white); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 100px; z-index: 2; }
.product-card .body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.product-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.product-card p { color: var(--text-secondary); font-size: 0.92rem; flex: 1; }
.product-card .card-link { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--navy); }
.product-card .card-link svg { transition: transform var(--transition); }
.product-card:hover .card-link svg { transform: translateX(5px); }

/* =========================================================
   DIVISION CARDS
   Desktop + Tablet + Mobile Responsive
   ========================================================= */

.division-grid {
  display: grid;

  /* 3 cards side-by-side */
  grid-template-columns: repeat(3, minmax(0, 283px));

  gap: 24px;

  /* 3 cards together centered */
  justify-content: center;
  align-items: stretch;

  width: 100%;
  max-width: 915px;
  margin: 0 auto;

  box-sizing: border-box;
}

.division-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);

  padding: 2.2rem 1.8rem;

  transition: var(--transition);
}

.division-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

.division-card .icon {
  width: 56px;
  height: 56px;

  border-radius: 14px;

  background: var(--teal-tint);
  color: var(--navy);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 1.3rem;

  transition: var(--transition);
}

.division-card:hover .icon {
  background: var(--teal);
  color: var(--navy);
}

.division-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.6rem;
}

.division-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .division-grid {
    grid-template-columns: repeat(2, minmax(0, 283px));
    max-width: 620px;
    gap: 20px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .division-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
    padding: 0 16px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
  .division-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 900px;
    padding: 0 20px;
  }

  .division-card {
    padding: 2rem 1.5rem;
  }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {
  .division-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 600px;
    padding: 0 20px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .division-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    max-width: 420px;
    padding: 0 20px;
    margin: 0 auto;
  }

  .division-card {
    width: 100%;
    padding: 1.8rem 1.5rem;
  }

  .division-card .icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
  }

  .division-card h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .division-card p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .division-grid {
    padding: 0 14px;
    gap: 16px;
  }

  .division-card {
    padding: 1.5rem 1.25rem;
  }
}

/* Why choose grid */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.why-card { text-align: left; padding: var(--space-md); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); transition: var(--transition); }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-card .icon { width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.why-card h4 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.why-card p { font-size: 0.88rem; color: var(--text-secondary); }

/* Why KCR — 10-point differentiator grid (4 / 4 / 2 centered on desktop) */
.why-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); align-items: stretch; }
.why-cards-grid .why-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 1.8rem 1.6rem; border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; }
.why-cards-grid .why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-cards-grid .why-card .icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.why-cards-grid .why-card .icon svg { width: 22px; height: 22px; }
.why-cards-grid .why-card h4 { font-size: 1rem; line-height: 1.3; color: var(--navy); margin-bottom: 0.55rem; }
.why-cards-grid .why-card p { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
/* Center the final row of 2 cards under a 4-column grid */
.why-cards-grid .why-card:nth-child(9) { grid-column: 2 / 3; }
.why-cards-grid .why-card:nth-child(10) { grid-column: 3 / 4; }

/* Certifications */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.cert-grid .cert-card:nth-child(5) { grid-column: 2 / 3; }
.cert-grid .cert-card:nth-child(6) { grid-column: 3 / 4; }
.cert-card { background: var(--white); border-radius: var(--radius-md); padding: 2rem 1.6rem; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 252px; }
.cert-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.cert-badge { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--teal); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-family: var(--font-heading); font-weight: 700; flex-shrink: 0; }

/* Certifications section (Quality page) — logo-image cards */
.cert-grid--logos { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }
.cert-grid--logos .cert-card:nth-child(5), .cert-grid--logos .cert-card:nth-child(6) { grid-column: auto; }
.cert-card--logo { border: 1px solid var(--border-light); min-height: 0; padding: 2rem 1.6rem; height: 100%; }
.cert-img-wrap { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; flex-shrink: 0; }
.cert-img-wrap img { max-width: 96px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.cert-card h4 { font-size: 1rem; margin-bottom: 0.4rem; line-height: 1.35; }
.cert-card h4 .cert-type { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); margin-top: 0.15rem; letter-spacing: 0.02em; }
.cert-card p { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.45; }
.cert-card p strong { color: var(--navy); font-family: var(--font-heading); font-weight: 600; }
.cert-download { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--navy); border: 1px solid var(--border-light); padding: 0.5rem 1rem; border-radius: 100px; transition: var(--transition); }
.cert-download:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
#certifications .cert-card p:last-child { margin-bottom: 0; }

/* Quality Control Test Equipment */
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.equipment-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  height: 100%;
}
.equipment-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.equipment-num {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal-tint);
  border: 1.5px solid var(--teal);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  transition: var(--transition);
}
.equipment-card:hover .equipment-num { background: var(--teal); }
.equipment-info h4 { font-size: 0.96rem; font-weight: 600; color: var(--navy); line-height: 1.35; margin: 0; }
/* Center the lone final item under a 3-column grid */
.equipment-grid .equipment-card:nth-child(19) { grid-column: 2 / 3; }

/* Quality Control and Product Development */
.qcpd-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-xl); align-items: start; max-width: 1040px; margin: 0 auto; }
.qcpd-text p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.75; margin-bottom: 1.1rem; }
.qcpd-text p:last-child { margin-bottom: 0; }
.qcpd-highlights { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.8rem 1.6rem; }
.qcpd-highlights h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); opacity: 0.75; margin-bottom: 1.2rem; font-family: var(--font-heading); }
.qcpd-points { display: flex; flex-direction: column; gap: 1.1rem; }
.qcpd-points li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.qcpd-points li .check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-tint); border: 1.5px solid var(--teal); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.qcpd-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--border-light); max-width: 1040px; margin-left: auto; margin-right: auto; }

/* Machinery Details */
.machinery-section { padding: var(--space-lg) 0 var(--space-2xl); }
.machinery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.machinery-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.9rem 1.2rem 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; transition: var(--transition); }
.machinery-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-5px); }
.machinery-card .icon { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: var(--transition); }
.machinery-card .icon svg { width: 22px; height: 22px; }
.machinery-card:hover .icon { background: var(--teal); color: var(--navy); }
.machinery-card .equipment-num { margin-bottom: 0.7rem; }
.machinery-card h4 { font-size: 0.92rem; font-weight: 600; color: var(--navy); line-height: 1.35; margin: 0; }
.qcpd-icon-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.qcpd-icon-item .icon { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.qcpd-icon-item .icon svg { width: 24px; height: 24px; }
.qcpd-icon-item:hover .icon { background: var(--teal); color: var(--navy); transform: translateY(-4px); }
.qcpd-icon-item span { font-size: 0.85rem; font-weight: 600; color: var(--navy); font-family: var(--font-heading); }
.machinery-bottom-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 658px;
  margin: 0 auto;
}

.machinery-bottom-row .machinery-card {
  width: 100%;
  box-sizing: border-box;
}

/* Industries */
.industry-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; }
.industry-card { text-align: center; padding: 1.6rem 0.8rem; border-radius: var(--radius-md); background: var(--bg-light); transition: var(--transition); }
.industry-card:hover { background: var(--navy); color: var(--white); transform: translateY(-6px); }
.industry-card .icon { width: 46px; height: 46px; margin: 0 auto 0.8rem; color: var(--navy); }
.industry-card:hover .icon { color: var(--white); }
.industry-card span { font-size: 0.85rem; font-weight: 600; font-family: var(--font-heading); }

/* Manufacturing gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--space-sm); }
.gallery-grid .g-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.gallery-grid .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid .g-item:nth-child(4) { grid-column: span 2; }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-grid .g-item:hover img { transform: scale(1.1); }
.gallery-grid .g-item .caption { position: absolute; inset: auto 0 0 0; padding: 1rem; background: linear-gradient(to top, rgba(20,42,77,0.85), transparent); color: var(--white); font-size: 0.85rem; font-weight: 600; opacity: 0; transform: translateY(10px); transition: var(--transition); }
.gallery-grid .g-item:hover .caption { opacity: 1; transform: translateY(0); }
/* Balance gallery layout for products with fewer approved photos, without altering the 4+ photo masonry layout above */
.gallery-grid:has(.g-item:only-child) { grid-template-columns: 1fr; grid-auto-rows: 440px; max-width: 640px; margin: 0 auto; }

/* ---------- Product page — Applications (compact card grid) ---------- */
.applications-section { padding: var(--space-lg) 0; }
.applications-section .section-head { margin-bottom: var(--space-md); }
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}
.application-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.application-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.application-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.application-icon svg { width: 13px; height: 13px; }
.application-text { font-family: var(--font-heading); font-weight: 500; font-size: 0.92rem; line-height: 1.35; color: var(--navy); text-align: left; }
.gallery-grid:has(.g-item:only-child) .g-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
.gallery-grid:has(.g-item:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
.gallery-grid:has(.g-item:nth-child(2):last-child) .g-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
.gallery-grid:has(.g-item:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; }
.gallery-grid:has(.g-item:nth-child(3):last-child) .g-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }

/* Timeline */
.timeline { position: relative; padding-left: 2.4rem; margin-top: var(--space-lg); }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border-light); }
.timeline-item { position: relative; padding-bottom: var(--space-lg); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -2.4rem; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--teal); }
.timeline-item .year { font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.timeline-item h4 { margin: 0.3rem 0 0.4rem; }
.timeline-item p { color: var(--text-secondary); font-size: 0.92rem; max-width: 560px; }

/* FAQ accordion */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0.4rem; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.faq-question .icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--navy); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 1rem; transition: var(--transition); position: relative; }
.faq-question .icon::before, .faq-question .icon::after { content: ""; position: absolute; background: var(--navy); transition: var(--transition); }
.faq-question .icon::before { width: 10px; height: 1.5px; }
.faq-question .icon::after { width: 1.5px; height: 10px; }
.faq-item.open .faq-question .icon { background: var(--navy); border-color: var(--navy); transform: rotate(180deg); }
.faq-item.open .faq-question .icon::before, .faq-item.open .faq-question .icon::after { background: var(--white); }
.faq-item.open .faq-question .icon::after { opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding: 0 0.4rem 1.6rem; color: var(--text-secondary); font-size: 0.95rem; max-width: 680px; }

/* Contact CTA banner */
.cta-banner { background: linear-gradient(120deg, var(--navy), var(--navy-dark)); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; position: relative; overflow: hidden; }
.cta-banner h2 { color: var(--white); max-width: 700px; margin: 0 auto 1rem; }
.cta-banner p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  padding: 0.9rem 1.1rem; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--white); color: var(--charcoal); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(246,232,195,0.45); }
.form-note { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; }
.form-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg); }
.form-success { display: none; text-align: center; padding: var(--space-lg) 0; }
.form-success.show { display: block; }
.form-success .check { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-tint); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

/* Table (specs) */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border-light); }
.spec-table td { padding: 0.95rem 0.6rem; font-size: 0.93rem; }
.spec-table td:first-child { font-family: var(--font-heading); font-weight: 600; color: var(--navy); width: 40%; }
.spec-table td:last-child { color: var(--text-secondary); }
.spec-table tr:nth-child(even) { background: var(--bg-light); }

/* Downloads */
.download-list { display: flex; flex-direction: column; gap: 0.8rem; }
.download-item { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); transition: var(--transition); }
.download-item:hover { border-color: var(--teal); background: var(--teal-tint); }
.download-item .left { display: flex; align-items: center; gap: 0.9rem; }
.download-item .file-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; font-family: var(--font-heading); flex-shrink: 0; }
.download-item .name { font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.download-item .meta { font-size: 0.78rem; color: var(--text-secondary); }

/* Page loader */
#page-loader { position: fixed; inset: 0; background: var(--navy); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
#page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-mark { width: min(400px, 80vw); height: auto; display: block; animation: loaderPulse 1.1s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.88); opacity: 0.7; } }

/* ==========================================================================
   Floating action buttons.
   - WhatsApp + back-to-top arrow: stacked on the bottom-LEFT edge (WhatsApp
     above the arrow, with a fixed gap between them).
   - Tidio chatbot: stays on the bottom-RIGHT edge, its default corner.
   Putting them on opposite sides of the screen means none of the three can
   ever overlap, at any screen size. Mirrored, at reduced sizes/gaps, in
   responsive.css.
   ========================================================================== */
:root {
  --fab-gap: 16px;
  --fab-left: 2rem;
  --arrow-size: 48px;
  --arrow-bottom: 1.5rem;
  --whatsapp-size: 56px;
  --whatsapp-bottom: calc(var(--arrow-bottom) + var(--arrow-size) + var(--fab-gap));
  --tidio-right: 1.25rem;             /* Tidio's own default right-edge offset */
  --tidio-bottom: 1.25rem;            /* Tidio's own default bottom offset */
}

/* Back to top */
.back-to-top { position: fixed; bottom: var(--arrow-bottom); left: var(--fab-left); width: var(--arrow-size); height: var(--arrow-size); border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; z-index: 900; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); box-shadow: var(--shadow-md); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--teal); }

/* WhatsApp float — stacked directly above the arrow on the bottom-left, with
   a fixed gap so the two never overlap at any screen size. */
.whatsapp-float { position: fixed; bottom: var(--whatsapp-bottom); left: var(--fab-left); width: var(--whatsapp-size); height: var(--whatsapp-size); border-radius: 50%; background: var(--navy); color: var(--teal); display: flex; align-items: center; justify-content: center; z-index: 901; box-shadow: var(--shadow-md); transition: var(--transition); border: 1.5px solid var(--teal); }
.whatsapp-float:hover { transform: scale(1.1); background: var(--teal); color: var(--navy); border-color: var(--navy); }

/* Tidio chatbot bubble — Tidio renders its own fixed-position iframe and sets
   inline styles on it via JS, so it has to be repositioned with !important to
   win over those inline styles. Kept on its default bottom-right corner,
   opposite WhatsApp/arrow, with its "Chat with us" tooltip (rendered by
   Tidio itself) fully clear of both. */
#tidio-chat iframe#tidio-chat-iframe {
  bottom: var(--tidio-bottom) !important;
  right: var(--tidio-right) !important;
  z-index: 902 !important;
}

/* Reveal animation hooks (see animations.css) */
.container-tight { max-width: 900px; margin: 0 auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.divider { height: 1px; background: var(--border-light); margin: var(--space-lg) 0; }

/* Our Process — quality team visual */
.process-visual { align-self: center; }
.process-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

/* About KCR Global preview — compact text + two equal, balanced images */
.about-preview-grid { align-items: stretch; }
.about-heading { font-size: 2.15rem; }
.about-lead { margin-top: 1rem; color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; max-width: 94%; }
.about-preview-visual { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; min-height: 420px; }
.about-visual-primary, .about-visual-secondary { flex: 1 1 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-visual-primary img, .about-visual-secondary img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-pill { display: inline-block; background: var(--teal-tint); color: var(--navy); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 100px; margin-bottom: 1rem; }

/* Utility */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.btn,
.btn-primary,
.btn-secondary {
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0);
}
.btn::before,
.btn-primary::before,
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: rgba(255,255,255,.25);
    transform: skewX(-25deg);
    transition: .6s;
}

.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before {
    left: 140%;
}
/* ===== Scroll Reveal ===== */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Different animation directions */

.reveal-left {
    opacity: 0;
    transform: translateX(-70px);
    transition: .8s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(70px);
    transition: .8s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(.92);
    transition: .8s ease;
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}
/* Floating Hero Image */

.hero-image img {

    animation: floatImage 6s ease-in-out infinite;

    will-change: transform;

}

@keyframes floatImage {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-18px);

    }

    100% {

        transform: translateY(0px);

    }

}
.hero-btn,
.btn-primary {

    transition: all .35s ease;

    position: relative;

    overflow: hidden;

}

.hero-btn:hover,
.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(0,0,0,.18);

}

.hero-btn::before,
.btn-primary::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 60%;

    height: 100%;

    background: rgba(255,255,255,.25);

    transform: skewX(-20deg);

    transition: .6s;

}

.hero-btn:hover::before,
.btn-primary:hover::before {

    left: 140%;

}
.hero-content h1{

    animation: fadeUp .8s ease forwards;

}

.hero-content p{

    animation: fadeUp 1s ease forwards;

}

.hero-content .hero-btn{

    animation: fadeUp 1.2s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(212,175,55,.18),
    transparent 70%);

    top:-150px;

    right:-120px;

    animation:glowMove 8s ease-in-out infinite;

    pointer-events:none;

}

@keyframes glowMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-40px,40px);

    }

    100%{

        transform:translate(0,0);

    }

}
#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#f6e8c3;

    z-index:99999;

}
/* ==========================
   HERO PARALLAX
========================== */

.hero {

    overflow: hidden;
    position: relative;

}

.hero-bg{

    transition: transform .35s ease-out;

    will-change: transform;

}

.hero-shapes{

    transition: transform .35s ease-out;

    will-change: transform;

}
/* =====================================
   PREMIUM PRODUCT CARD EFFECT
====================================== */

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    will-change:transform;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(0,0,0,.18);

}

/* Image */

.product-card .thumb{

    overflow:hidden;

}

.product-card .thumb img{

    width:100%;

    display:block;

    transition:
        transform .6s ease,
        filter .6s ease;

}

.product-card:hover .thumb img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

/* Gold Shine */

.product-card .thumb::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

    z-index:2;

}

.product-card:hover .thumb::before{

    left:150%;

}

/* Title */

.product-card h3{

    transition:.3s ease;

}

.product-card:hover h3{

    color:var(--gold-warm);

}

/* Link */

.product-card .card-link{

    transition:.3s ease;

}

.product-card:hover .card-link{

    transform:translateX(6px);

}
html{
    scroll-behavior:auto;
}

body{
    overflow-x:hidden;
}

/* Supplied certification cards — keep remaining cards balanced after ISO 9001:2015 removal */
.cert-grid--supplied .cert-card:last-child {
  grid-column: 2;
}
@media (max-width: 900px) {
  .cert-grid--supplied .cert-card:last-child { grid-column: auto; }
}

/* Supplied certification artwork — individual cards */
.cert-grid--supplied {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
.cert-grid--supplied .cert-card {
  min-height: 260px;
  height: 100%;
}
.cert-grid--supplied .cert-img-wrap {
  width: 100%;
  height: 118px;
  margin-bottom: 1.15rem;
}
.cert-grid--supplied .cert-img-wrap img {
  max-width: 100%;
  max-height: 112px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .cert-grid--supplied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cert-grid--supplied { grid-template-columns: 1fr; }
  .cert-grid--supplied .cert-card { min-height: 230px; }
  .cert-grid--supplied .cert-img-wrap { height: 105px; }
  .cert-grid--supplied .cert-img-wrap img { max-height: 100px; }
}

/* Home Hero Tagline */
.hero .eyebrow {
  font-size: 1.1rem;
}