/* ==========================================================================
   Synergy Textile Group — About Page
   Design tokens extracted 1:1 from Figma file LUQluXysfVv3eKBTVwu7HP
   node 1104:20372 "About Page"
   Shared tokens (colors, fonts, .container, .eyebrow, .btn, .section-heading)
   come from style.css — this file holds About-page-only sections.
   ========================================================================== */

/* ---- placeholder-block shared look (matches homepage "PHOTO NEEDED" pattern) ---- */
.apparel-card__img--needed,
span.ecosystem-card__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,.75);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px);
  border: 1px dashed rgba(255,255,255,.35);
}
img.ecosystem-card__illustration {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 12px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.about-hero { background: var(--color-white); padding: 100px 48px; }
.about-hero__inner { max-width: 1340px; display: flex; flex-direction: column; gap: 48px; }
.about-hero__heading { display: flex; flex-direction: column; gap: 30px; }
.about-hero__title { max-width: 1000px; }
.about-hero__body { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.about-hero__text { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: var(--color-text-secondary); max-width: 1246px; }
.about-hero__media { position: relative; width: 100%; height: 566px; border-radius: 8px; overflow: hidden; }
.about-hero__media img,
.about-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.about-hero__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, opacity .3s ease;
  z-index: 2;
}
.about-hero__play svg { width: 30px; height: 30px; color: var(--color-primary-green); margin-left: 4px; }
.about-hero__play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--color-white); }
.about-hero__media--playing .about-hero__play { opacity: 0; pointer-events: none; }

/* ==========================================================================
   OUR STORY
   ========================================================================== */
.our-story { background: var(--color-section-divider); padding: 100px 0; }
.our-story__inner { display: flex; flex-direction: column; gap: 30px; }
.our-story__grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }
.our-story__text { display: flex; flex-direction: column; gap: 30px; max-width: 690px; }
.our-story__text h2 { max-width: 565px; }
.our-story__text p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: var(--color-text-secondary); margin: 0; }
.our-story__text strong { color: var(--color-text); font-weight: 600; }
.story-stats { display: flex; flex-direction: column; width: 460px; flex-shrink: 0; border-top: 1px solid rgba(0,0,0,.2); align-self: center; }
.story-stats__row { display: flex; align-items: center; gap: 24px; padding: 40px 0; border-bottom: 1px solid rgba(0,0,0,.2); }
.story-stats__number { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-48); line-height: 1; color: var(--color-primary-green); width: 180px; flex-shrink: 0; }
.story-stats__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-24); color: var(--color-text-secondary); }

/* ==========================================================================
   INTERNATIONAL RETAIL PARTNERSHIPS (compliance circle)
   ========================================================================== */
.compliance { background: var(--color-white); padding: 100px 0; }
.compliance__inner { display: flex; flex-direction: column; gap: 100px; }
.compliance__head { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.compliance__heading-text { display: flex; flex-direction: column; gap: 30px; max-width: 797px; }
.compliance__heading-text p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: var(--color-text-secondary); margin: 0; }

/* Extra scroll distance for the interactive stepper below: the circle +
   text panel pin in place (position: sticky) while this taller track
   scrolls past them, so scrolling through it advances the active step.
   See sga_enhancements_script() in functions.php for the JS that drives
   it and the click-to-jump behaviour on the ring's mini nodes. */
.compliance__scroll-track { position: relative; height: 500vh; }

.compliance__diagram-row {
  position: sticky;
  top: 130px;
  display: flex; align-items: center; gap: 100px; flex-wrap: wrap;
}

