/*
Theme Name: Synergy Garments
Theme URI: https://synergytextilegroup.com
Author: Synergy Textile Group
Description: Custom theme for Synergy Textile Group, built pixel-accurate from the approved Figma design.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: synergy-garments
*/

/* ==========================================================================
   Synergy Textile Group — Homepage
   Design tokens extracted 1:1 from Figma file LUQluXysfVv3eKBTVwu7HP
   node 1104:19528 "Home-page 1440"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* Colors */
  --color-primary-green: #058141;
  --color-primary-green-hover: #00612f;
  --color-text: #18181b;
  --color-text-secondary: #52525c;
  --color-text-muted: #afafaf;
  --color-text-on-dark: #ffffff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-stroke: #e8e8e8;
  --color-stroke-dark: #3f3f46;
  --color-section-divider: #f4f4f5;
  --color-product-image-bg: #d9d9d9;
  --color-dark-product-card: #232325;
  --color-footer-green: #003a1d;
  --color-placeholder-fill: #f8f8f8;
  --color-accent-red: #ff383c;

  /* Typography */
  --font-display: 'Red Hat Display', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Geist', 'Segoe UI', Arial, sans-serif;

  --fs-14: 14px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-42: 42px;
  --fs-48: 48px;
  --fs-58: 58px;
  --fs-72: 72px;

  --lh-18_2: 18.2px;
  --lh-20_8: 20.8px;
  --lh-23_4: 23.4px;
  --lh-31_2: 31.2px;

  /* Spacing */
  --space-xs: 8px;
  --space-20: 20px;
  --space-30: 30px;
  --space-48: 48px;
  --space-69: 69.48px;
  --space-100: 100px;
  --space-130: 130px;

  --radius-16: 16px;
  --radius-pill: 50px;
  --stroke-1: 1px;
  --stroke-2: 2px;

  --container-max: 1340px;
  --container-padding: 50px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  padding-top: 90px;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
@media (max-width: 1440px) {
  .container { max-width: 100%; }
}

/* ---- Shared components ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: fit-content;
  gap: 6px;
  background: var(--color-white);
  border: var(--stroke-1) solid #d4d4d8;
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: var(--lh-18_2);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.eyebrow--on-dark { color: var(--color-white); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary-green);
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: fit-content;
  gap: 20px;
  border-radius: var(--radius-pill);
  padding: 7px 7px 7px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .88; }
.btn--dark { background: var(--color-text); color: var(--color-white); }
.btn--green { background: var(--color-primary-green); color: var(--color-white); }
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary-green);
  flex-shrink: 0;
}
.btn--green .btn__icon { background: var(--color-text); }
.btn__icon svg { width: 24px; height: 24px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-primary-green);
  border-radius: var(--radius-pill);
  padding: 17px 36px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text);
  white-space: nowrap;
}
.btn-outline--on-dark { color: var(--color-white); }

.btn-primary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 17px 50px;
  background: var(--color-primary-green);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  width: 100%;
  transition: background .2s ease;
}
.btn-primary-pill:hover { background: var(--color-primary-green-hover); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: 60px;
  color: var(--color-text);
}
.section-heading strong,
.section-heading b {
  font-weight: 800;
  color: var(--color-primary-green);
}
.section-heading--on-dark { color: var(--color-white); }
.section-heading--on-dark strong,
.section-heading--on-dark b { color: inherit; }

/* ==========================================================================
   TOP BAR (contact strip above the main nav -- part of .site-header so it
   hides/reveals together with the nav on scroll, and is automatically
   included in the header-height offset calculations in the footer script)
   ========================================================================== */
