@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6,
  .eyebrow,
  [class*="-title"] {
    word-spacing: 0.14em !important;
  }
}

@media (min-width: 1024px) and (max-width: 1599px) {
  .secondary-page :is(
    .about-hero,
    .markets-hero,
    .sustainability-hero,
    .cotton-hero,
    .us-cotton-hero,
    .sourcing-origins-hero,
    .quality-hero,
    .spinning-mills-hero,
    .partners-hero,
    .supply-chain-hero,
    .contact-hero
  ) {
    min-height: 0 !important;
    padding-top: 125px !important;
    padding-bottom: 35px !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}

.secondary-page :is(
  .about-hero,
  .markets-hero,
  .sustainability-hero,
  .cotton-hero,
  .us-cotton-hero,
  .sourcing-origins-hero,
  .quality-hero,
  .spinning-mills-hero,
  .partners-hero,
  .supply-chain-hero,
  .contact-hero
) h1,
.secondary-page :is(
  .about-section-heading,
  .responsibility-heading,
  .future-markets,
  .contact-details
) h2,
.secondary-page :is(
  .markets-cta-panel,
  .sustainability-cta-panel
) h2 {
  font-size: clamp(3.2rem, 6.5vw, 7rem);
  font-weight: 300;
}

.secondary-page :is(
  .about-hero-inner,
  .markets-hero-inner,
  .sustainability-hero-inner,
  .cotton-hero-inner,
  .us-cotton-hero-inner,
  .sourcing-origins-hero-inner,
  .quality-hero-inner,
  .spinning-mills-hero-inner,
  .partners-hero-inner,
  .supply-chain-hero-inner,
  .contact-hero-inner
) > p:last-child,
.secondary-page :is(
  .about-section-heading,
  .responsibility-heading
) > p:last-child:not(.eyebrow),
.secondary-page .responsibility-intro,
.secondary-page .future-markets-lead,
.secondary-page :is(
  .markets-cta-panel,
  .sustainability-cta-panel
) > p:not(.eyebrow) {
  font-size: clamp(1.16rem, 1.25vw, 1.48rem);
  font-weight: 400;
}

.secondary-page .company-copy {
  font-size: clamp(1.16rem, 1.25vw, 1.48rem);
  font-weight: 400;
}

.secondary-page .company-emphasis {
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-weight: 700;
}

.secondary-page .mission-vision-row h2 {
  font-size: clamp(3.3rem, 5vw, 5.2rem);
  font-weight: 500;
}

.secondary-page .mission-vision-row p {
  font-size: clamp(0.98rem, 1.22vw, 1.25rem);
  font-weight: 400;
}

.secondary-page :is(
  .principle,
  .sustainability-theme
) h3 {
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  font-weight: 600;
}

.secondary-page :is(
  .principle,
  .sustainability-theme
) p {
  font-size: clamp(0.95rem, 1.15vw, 1.28rem);
  font-weight: 400;
}

.secondary-page :is(
  .principle-number,
  .theme-number
) {
  font-weight: 700;
}

.secondary-page .core-market-header h2 {
  font-size: clamp(2.4rem, 3vw, 3.8rem);
  font-weight: 700;
}

.secondary-page .core-market-header p {
  font-size: 1.4rem;
  font-weight: 300;
}

.secondary-page .core-market-copy {
  font-size: clamp(1.18rem, 1.35vw, 1.42rem);
  font-weight: 300;
}

.secondary-page .future-market-pills li {
  font-size: clamp(1.1rem, 1.15vw, 1.25rem);
  font-weight: 300;
}

.secondary-page .future-markets-note {
  font-size: clamp(0.96rem, 1.2vw, 1.35rem);
  font-weight: 300;
}

@media (min-width: 1024px) {
  .secondary-page :is(
    .about-hero,
    .markets-hero,
    .sustainability-hero,
    .cotton-hero,
    .us-cotton-hero,
    .sourcing-origins-hero,
    .quality-hero,
    .spinning-mills-hero,
    .partners-hero,
    .supply-chain-hero,
    .contact-hero
  ) h1,
  .secondary-page :is(
    .about-section-heading,
    .responsibility-heading,
    .future-markets,
    .contact-details
  ) h2,
  .secondary-page :is(
    .markets-cta-panel,
    .sustainability-cta-panel
  ) h2 {
    font-size: clamp(2.2rem, 3.8vw, 5.2rem);
  }
}

@media (max-width: 599px) {
  .secondary-page :is(
    .about-hero,
    .markets-hero,
    .sustainability-hero,
    .cotton-hero,
    .us-cotton-hero,
    .sourcing-origins-hero,
    .quality-hero,
    .spinning-mills-hero,
    .partners-hero,
    .supply-chain-hero,
    .contact-hero
  ) h1,
  .secondary-page :is(
    .about-section-heading,
    .responsibility-heading,
    .future-markets,
    .contact-details
  ) h2,
  .secondary-page :is(
    .markets-cta-panel,
    .sustainability-cta-panel
  ) h2 {
    font-size: 3.45rem;
  }

  .secondary-page .mission-vision-row h2 {
    font-size: 3.2rem;
  }

  .secondary-page .mission-vision-row p {
    font-size: 0.95rem;
  }

  .secondary-page .core-market-header h2 {
    font-size: 2.4rem;
  }

  .secondary-page .core-market-header p {
    font-size: 1rem;
  }
}

/* Standard Non-Button Pill Styling & Normal Hover Effects */
:is(.origin-pills span, .future-market-pills li, .quality-document-list li, .mill-evaluation-list li, .pill, [class*="-pills"] span, [class*="-pills"] li, [class*="-pill"] span, [class*="-pill"] li) {
  position: relative !important;
  overflow: hidden !important;
  cursor: default !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

:is(.origin-pills span, .future-market-pills li, .quality-document-list li, .mill-evaluation-list li, .pill, [class*="-pills"] span, [class*="-pills"] li, [class*="-pill"] span, [class*="-pill"] li)::after {
  display: none !important;
}

:is(.origin-pills span, .future-market-pills li, .quality-document-list li, .mill-evaluation-list li, .pill, [class*="-pills"] span, [class*="-pills"] li, [class*="-pill"] span, [class*="-pill"] li):hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* ==========================================================================
   Universal Subtle Card & Element Hover System (Secondary Pages)
   ========================================================================== */
:is(
  .market-card,
  .core-market-card,
  .supply-step-card,
  .journey-card,
  .cotton-category-card,
  .sustainability-pillar,
  .pillar-card,
  .about-card,
  .team-card,
  .milestone-card,
  .value-box,
  .solution-card,
  .spinning-mills-card,
  .origin-card,
  .quality-card,
  .spec-card,
  .partner-card,
  .supplier-card,
  .contact-card,
  .office-card
) {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
}

:is(
  .market-card,
  .core-market-card,
  .supply-step-card,
  .journey-card,
  .cotton-category-card,
  .sustainability-pillar,
  .pillar-card,
  .about-card,
  .team-card,
  .milestone-card,
  .value-box,
  .solution-card,
  .spinning-mills-card,
  .origin-card,
  .quality-card,
  .spec-card,
  .partner-card,
  .supplier-card,
  .contact-card,
  .office-card
):hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(6, 52, 91, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}