.compliance-circle {
  position: relative;
  width: 420px; height: 420px;
  margin: 90px 110px;
  flex-shrink: 0;
}
.compliance-circle__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.compliance-circle__arc {
  /* Acts as a progress ring, driven by JS (sga_enhancements_script() in
     functions.php): stroke-dasharray is set to the full circumference and
     stroke-dashoffset is set per active step, so no line is visible at
     step 1 (just the highlighted node) and the stroke grows clockwise by
     one more 60deg segment per step after that, reaching Retail-to-Global
     (5 segments) at step 6. The values below match step 1 (dashoffset ==
     dasharray, i.e. a zero-length stroke) so there's no flash of a
     visible arc before JS runs. Rotated -120deg (not the "12 o'clock"
     -90deg) so the stroke's leading edge starts exactly at the Retail
     Group node, which sits 30deg before 12 o'clock -- the 6 nodes are
     spaced every 60deg starting there, so each step's fill lands
     edge-to-edge on the next node instead of drifting into empty space
     above it. */
  stroke-dasharray: 1306.9;
  stroke-dashoffset: 1306.9;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(-120deg);
  transition: stroke-dashoffset .6s ease;
}
.compliance-circle__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  white-space: nowrap;
  /* Each node is a <button> (was a plain div) so it's a real, keyboard-
     reachable control -- reset the button chrome back to plain text. */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* The dot always sits exactly on the circle at its left/top anchor point;
   the label flows outward from it instead of the whole (dot + label) group
   being centered on the anchor -- long labels (e.g. "Product Safety &
   Sustainability") were otherwise dragging their dot sideways, off the
   ring and into the neighbouring node's label, looking like a stray
   second dot. Nodes whose label reads before the dot (row-reverse, so the
   dot is the right-hand child) need the box's right edge -- not centre --
   pinned to the anchor. */
.compliance-circle__node--2,
.compliance-circle__node--3,
.compliance-circle__node--4 {
  /* dot is the first (leading) child -- shift left by half the dot's own
     width so the dot's centre, not its left edge, lands on the anchor */
  transform: translate(-7px, -50%);
}
.compliance-circle__node--1,
.compliance-circle__node--5,
.compliance-circle__node--6 {
  /* row-reverse: dot is the trailing (right-hand) child -- pin the box's
     right edge to the anchor, then nudge right by half the dot's width so
     the dot's centre lands exactly on it */
  transform: translate(calc(-100% + 7px), -50%);
}
.compliance-circle__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary-green); flex-shrink: 0; transition: transform .3s ease, box-shadow .3s ease; }
.compliance-circle__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-text); transition: color .3s ease; }

/* Active step (default: Retail Group) -- highlights the matching dot and
   label so the ring visibly shows which item the text panel is on. */
.compliance-circle__node.is-active .compliance-circle__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(5, 129, 65, .18);
}
.compliance-circle__node.is-active .compliance-circle__label {
  color: var(--color-primary-green);
  font-weight: 600;
}

.compliance-circle__node--1 { left: 25%; top: 6.7%; flex-direction: row-reverse; }
.compliance-circle__node--2 { left: 75%; top: 6.7%; }
.compliance-circle__node--3 { left: 100%; top: 50%; }
.compliance-circle__node--4 { left: 75%; top: 93.3%; }
.compliance-circle__node--5 { left: 25%; top: 93.3%; flex-direction: row-reverse; }
.compliance-circle__node--6 { left: 0%; top: 50%; flex-direction: row-reverse; }

.compliance-detail-list {
  position: relative;
  flex: 1;
  min-width: 320px;
  min-height: 200px;
  padding-left: 48px;
  border-left: 1px solid var(--color-stroke);
}
.compliance-detail {
  position: absolute;
  top: 0; left: 48px; right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.compliance-detail.is-active {
  opacity: 1;
  pointer-events: auto;
}
.compliance-detail h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-18); color: var(--color-text); margin: 0 0 16px; }
.compliance-detail__sub { font-family: var(--font-body); font-size: var(--fs-18); color: var(--color-text); margin: 0 0 12px; }
.compliance-detail p:not(.compliance-detail__sub) { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); line-height: 24px; color: var(--color-text-secondary); margin: 0; }
.compliance-detail strong { color: var(--color-text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .compliance-circle__arc,
  .compliance-detail,
  .compliance-circle__dot,
  .compliance-circle__label {
    transition: none;
  }
}

/* ==========================================================================
   APPAREL CATEGORIES (carousel)
   ========================================================================== */
.apparel { background: var(--color-white); padding: 100px 0; }
.apparel__head { display: flex; flex-direction: column; gap: 30px; margin-bottom: 56px; }
.apparel__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.apparel__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-48); line-height: 60px; color: var(--color-primary-green); margin: 0; }
.apparel__subtitle { font-family: var(--font-body); font-size: var(--fs-18); color: var(--color-text); margin: 0; }