.topbar { background: var(--color-text); width: 100%; }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  padding: 10px 88px;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  transition: color .2s ease;
}
.topbar__item:hover { color: var(--color-white); }
.topbar__item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  background: var(--color-white);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform .35s ease;
  will-change: transform;
}
.site-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.logo-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.logo-mark { width: 160px; height: auto; display: block; }
.main-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: var(--stroke-1) solid var(--color-stroke);
  border-bottom: var(--stroke-1) solid var(--color-stroke);
  padding: 16px 88px;
  position: relative;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: var(--stroke-1) solid var(--color-stroke);
  border-radius: var(--radius-pill);
  padding: 7px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: 24px;
  color: var(--color-text);
}
.nav-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary-green);
  display: none;
}
.nav-link.is-active { color: var(--color-primary-green); }
.nav-link.is-active .nav-dot { display: inline-block; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 796px;
  max-height: 90vh;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.hero__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);
}
.hero__content {
  position: absolute;
  left: 50%;
  top: calc(50% - 50px);
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1440px;
  padding: 0 88px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.hero__footer {
  position: absolute;
  left: 50%;
  /* 210px at the reference 796px hero height, expressed as a % so it
     scales down together with the 90vh cap on short viewports instead
     of staying fixed while the hero shrinks around it (which is what
     let the divider drift up into the title on short browser windows). */
  bottom: 26.382%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  padding: 0 88px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-58);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(0,0,0,.25);
  max-width: 1065px;
}
.hero__title-line1 { display: block; }
.hero__title-line2 { display: block; font-weight: 700; color: #009D4C; }
.hero__divider { width: 100%; height: 1px; background: rgba(255,255,255,.35); }
.hero__bottom-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  max-width: 480px;
  text-transform: none;
  margin: 0;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.2);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-pill);
  padding: 17px 36px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  transition: background .2s ease;
}
.hero__cta:hover { background: rgba(255,255,255,.35); }

/* ==========================================================================
   INTRO / STATS BANNER
   ========================================================================== */
.intro-banner {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  min-height: 692px;
  box-sizing: border-box;
}
.intro-banner__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.intro-banner__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.intro-banner__content {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  max-width: 1340px;
  width: 100%;
}
.intro-banner__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}
.intro-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: 712px;
}
.intro-banner__heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}
.intro-banner__title { max-width: 712px; color: var(--color-white); }
.intro-banner__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: 30px;
  color: rgba(255,255,255,.8);
  max-width: 482px;
}
.stat-row { display: flex; gap: 48px; align-items: center; width: 100%; }
.stat-row__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-row__number { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-48); color: var(--color-white); }
.stat-row__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14); color: var(--color-primary-green); }
.tagline-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1340px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-14);
  color: rgba(255,255,255,.8);
  flex-wrap: wrap;
  gap: 8px;
}
.tagline-row .uppercase { text-transform: uppercase; }

/* ==========================================================================
   OUR PROCESS
   ========================================================================== */
.process { padding: 100px 0; }
.process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.process__head .eyebrow { margin-bottom: 30px; }
.process__title { max-width: 500px; }
.process-list { display: flex; flex-direction: column; position: relative; }
.process-row {
  display: grid;
  grid-template-columns: minmax(0, 502px) minmax(0, 376px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 48px 0;
  background: var(--color-white);
  position: sticky;
  top: 110px;
  border-top: var(--stroke-1) solid #d4d4d8;
}
.process-row:nth-child(1) { z-index: 1; }
.process-row:nth-child(2) { z-index: 2; }
.process-row:nth-child(3) { z-index: 3; }
.process-row:nth-child(4) { z-index: 4; }
.process-row:nth-child(5) { z-index: 5; }
.process-row:nth-child(6) { z-index: 6; }
.process-row__img {
  width: 100%; height: 220px; object-fit: cover; border-radius: 8px;
}
.process-row__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-30, 30px);
  line-height: 48px;
  color: var(--color-text-secondary);
}
.process-row__checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.process-row__checklist li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-23_4);
  color: var(--color-text-muted);
}
.process-row__checklist li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px;
  background: var(--color-primary-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   MANUFACTURING OVERVIEW
   ========================================================================== */
.mfg-overview { background: var(--color-section-divider); padding: 100px 0 60px; }
.mfg-overview .eyebrow { margin-bottom: 48px; }
.mfg-overview__grid {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-bottom: 100px;
}
.mfg-overview__grid .section-heading { flex-shrink: 0; max-width: 320px; }
.mfg-overview__right { display: flex; flex-direction: column; gap: 30px; max-width: 972px; }
.mfg-overview__body { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: var(--color-text-secondary); }
.mfg-overview__ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.stat-circles { display: flex; align-items: center; justify-content: center; }
.stat-circle {
  width: 320px; height: 320px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  position: relative;
  margin-left: -20px;
}
.stat-circle:first-child { margin-left: 0; }
.stat-circle--white { background: var(--color-white); border: 1px solid #d9d9d9; z-index: 3; }
.stat-circle--photo { overflow: hidden; z-index: 2; }
.stat-circle--photo img { width: 100%; height: 100%; object-fit: cover; }
.stat-circle--white:nth-of-type(3) { z-index: 1; }
.stat-circle--dark { background: var(--color-text); z-index: 4; }
.stat-circle__eyebrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-primary-green); }
.stat-circle__number { font-family: var(--font-body); font-weight: 700; font-size: 52px; color: var(--color-primary-green); line-height: 1; }
.stat-circle__number--white { color: var(--color-white); font-size: 48px; }
.stat-circle__label { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--color-text-secondary); }
.stat-circle__label--white { color: var(--color-white); }
.stat-circle__sublabel { font-family: var(--font-body); font-size: 8px; color: var(--color-text-muted); max-width: 200px; }
.stat-circle__icon { width: 90px; margin-top: 8px; }
.stat-circle__icon--globe { width: 100px; }
.stat-circle__chips { width: 200px; margin-bottom: 8px; }
.stat-circle__icon,
.stat-circle__chips {
  transition: transform .35s ease;
}
.stat-circle:hover .stat-circle__icon,
.stat-circle:hover .stat-circle__chips {
  transform: scale(1.12) rotate(-6deg);
}
.stat-circle__number {
  transition: transform .35s ease;
  display: inline-block;
}
.stat-circle:hover .stat-circle__number {
  transform: scale(1.08);
}
.stat-circle--photo img {
  transition: transform .5s ease;
}
.stat-circle--photo:hover img {
  transform: scale(1.15);
}

/* ==========================================================================
   PRODUCT CATEGORIES (dark)
   ========================================================================== */
.product-categories {
  position: relative;
  background: linear-gradient(180deg, #f2f2f3 0px, #f2f2f3 40px, var(--color-text) 500px);
  padding: 240px 0 100px;
  overflow: hidden;
}
.product-categories__bg {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 950px;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
.product-categories .container { position: relative; z-index: 1; }
.product-categories__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.product-categories .eyebrow { margin-bottom: 30px; }
.product-categories__title { line-height: 1.15; }
.product-categories__intro { font-family: var(--font-body); font-size: var(--fs-18); color: #e8e8e8; max-width: 289px; }

.product-cards { display: flex; flex-direction: column; gap: 30px; }
.product-card {
  display: block;
  background: var(--color-dark-product-card);
  border: 1px solid var(--color-stroke-dark);
  border-radius: 12px;
  padding: 21px;
  box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.product-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.product-card__dot { width: 16px; height: 16px; background: var(--color-primary-green); flex-shrink: 0; }
.product-card__head h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-31_2); color: var(--color-white); }
.product-card__img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }
.product-card__body { font-family: var(--font-body); font-size: var(--fs-18); line-height: var(--lh-23_4); color: #e8e8e8; margin-bottom: 8px; max-width: 720px; }
.product-card__specs { display: flex; flex-direction: column; }
.product-card__specs > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--color-stroke-dark);
  font-family: var(--font-body); font-size: var(--fs-14);
}
.product-card__specs > div:last-child { border-bottom: none; }
.product-card__specs dt { color: #e8e8e8; font-weight: 500; }
.product-card__specs dd { color: var(--color-white); font-weight: 500; margin: 0; text-align: right; }
.product-cards__row { display: flex; gap: 30px; }
.product-cards__row .product-card { flex: 1; }

.product-categories__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 64px;
}
.product-categories__cta-text {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-42);
  line-height: 55px; color: var(--color-white); max-width: 613px;
}
.product-categories__cta-buttons { display: flex; flex-direction: column; gap: 24px; align-items: stretch; width: 224px; }