.apparel__nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.apparel__all { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-text); }
.apparel__arrows { display: flex; gap: 16px; }
.apparel__arrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-text); background: none; border: none; cursor: pointer; padding: 0; }
.apparel__arrow[disabled] { color: var(--color-text-muted); cursor: default; }

.apparel-track-viewport {
  overflow: hidden;
  margin-bottom: 56px;
}
.apparel-track {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.apparel-track::-webkit-scrollbar { display: none; }
.apparel-card { flex-shrink: 0; width: 292px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 20px; }
/* Frame clips the zoomed image to its original rounded-corner footprint on
   hover, instead of the scaled-up photo spilling past its own corners or
   covering the label below it. */
.apparel-card__frame { display: block; overflow: hidden; border-radius: 8px; width: 292px; height: 461px; }
.apparel-card__img { display: block; width: 100%; height: 100%; background: var(--color-product-image-bg); object-fit: cover; transition: transform .5s ease; }
.apparel-card:hover .apparel-card__img { transform: scale(1.07); }
.apparel-card__img--needed { font-size: 13px; }
.apparel-card__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-14); color: var(--color-text); }

.apparel__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.apparel__footer-text { max-width: 730px; }

/* ==========================================================================
   PRODUCTION ECOSYSTEM
   ========================================================================== */
.ecosystem { background: #f2f2f3; padding: 100px 0; }
.ecosystem .eyebrow { margin-bottom: 30px; }
.ecosystem__heading { display: flex; flex-direction: column; gap: 30px; max-width: 905px; margin-bottom: 56px; }
.ecosystem__heading p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: var(--color-text-secondary); margin: 0; }

.ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ecosystem-card {
  background: var(--color-white);
  border: 1px solid var(--color-stroke);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ecosystem-card__illustration { height: 180px; border-radius: 8px; font-size: 11px; }
.ecosystem-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: 1.2; color: var(--color-text); margin: 0; }
.ecosystem-card ul { display: flex; flex-direction: column; gap: 8px; }
.ecosystem-card li { font-family: var(--font-body); font-size: var(--fs-14); line-height: 22px; color: var(--color-text-secondary); padding-left: 14px; position: relative; }
.ecosystem-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary-green); }

/* ==========================================================================
   RETAIL & BRAND EXPOSURE
   ========================================================================== */
.brand-logos { background: var(--color-white); padding: 100px 50px; }
.brand-logos .container { padding: 0; max-width: 1340px; }
.brand-logos__head { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-bottom: 72px; }
.brand-logos__heading-text { display: flex; flex-direction: column; gap: 16px; }
.brand-logos__heading-text h2 { white-space: nowrap; }
.brand-logos__heading-text p { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); color: var(--color-text); margin: 0; }