/* ==========================================================================
   PRODUCTION CAPACITY
   ========================================================================== */
.capacity { padding: 100px 10px; background: linear-gradient(to bottom, rgba(5,129,65,0), rgba(5,129,65,.04)); }
.capacity__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; }
.capacity__inner .eyebrow { align-self: center; }
.capacity__title { text-align: center; }
.capacity-group { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; }
.capacity-group + .capacity-group { margin-top: 60px; }
.capacity-group__label {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-stroke);
  border-radius: 8px;
  padding: 8px 48px;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-28);
  color: var(--color-primary-green); text-transform: uppercase;
}
.capacity-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1292px; }
.capacity-grid__row { display: flex; gap: 24px; }
.capacity-grid__row--2 > .capacity-card { flex: 1 1 0; }
.capacity-grid__row--3 > .capacity-card { flex: 1 1 0; }
.capacity-card {
  position: relative;
  margin: 0;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
}
.capacity-card img { width: 100%; height: 100%; object-fit: cover; }
.capacity-card__tag {
  position: absolute; top: 0; right: 0;
  background: var(--color-white);
  padding: 16px 20px;
  border-radius: 0 0 0 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 32px;
  color: var(--color-text-secondary);
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.capacity-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--color-stroke);
  padding: 20px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-18);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ==========================================================================
   TESTIMONIALS + CERTIFICATIONS
   ========================================================================== */
.testimonials { background: var(--color-section-divider); padding: 60px 0 0; overflow: hidden; }
.testimonials__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.testimonials__inner .eyebrow { align-self: center; }
.testimonials__title { text-align: center; font-weight: 600; font-size: var(--fs-48); line-height: 62px; }
.testimonials__subtitle { font-family: var(--font-body); font-size: var(--fs-18); color: var(--color-text-secondary); margin-top: -8px; }

.testimonial-track { position: relative; width: 100%; min-height: 260px; padding-bottom: 60px; }
.testimonial-card {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  background: var(--color-white);
  border: 1px solid rgba(159,159,169,.2);
  border-radius: 30px 10px 30px 10px;
  padding: 46px 32px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 520px;
  min-height: 260px;
  text-align: center;
  opacity: .65;
  transform: translateX(calc(-50% - 536px)) scale(.92);
  transition: transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.5s ease, box-shadow 0.5s ease;
  z-index: 1;
}
.testimonial-card.slot-left { transform: translateX(calc(-50% - 536px)) scale(.92); }
.testimonial-card.slot-right { transform: translateX(calc(-50% + 536px)) scale(.92); }
.testimonial-card.slot-center {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  z-index: 2;
  border-color: rgba(159,159,169,.3);
  box-shadow: 0 30px 60px -24px rgba(5,129,65,.2), 0 14px 28px -10px rgba(24,24,27,.1);
}
.testimonial-card__quote-row { display: flex; align-items: flex-start; justify-content: center; gap: 16px; width: 100%; }
.testimonial-card__quote { width: 54px; height: auto; flex-shrink: 0; }
.testimonial-card__quote--close { align-self: flex-end; }
.testimonial-card p { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); line-height: 1.55; color: var(--color-text-secondary); margin: 0; width: 100%; }
.testimonial-card footer { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; }
.testimonial-card cite { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-14); color: var(--color-primary-green); }
.testimonial-card footer span { font-family: var(--font-body); font-size: 10px; color: #8c8c8c; }

.cert-strip { margin-top: 50px; padding: 60px 0; background: var(--color-white); border-top: 1px solid var(--color-stroke); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.cert-strip__eyebrow { align-self: center; }
.cert-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.cert-marquee__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: cert-scroll 32s linear infinite;
}
.cert-marquee:hover .cert-marquee__track { animation-play-state: paused; }
.cert-marquee__track img { height: 72px; width: auto; flex-shrink: 0; }
@keyframes cert-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding: 100px 0; }
.contact__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: nowrap; }
.contact__info { display: flex; flex-direction: column; gap: 48px; max-width: 690px; flex: 1 1 690px; min-width: 0; }
.contact__info .eyebrow { margin-bottom: 30px; }
.contact__title { max-width: 633px; }
.contact__subtitle { font-family: var(--font-body); font-size: var(--fs-18); color: var(--color-text-secondary); margin-top: 30px; }

.office-card {
  display: flex;
  border: 1px solid var(--color-stroke);
  border-radius: 8px;
  padding: 40px 32px;
  gap: 36px;
}
.office-card__divider { width: 1px; background: var(--color-stroke); align-self: stretch; }
.office-card__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; flex: 1; }
.office-card__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-primary-green); }
.office-card__company { margin-top: -12px; align-self: flex-start; font-weight: 600; color: var(--color-text-secondary); max-width: 100%; white-space: normal; text-align: left; }
.office-card__list { display: flex; flex-direction: column; gap: 24px; }
.office-card__list li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-23_4); color: var(--color-text-secondary); text-wrap: pretty; }
.office-card__list svg { width: 20px; height: 20px; flex-shrink: 0; }

.contact-form {
  background: var(--color-white);
  border: 0.75px solid var(--color-stroke);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 620px;
  flex: 1 1 620px;
  min-width: 0;
}
.contact-form__row { display: flex; gap: 30px; }
.contact-form__row label, .contact-form__full { flex: 1; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); font-size: var(--fs-18); color: var(--color-text-secondary); }
.req { color: var(--color-accent-red); font-weight: 700; }
.contact-form input, .contact-form textarea {
  background: var(--color-placeholder-fill);
  border: 0.75px solid var(--color-stroke);
  border-radius: 4px;
  padding: 0 14px;
  height: 50px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}
.contact-form textarea { height: 137px; padding: 12px 14px; resize: vertical; font-family: var(--font-body); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--color-primary-green); outline-offset: 1px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-footer-green); padding-top: 100px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 160px) minmax(0, 160px) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 36px;
}
.footer-col--newsletter { display: flex; flex-direction: column; gap: 56px; }
.footer-newsletter__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-48); line-height: 1; color: var(--color-white); margin-bottom: 24px; }
.footer-newsletter__body { font-family: var(--font-body); font-size: 16px; line-height: var(--lh-23_4); color: rgba(255,255,255,.5); }
.newsletter-form {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(9,9,11,.3);
  border: 0.75px solid rgba(24,24,27,.5);
  border-radius: 12px;
  padding: 10px 10px 10px 16px;
  margin-top: 24px;
}
.newsletter-form input { flex: 1; background: none; border: none; color: rgba(255,255,255,.8); font-family: var(--font-body); font-size: var(--fs-14); outline: none; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter-form button { background: var(--color-white); border-radius: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.newsletter-form__note { font-family: var(--font-body); font-size: var(--fs-14); color: rgba(255,255,255,.5); margin-top: 12px; }
.social-row { display: flex; gap: 24px; margin-top: 8px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-family: var(--font-body); font-size: var(--fs-14); }

.footer-col__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--color-white); margin-bottom: 30px; }
.footer-links { display: flex; flex-direction: column; gap: 16px; }
.footer-links a { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: rgba(255,255,255,.6); }
.footer-links--muted a { color: rgba(255,255,255,.5); }