.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-stroke);
  border-left: 1px solid var(--color-stroke);
}
.brand-logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px;
  padding: 24px;
  border-right: 1px solid var(--color-stroke);
  border-bottom: 1px solid var(--color-stroke);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .02em;
  text-align: center;
}
.brand-logo img { max-height: 36px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
.brand-logo--schwarz { font-family: Arial, sans-serif; color: #6b6b6b; letter-spacing: .03em; }
.brand-logo--house { font-family: Georgia, serif; font-style: italic; font-weight: 800; font-size: 26px; }
.brand-logo--uspa { font-family: 'Times New Roman', serif; font-size: 15px; letter-spacing: .12em; }
.brand-logo--reserved { font-family: Arial, sans-serif; font-weight: 500; letter-spacing: .28em; font-size: 18px; }
.brand-logo--vanheusen { font-family: Georgia, serif; font-style: italic; }
.brand-logo--sinsay { font-family: Arial, sans-serif; font-weight: 700; text-transform: lowercase; font-size: 24px; }
.brand-logo--cropp { font-family: Arial, sans-serif; font-weight: 800; letter-spacing: .04em; }
.brand-logo--lucky { font-family: Georgia, serif; font-weight: 800; font-size: 19px; }
.brand-logo--lucky em { font-style: normal; }
.brand-logo--reebok { font-family: Arial, sans-serif; font-weight: 700; font-style: italic; }
.brand-logo--izod { font-family: 'Times New Roman', serif; letter-spacing: .18em; font-size: 20px; }
.brand-logo--champion { font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.brand-logo--rikiki { font-family: Arial, sans-serif; font-weight: 800; letter-spacing: .02em; }

/* ==========================================================================
   RESPONSIBLE MANUFACTURING
   ========================================================================== */
.responsible { background: var(--color-text); padding: 100px 0; position: relative; overflow: hidden; }
.responsible__watermark {
  position: absolute;
  top: -140px;
  right: -90px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .25;
}
.responsible > .container { position: relative; z-index: 1; }
.responsible__heading { display: flex; flex-direction: column; gap: 30px; max-width: 905px; margin-bottom: 68px; }
.responsible__heading p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: #bebebe; margin: 0; }

.responsible-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.responsible-card {
  background: rgba(63,63,70,.2);
  border: 1px solid #52525c;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.responsible-card__icon {
  display: block;
  width: 40px; height: 40px;
  object-fit: contain;
}
.responsible-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: 1.2; color: var(--color-white); margin: 0 0 12px; }
.responsible-card p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: #bebebe; margin: 0; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.about-cta { position: relative; padding: 100px 50px; overflow: hidden; background: var(--color-text); }
.about-cta__bg { position: absolute; inset: 0; overflow: hidden; }
.about-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.about-cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(0,0,0,.6) 73%, rgba(0,0,0,.75) 100%);
  mix-blend-mode: multiply;
}
.about-cta__inner { position: relative; display: flex; align-items: center; gap: 100px; }
.about-cta__photo { width: 560px; height: 470px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.about-cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-cta__content { display: flex; flex-direction: column; gap: 48px; max-width: 680px; }
.about-cta__content p { font-family: var(--font-body); font-size: var(--fs-18); line-height: 30px; color: rgba(255,255,255,.85); margin: 0; }
.about-cta__btn { background: var(--color-white); color: var(--color-text); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .about-hero { padding: 60px 20px; }
  .about-hero__media { height: 320px; }
  .about-hero__media-label { font-size: 56px; }

  .our-story__grid { flex-direction: column; }
  .story-stats { width: 100%; align-self: stretch; }

  /* The scroll-driven progress stepper only engages when the track above
     is taller than the viewport -- collapsing it to auto height (and the
     pinned row back to normal flow) switches it off here, leaving plain
     click-to-jump on the nodes below. */
  .compliance__scroll-track { height: auto; }
  .compliance__diagram-row { position: static; top: auto; flex-direction: column; gap: 60px; }
  /* Below the two-column layout, the circular scatter diagram's fixed-size
     ring and outward-flowing nowrap labels no longer fit any container
     width -- collapse it to a simple vertical dot list (same 6 items,
     same order) instead of a circle. The scroll-driven progress behaviour
     (see sga_enhancements_script()) also switches off automatically here,
     since it only engages when the track is taller than the viewport --
     tapping a node still jumps straight to its text below. */
  .compliance-circle {
    width: auto;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .compliance-circle__ring { display: none; }
  .compliance-circle__node,
  .compliance-circle__node--1,
  .compliance-circle__node--2,
  .compliance-circle__node--3,
  .compliance-circle__node--4,
  .compliance-circle__node--5,
  .compliance-circle__node--6 {
    position: static;
    transform: none;
    flex-direction: row;
    white-space: normal;
  }
  .compliance-detail-list { padding-left: 0; border-left: none; width: 100%; }
  .compliance-detail { left: 0; }

  .apparel-card { width: 240px; }
  .apparel-card__frame { width: 240px; height: 380px; }

  .ecosystem-grid, .responsible-grid { grid-template-columns: repeat(2, 1fr); }

  .brand-logo-grid { grid-template-columns: repeat(2, 1fr); }

  .about-cta__inner { flex-direction: column; gap: 40px; }
  .about-cta__photo { width: 100%; height: 280px; }
}

@media (max-width: 640px) {
  .ecosystem-grid, .responsible-grid, .brand-logo-grid { grid-template-columns: 1fr; }
  .compliance__head, .brand-logos__head { flex-direction: column; }
  .story-stats__row { flex-wrap: wrap; }
  /* This heading is editable (ACF) -- allow it to wrap on narrow screens
     instead of forcing a single nowrap line that could overflow. */
  .brand-logos__heading-text h2 { white-space: normal; }
}