.footer-col--offices { display: flex; flex-direction: column; gap: 36px; }
.footer-office { display: flex; flex-direction: column; gap: 20px; }
.footer-office__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--color-white); }
.footer-office__company { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-primary-green); margin: -12px 0 0; }
.footer-office__list { display: flex; flex-direction: column; gap: 24px; }
.footer-office__list li { display: flex; gap: 16px; align-items: flex-start; font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-23_4); color: rgba(255,255,255,.5); }
.footer-office__list svg { width: 24px; height: 24px; flex-shrink: 0; }

.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-body); font-size: var(--fs-14); color: rgba(255,255,255,.5);
}
.back-to-top { padding: 12px 20px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   SCROLL-TO-TOP BUTTON (fixed bottom-right, ring fills green with scroll
   progress; hidden until the user has scrolled past the hero)
   ========================================================================== */
.scroll-top-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.scroll-top-btn--visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-top-btn__ring-track { fill: none; stroke: #e5e5e5; stroke-width: 3; }
.scroll-top-btn__ring-progress {
  fill: none;
  stroke: var(--color-primary-green);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}
.scroll-top-btn__arrow { position: relative; z-index: 1; width: 18px; height: 18px; color: var(--color-text); }
@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn { transition: opacity .01s linear; }
  .scroll-top-btn__ring-progress { transition: none; }
}
.footer-credit { padding: 5px 12px; }

/* ==========================================================================
   RESPONSIVE (mobile-first pragmatic breakpoints)
   ========================================================================== */
/* .stat-circles gets its own, wider breakpoint: at full size the row of 4
   circles (1240px) is already right at the container's max content width
   (1340px container - 100px padding = 1240px), so waiting until 1100px to
   wrap left it bleeding past the container edge on common laptop widths.
   Wrapping at 1340px keeps it inside the container at every width. */
@media (max-width: 1340px) {
  .stat-circles { flex-wrap: wrap; gap: 24px; }
  .stat-circle { margin-left: 0 !important; }
}
@media (max-width: 1100px) {
  .main-nav { flex-wrap: wrap; gap: 16px; padding: 16px 24px; }
  .topbar__inner { padding: 8px 24px; gap: 20px; }
  .hero__content { padding: 0 24px; }
  .hero__footer { padding: 0 24px; }
  .main-nav .btn { position: static; transform: none; }
  .nav-pill { flex-wrap: wrap; }
  .mfg-overview__grid { flex-direction: column; gap: 30px; }
  .product-cards__row { flex-direction: column; }
  .process-row { grid-template-columns: 1fr; top: 90px; }
  .capacity-grid__row { flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .testimonial-card:not(.slot-center) { display: none; }
  .testimonial-card { width: calc(100% - 48px); max-width: 480px; padding: 30px 24px; }
  .testimonial-card p { width: 100%; max-width: none; }
  .contact__inner { flex-direction: column; }
  .office-card { flex-direction: column; }
  .office-card__divider { display: none; }
}
@media (min-width: 641px) and (max-width: 1240px) {
  /* Between the 640px and ~1240px breakpoints, "Sourcing & Production
     Partner" no longer fits the hero title's default 58px size on one
     line -- it wraps onto a 3rd visual line, which grows the title tall
     enough to collide with the divider/subtitle block below it. Drop to
     the same size already used at <=640px so it stays on one line and
     the divider sits cleanly below the heading again. */
  .hero__title { font-size: 30px; }
}
@media (max-width: 700px) {
  .contact-form__row { flex-direction: column; }
}
@media (max-width: 640px) {
  .hero__content { padding: 0 24px; align-items: center; text-align: center; }
  .hero__footer { padding: 0 24px; bottom: 24px; align-items: center; text-align: center; }
  .hero__bottom-row { flex-direction: column; align-items: center; text-align: center; }
  .hero__subtitle { max-width: 100%; }
  .hero__title { font-size: 32px; }
  .section-heading { font-size: 32px; line-height: 1.3; }
  .tagline-row { flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .topbar { display: none; }
  .scroll-top-btn { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .scroll-top-btn__arrow { width: 16px; height: 16px; }
}


/* ============================================================
   Site Enhancements -- contact form styling, hover polish,
   capacity-card hover overlay, testimonial slider, scroll reveal
   ============================================================ */

/* Contact form (Contact Form 7) polish */
/* CF7 wraps the whole form in its own .wpcf7 div, which breaks the
   intended `.contact-form { gap: 30px }` row spacing (that gap only
   ever applied to a single wrapper child). Restore even spacing between
   each field group (First/Last, Email/Company, Subject/Message) here. */
.contact-form .wpcf7-form > .contact-form__row {
  margin-bottom: 30px;
}
/* Same CF7-wrapping issue narrows the row fields themselves: inside a
   flex row, that lone <p> sizes to its content (driven by the input's
   HTML `size` attribute) instead of stretching full width, so First
   name/Last name/Email/Company render narrower than Subject/Message. */
.contact-form__row > p {
  width: 100%;
}
.contact-form .wpcf7-form-control {
  width: 100%;
  border: 1px solid rgba(159, 159, 169, 0.35);
  border-radius: 10px;
  background: #f7f7f7;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.contact-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.contact-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-primary-green);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(5, 129, 65, 0.12);
}
.contact-form .btn-primary-pill {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--color-primary-green);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 17px 50px;
  width: 100%;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-form .btn-primary-pill:hover {
  background: var(--color-primary-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(5, 129, 65, 0.28);
}

/* Capacity card hover overlay */
.capacity-card__tag,
.capacity-card figcaption {
  z-index: 2;
}
.capacity-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,129,65,0.12) 0%, rgba(5,129,65,0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.capacity-card:hover::after { opacity: 1; }
.capacity-card img { transition: transform 0.6s ease; }
.capacity-card:hover img { transform: scale(1.07); }

/* General button / interactive hover polish */
.btn, .btn-outline {
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover, .btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.btn__icon { transition: transform .4s ease; }
.btn__icon svg { transition: transform .4s ease; }
.btn:hover .btn__icon { transform: rotate(360deg); }
.btn:hover .btn__icon svg { transform: rotate(-360deg); }

/* "Arrow travels"-style hover for the dark pill CTAs (Contact Us, hero
   buttons, etc.): the arrow slides out to the top-right while a fresh
   copy slides in from the bottom-left, inside the same fixed icon
   circle. Two stacked copies of the arrow SVG swap position/opacity on
   hover -- overrides the generic icon-spin hover above for .btn--dark
   specifically, so the two effects don't compete. */
.btn--dark .btn__icon { overflow: hidden; }
.btn--dark:hover .btn__icon { transform: none; }
.btn--dark .arrow-stack { position: relative; width: 24px; height: 24px; }
.btn--dark .arrow-stack svg {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .4s ease;
}
.btn--dark .arrow-out { transform: translate(0, 0); opacity: 1; }
.btn--dark .arrow-in { transform: translate(-16px, 16px); opacity: 0; }
.btn--dark:hover .arrow-out { transform: translate(16px, -16px); opacity: 0; }
.btn--dark:hover .arrow-in { transform: translate(0, 0); opacity: 1; }

.nav-link { transition: color .25s ease, background-color .25s ease; }
.nav-link:hover { color: var(--color-primary-green); background: rgba(5, 129, 65, .08); }

/* Lenis smooth scroll -- standard boilerplate the library expects */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scroll-reveal (progressive enhancement -- content stays visible if JS is blocked) */
.sga-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.sga-reveal.sga-reveal--visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sga-reveal, .sga-reveal.sga-reveal--visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}