/* ============================================================
   NexChemical — home page
   Figma: Yd8ZeTmsOVdXZy64vXqLzE / node 1:184 (1280px design)
   ============================================================ */

:root {
  /* palette */
  --color-primary:       #005ca7;
  --color-primary-soft:  #1265a9;
  --color-page:          #f8faf8;
  --color-surface:       #f2f4f2;
  --color-ink:           #0f0f0f;
  --color-ink-soft:      #191c1b;
  --color-text:          #575757;
  --color-text-muted:    #979797;
  --color-nav-link:      #414752;
  --color-hero-fg:       #eceeec;
  --color-cta-fg:        #eff1ef;
  --color-card-border:   #dfdfdf;
  --color-card-border-2: #e0e3e1;
  --color-footer-dark:   #161b20;
  --color-green:         #059669;
  --color-green-deep:    #047857;

  /* type */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-heading: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-nav:     "Manrope", "Inter", sans-serif;
  --font-mono-caps: "Poppins", sans-serif;

  /* metrics */
  --radius-card: 12px;
  --page-pad: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-page);
  overflow-x: clip;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; }
button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }

.muted { color: var(--color-text-muted); }

/* ---------- shared: section heading ---------- */

.section-head__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.16;
  color: var(--color-ink);
}

.section-head__title--lg { font-size: 60px; line-height: 1.12; }

/* ---------- shared: buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.14px;
  padding: 17px 32px;
  white-space: nowrap;
  transition: filter .15s ease, background-color .15s ease;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-hero-fg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.btn--primary:hover { filter: brightness(1.12); }

.btn--sm { padding: 8px 24px; color: #fff; }

.btn--light {
  background: var(--color-hero-fg);
  border: 1px solid #e0e4e0;
  color: var(--color-ink-soft);
}
.btn--light:hover { background: #fff; }

.btn--outline {
  border: 1px solid #bfcaba;
  color: #fff;
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- shared: slider prev/next buttons ---------- */
/* Toggled by scroll-slider.js on any [data-slider-prev]/[data-slider-next]
   button once its track is scrolled all the way in that direction. Each
   component (.category-slider__btn, .about__nav-btn, ...) styles its own
   button appearance; this is just the shared disabled look. */
.slider-btn--disabled { opacity: 0.35; pointer-events: none; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* min-height (not height): fills the viewport on typical/tall screens
     without ever shrinking below what the content + padding below already
     need — a hard height:100vh would clip the CTA buttons (or the video)
     on a short viewport instead. */
  min-height: 100vh;
  /* top padding clears the fixed navbar (see navbar.css); bottom padding
     is taller than the 58px Figma-reference gap alone (827px rendered vs.
     885px in Figma) would need — the extra room is deliberate clearance
     for .about's negative margin-top, which pulls the highlight cards up
     to overlap this section. Measured: without the extra room the
     leftmost card cleared the CTA button by only ~13px. Extra viewport
     height beyond that (from min-height above) only adds more clearance,
     since the content itself stays pinned to the top padding — verified
     in the PR that added this rule. */
  padding: 176px var(--page-pad) 127px;
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -1;
}

/* --- hero content --- */

.hero__container {
  max-width: 1296px;
  width: 100%;
  margin-inline: auto;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 576px;
  max-width: 100%;
  padding-right: 48px;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
  color: var(--color-hero-fg);
  padding-top: 8px;
}

.hero__text {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-hero-fg);
  max-width: 26em;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0 40px;
}

/* ============================================================
   PARTNERS (looping logo strip, right below the hero)
   ============================================================ */

.partners {
  overflow: hidden;
  padding: 40px 0;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-card-border);
}

.partners__track {
  display: flex;
  width: max-content;
  /* Fallback duration; js/partners-marquee.js recalculates this from the
     actual rendered width so the scroll speed stays constant no matter
     how many partners are in the loop. */
  animation: partners-scroll 14s linear infinite;
}
.partners__track:hover { animation-play-state: paused; }

.partners__group {
  display: flex;
  align-items: center;
  gap: 72px;
  padding-right: 72px;
}

.partners__logo {
  display: flex;
  align-items: center;
  height: 80px;
}

.partners__logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter .2s ease, opacity .2s ease;
}
.partners__logo:hover img { filter: grayscale(0); opacity: 1; }

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

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

/* ============================================================
   ABOUT / WHO WE ARE
   ============================================================ */

.about {
  /* Pulls the whole section up so the highlight cards overlap the hero
     above (Figma: the content block sits taller than its own section box,
     which bottom-aligns it — negative margin is the more robust way to get
     the same overlap here, since it doesn't depend on knowing the content's
     exact height up front). Tuned to clear the hero CTA buttons — see
     hero-about-overlap-check in the responsive block for how that's kept
     true at other widths. */
  margin-top: -160px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 36px var(--page-pad);
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1296px;
  margin-inline: auto;
}

.about .section-head__title { max-width: 680px; }

/* ---- highlight cards ---- */

.about__highlights {
  --highlight-gap: 72px;
  display: flex;
  align-items: flex-start;
  gap: var(--highlight-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.about__highlights::-webkit-scrollbar { display: none; }

.highlight-card {
  flex: 0 0 calc((100% - 2 * var(--highlight-gap)) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 8px solid var(--color-page);
}

.highlight-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-ink);
  padding: 8px 8px 0;
  /* Always 2 lines — every card is the same width, so what actually varies
     is font-size (below), not line count. Only the card in the rightmost
     visible slot (.is-featured, toggled by scroll-slider.js) gets the
     larger size, which is what makes it taller than the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-card.is-featured .highlight-card__title { font-size: 26px; }

.highlight-card__media {
  height: 181px;
  margin: 0 8px 8px;
}

.highlight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- heading + slider nav ---- */

.about__foot {
  display: flex;
  gap: 10px;
  width: 100%;
}

.about__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  /* Grows/shrinks with the row instead of a fixed width — a fixed width
     here is exactly what caused the arrows to collide with the heading at
     in-between viewport widths (fixed around 1260px, in Figma). */
  flex: 1 0 0;
  align-self: stretch;
}

.about__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--color-primary);
  flex-shrink: 0;
  transition: background-color .15s ease, opacity .15s ease;
}
.about__nav-btn:hover { background: var(--color-surface); }

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  background: var(--color-surface);
  padding: 36px var(--page-pad);
}

.services__inner {
  display: flex;
  align-items: center;
  gap: 72px;
  max-width: 1296px;
  margin-inline: auto;
}

.services__left {
  display: flex;
  flex-direction: column;
  gap: 29px;
  width: 501px;
  flex-shrink: 0;
}

.services__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 30px 25px;
  background: #fff;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
}

.service-card__icon { flex-shrink: 0; }

.service-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 34px;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.service-card__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

.services__photo {
  flex: 1;
  min-width: 0;
  height: 701px;
  object-fit: cover;
  border-radius: var(--radius-card);
  opacity: 0.9;
}

/* ============================================================
   CATEGORIES STRIP
   ============================================================ */

.categories {
  max-width: 1440px;
  margin-inline: auto;
  padding: 56px var(--page-pad) 24px;
}

.categories__head { margin-bottom: 20px; }

.category-slider { position: relative; }

/* The strip is a native horizontally-scrollable/swipeable track (works with
   no JS at all); categories-slider.js's prev/next buttons are a page-by-
   one-viewport shortcut on top of that, shown only past CATEGORY_STRIP_VISIBLE
   categories (core.views.home). Six chips fit exactly one row at a time —
   see the flex-basis math below and its responsive overrides. */
.categories__strip {
  --chip-gap: 20px;
  display: flex;
  gap: var(--chip-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.categories__strip::-webkit-scrollbar { display: none; }

/* Only applied when category_strip_is_slider is false (<= 6 categories,
   core.views.home) — centering a track that actually overflows would clip
   its start behind the initial (unscrolled) edge. */
.categories__strip--center { justify-content: center; }

.category-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 calc((100% - 5 * var(--chip-gap)) / 6);
  scroll-snap-align: start;
  text-align: center;
}

.category-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(var(--chip-hue) 70% 50%);
  transition: transform .15s ease;
}

.category-chip__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  /* The icon is expected to be a simple, mostly-transparent glyph (see the
     model field's help_text) — flatten it to a white silhouette so it stays
     legible against whatever hue this chip landed on. */
  filter: brightness(0) invert(1);
}

.category-chip__name {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}

.category-chip:hover .category-chip__icon { transform: translateY(-4px); }
.category-chip:hover .category-chip__name { color: var(--color-primary); }

.category-slider__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.category-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--color-card-border);
  transition: background-color .15s ease, opacity .15s ease;
}
.category-slider__btn:hover { background: var(--color-surface); }

/* ============================================================
   PRODUCTS
   ============================================================ */

.products {
  padding: 36px 0;
  overflow: clip;
}

.products__head {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 calc(var(--page-pad) + 36px);
}

/* ---- stacked/fanned product carousel (drag + swipe) ---- */
.stack-carousel {
  width: 100%;
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 24px 0;
  overflow: hidden;
}

.stack-carousel__stage {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.stack-carousel__surface {
  position: absolute;
  inset: 0;
  z-index: 50;
  cursor: grab;
  touch-action: pan-y;
}

.stack-carousel__surface:active { cursor: grabbing; }

.stack-carousel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 0.2s ease;
}

/* The shared .product-card component defaults to position:absolute so it
   can drop straight into this fan layout; the wrapper above already
   handles positioning, so neutralize that here (same pattern as
   .catalog .product-card for the grid context). */
.stack-carousel__card .product-card {
  position: static;
  width: 250px;
  height: 360px;
  box-shadow: 0 16px 32px rgba(15, 15, 15, 0.14);
}

@media (min-width: 640px) {
  .stack-carousel__stage { height: 580px; }
  .stack-carousel__card .product-card { width: 290px; height: 410px; }
}

@media (min-width: 1024px) {
  .stack-carousel__stage { height: 640px; }
  .stack-carousel__card .product-card { width: 320px; height: 448px; }
}

.product-card {
  display: flex;
  flex-direction: column;
  width: 270px;
  height: 376px;
  background: #fff;
  border: 1px solid var(--color-card-border-2);
  border-radius: var(--radius-card);
  padding: 1px;
  overflow: hidden;
  position: absolute;
}

.product-card--bio {
  border: 2px solid rgba(16, 185, 129, 0.2);
  padding: 2px;
}

.product-card__media {
  position: relative;
  height: 192px;
  flex-shrink: 0;
  background: #f1f4f2;
  border-radius: 4px;
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 9999px;
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--color-green-deep);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.product-card__category {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-primary-soft);
  margin-bottom: 4px;
}

.product-card__category--bio { color: var(--color-green); }

.product-card__title {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #1b1c1c;
  margin-bottom: 8px;
}

.product-card__text {
  font-size: 14px;
  line-height: 20px;
  color: #444655;
  margin-bottom: 16px;
}

.product-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 12px;
  line-height: 16px;
  color: #757687;
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
  max-width: 1440px;
  margin-inline: auto;
  padding: 36px var(--page-pad) 72px;
}

.cta__box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 478px;
  padding: 80px;
  background: var(--color-primary);
  border-radius: 48px;
  overflow: hidden;
}

.cta__box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: linear-gradient(to left, #c4c2c2, rgba(196, 194, 194, 0));
  opacity: 0.1;
  pointer-events: none;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 725px;
  position: relative;
  z-index: 1;
}

.cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
  color: var(--color-cta-fg);
  min-width: 100%;
}

.cta__text {
  font-size: 18px;
  line-height: 28px;
  color: rgba(239, 241, 239, 0.8);
  max-width: 672px;
}

.cta__content .btn { margin-top: 16px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer__band {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  min-height: 470px;
  padding: 170px max(54px, calc((100% - 1296px) / 2)) 165px;
  background: url("../img/footer-bg.png") center 62% / cover no-repeat;
}

.footer__slogan {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 55px;
  color: #222;
}

.contact-pill {
  display: flex;
  align-items: center;
}

.contact-pill__label {
  padding: 13px 24px;
  background: #fff;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-ink);
  white-space: nowrap;
}

.contact-pill__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-pill__circle-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  background: #000;
  border-radius: 50%;
  transition: transform .2s ease;
}

.contact-pill:hover .contact-pill__circle-inner { transform: scale(1.08); }

/* --- dark footer --- */

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: 20px 0 30px;
  background: var(--color-footer-dark);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer__tagline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-family: var(--font-mono-caps);
  font-size: 6px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #fff;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 52px;
  background: #fff;
  border-radius: 25.5px;
  transition: transform .15s ease;
}
.footer__social:hover { transform: translateY(-2px); }

.footer__divider {
  width: 100%;
  border: 0;
  border-top: 1px solid #666;
  margin: 0;
}

.footer__copyright {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  padding-top: 5px;
}

/* ---------- square blue buttons (inner pages) ---------- */

.btn-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  padding: 13px 32px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 81, 147, 0.1), 0 4px 6px -4px rgba(0, 81, 147, 0.1);
  transition: filter .15s ease;
}
.btn-sq:hover { filter: brightness(1.12); }

.btn-sq--r8 { border-radius: 8px; padding: 16px 32px; box-shadow: none; }

.btn-sq--r4 {
  border-radius: 4px;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  box-shadow: none;
}

/* ============================================================
   CATALOG  (/products)
   ============================================================ */

.catalog-hero {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  padding: 40px var(--page-pad);
}

.catalog-hero__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: #eae7e7;
  border-radius: var(--radius-card);
  padding: 48px;
}

.catalog-hero__title {
  font-family: var(--font-nav);
  font-weight: 800;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--color-primary);
}

.catalog-hero__text {
  font-family: var(--font-nav);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-nav-link);
  max-width: 640px;
  margin: 24px 0;
}

.catalog-hero__img {
  width: 283px;
  flex-shrink: 0;
  border: 8px solid #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.catalog-hero__img img {
  width: 100%;
  height: 267px;
  object-fit: cover;
}

.catalog {
  padding: 36px var(--page-pad) 72px;
}

.catalog__inner {
  max-width: 1296px;
  margin-inline: auto;
}

.catalog__filterbar { width: 100%; }

.filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 32px 33px;
  border: none;
  border-bottom: 1px solid rgba(200, 199, 191, 0.3);
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #181916;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease;
}
.filterbar:hover { color: var(--color-primary); }

.filter-panel {
  display: none;
  padding: 28px 32px 32px;
  border-bottom: 1px solid rgba(200, 199, 191, 0.3);
}
.filter-panel.is-open { display: block; }

.filter-panel__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 64px;
}

.filter-panel__section { min-width: 180px; }

.filter-panel__heading {
  margin: 0 0 16px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.filter-pill {
  padding-bottom: 4px;
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.filter-pill:hover { color: var(--color-ink); }
.filter-pill--active {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom-color: var(--color-ink);
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-list__item {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 15px;
  color: var(--color-text);
  transition: color .15s ease;
}
.filter-list__item:hover { color: var(--color-ink); }
.filter-list__item--active { color: var(--color-primary); font-weight: 600; }

.filter-panel__footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 199, 191, 0.3);
}

.filter-panel__clear {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.filter-panel__clear:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .filter-panel__grid { gap: 28px; flex-direction: column; }
}

.catalog__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  /* a 4-card row is 1152px; the design lets it bleed 8px past the 1136px container */
  margin: 18px -8px 0;
}

/* catalog cards flow in-grid (the base .product-card is absolute for the home fan) */
.catalog .product-card {
  position: static;
  height: auto;
}

.product-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-primary);
  transition: background-color .15s ease;
}
.product-card__cta:hover { background: rgba(0, 92, 167, 0.06); }

.product-card__cta--muted {
  border-color: var(--color-card-border-2);
  color: #181c1b;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 32px;
}

.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-family: var(--font-nav);
  font-size: 16px;
  color: #1b1c1c;
}
.pagination__page:hover { background: rgba(0, 92, 167, 0.08); }

.pagination__page--active {
  background: var(--color-primary);
  color: #fff;
}

.pagination__ellipsis {
  padding: 0 8px;
  font-family: var(--font-nav);
  font-size: 16px;
  color: #1b1c1c;
}

.pagination__nav { display: flex; padding: 9px 8px; }
.pagination__nav--disabled { opacity: 0.3; pointer-events: none; }

/* ============================================================
   NEWS  (/news/, /news/[slug]/)
   ============================================================ */

.news-hero {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-page) 100%);
  padding: 64px var(--page-pad) 48px;
  border-bottom: 1px solid var(--color-card-border);
}

.news-hero__inner {
  max-width: 1296px;
  margin-inline: auto;
}

.news-hero__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.news-hero__title {
  margin: 0;
  font-family: var(--font-nav);
  font-weight: 800;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.88px;
  color: var(--color-ink);
}

.news-hero__text {
  margin: 16px 0 0;
  font-family: var(--font-nav);
  font-size: 17px;
  line-height: 26px;
  color: var(--color-nav-link);
  max-width: 560px;
}

.news {
  padding: 40px var(--page-pad) 72px;
}

.news__inner {
  max-width: 1296px;
  margin-inline: auto;
}

.news-empty {
  padding: 48px 0;
  color: var(--color-text-muted);
  text-align: center;
}

.news-feature {
  display: flex;
  align-items: stretch;
  gap: 40px;
  background: #fff;
  border: 1px solid var(--color-card-border-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 40px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.news-feature:hover {
  box-shadow: 0 14px 34px rgba(15, 15, 15, 0.1);
  transform: translateY(-2px);
}

.news-feature__media {
  flex: 1.1;
  min-width: 0;
  background: #f1f4f2;
}
.news-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.news-feature__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 40px 36px 0;
}

.news-feature__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 36px;
  color: var(--color-ink);
}

.news-feature__excerpt {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text);
}

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

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-card-border-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.news-card:hover {
  box-shadow: 0 10px 30px rgba(15, 15, 15, 0.08);
  transform: translateY(-2px);
}

.news-card__media {
  height: 200px;
  background: #f1f4f2;
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 24px;
}

.news-card__date {
  margin: 0 0 8px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.news-card__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-ink);
}

.news-card__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text);
  flex: 1;
}

.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
a:hover .news-card__cta { text-decoration: underline; }

.news-detail__inner {
  max-width: 860px;
  margin-inline: auto;
  padding: 40px var(--page-pad) 96px;
}

.news-detail__title {
  margin: 24px 0 8px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 48px;
  color: var(--color-ink);
}

.news-detail__date {
  margin: 0 0 32px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.news-detail__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 32px;
}
.news-detail__media img { width: 100%; display: block; }

.news-detail__body {
  font-size: 17px;
  line-height: 30px;
  color: var(--color-text);
}
.news-detail__body p { margin: 0 0 20px; }

@media (max-width: 900px) {
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-feature { flex-direction: column; }
  .news-feature__media img { min-height: 220px; }
  .news-feature__body { padding: 28px; }
}

@media (max-width: 600px) {
  .news__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCT DETAIL  (/products/.../[slug])
   ============================================================ */

.detail-layout { display: flex; align-items: stretch; }

.detail-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: #f6f3f2;
  border-right: 1px solid #c1c7d3;
  padding: 32px 24px;
}

.back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  border-radius: 4px;
  padding: 12px 16px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dce8ff;
}
.back-link:hover { filter: brightness(1.12); }

.detail-main { flex: 1; min-width: 0; }

.detail-hero {
  display: flex;
  justify-content: center;
  background: #f8fafb;
  min-height: 600px;
  padding: 72px 36px;
}

.detail-hero__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1280px;
  flex: 1;
}

.detail-hero__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.detail-hero__title {
  font-family: var(--font-nav);
  font-weight: 800;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.96px;
  color: #1b1c1c;
}

.detail-hero__title .accent { color: var(--color-primary); }

.detail-hero__text {
  font-family: var(--font-nav);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-nav-link);
  max-width: 512px;
}

.detail-hero__media {
  position: relative;
  flex: 1;
  min-width: 0;
}

.detail-hero__frame {
  border: 4px solid #fff;
  border-radius: 24px;
  padding: 4px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.detail-hero__frame img {
  width: 100%;
  height: 432px;
  object-fit: cover;
  border-radius: 16px;
}

.purity-card {
  position: absolute;
  left: -32px;
  bottom: -32px;
  width: 240px;
  height: 146px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-family: var(--font-nav);
}

.purity-card__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--color-primary);
}

.purity-card__value {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #1b1c1c;
  margin: 6px 0 8px;
}

.purity-card__note {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-nav-link);
}

.regulatory {
  background: #fff;
  padding: 72px 0;
}

.regulatory__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.regulatory__heading {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: #1b1c1c;
}

.tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #c1c7d3;
}

.tab {
  padding-bottom: 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--color-nav-link);
}
.tab:hover { color: var(--color-primary); }
.tab--active { border-bottom-color: var(--color-primary); }

.regulatory__cols {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.regulatory__composition {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.regulatory__subheading {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #1b1c1c;
}

.regulatory__text {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-nav-link);
}

.spec-card {
  background: #f8fafb;
  border: 1px solid #c1c7d3;
  border-radius: 16px;
  padding: 33px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-nav);
}

.spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 9px;
  border-bottom: 1px solid #c1c7d3;
}
.spec-row:last-child { border-bottom: 0; }

.spec-row dt {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: #1b1c1c;
}

.spec-row dd {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-nav-link);
}

.regulatory__img {
  flex: 1;
  min-width: 0;
  min-height: 300px;
  border: 1px solid #c1c7d3;
  border-radius: 16px;
  padding: 1px;
  overflow: hidden;
}

.regulatory__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

/* ============================================================
   CONTACT  (/contact)
   ============================================================ */

.contact-hero {
  position: relative;
  padding: 128px var(--page-pad);
  overflow: clip;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.contact-hero__inner {
  max-width: 1136px;
  margin-inline: auto;
}

.contact-hero__content {
  max-width: 672px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.contact-hero__title {
  font-family: var(--font-nav);
  font-weight: 800;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #fff;
}

.contact-hero__text {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: 0.9;
  min-width: 100%;
  width: 734px;
  max-width: calc(100vw - 2 * var(--page-pad));
}

.contact-hero__content .btn-sq { margin-top: 8px; }

.inquiry {
  display: flex;
  justify-content: center;
  padding: 72px 40px;
}

.inquiry__card {
  width: 1006px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #c1c7d3;
  border-radius: 8px;
  padding: 49px 49px 91px;
  font-family: var(--font-nav);
}

.inquiry__heading {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: #1b1c1c;
}

.inquiry__sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-nav-link);
  margin-top: 8px;
}

.inquiry__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
}

.form-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.form-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.form-field label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: #1b1c1c;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: #f6f3f2;
  border: 1px solid #c1c7d3;
  border-radius: 4px;
  padding: 17px;
  font: 400 16px/1.5 var(--font-nav);
  color: #1b1c1c;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6b7280; }

.form-field textarea {
  min-height: 154px;
  resize: vertical;
}

.inquiry__form .btn-sq { padding-inline: 48px; }

.offices {
  background: #f6f3f2;
  padding: 72px 0;
}

.offices__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 40px;
}

.offices__heading {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: #1b1c1c;
  text-align: center;
}

.offices__sub {
  font-family: var(--font-nav);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-nav-link);
  text-align: center;
  max-width: 672px;
  margin: 16px auto 0;
}

.offices__grid {
  display: flex;
  gap: 32px;
  margin-top: 64px;
}

.office-card {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #c1c7d3;
  border-radius: 8px;
  padding: 33px;
  font-family: var(--font-nav);
}

.office-card__region {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.office-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-nav-link);
}
.office-card__row:first-of-type { margin-top: 0; }
.office-card__row img { flex-shrink: 0; }

/* ---------- inner pages responsive ---------- */

@media (max-width: 1200px) {
  .catalog-hero__card { flex-direction: column; align-items: flex-start; }

  .detail-sidebar { display: none; }
  .detail-hero__inner { flex-direction: column; align-items: flex-start; gap: 72px; }
  .detail-hero__media { width: 100%; }
  .purity-card { left: 16px; bottom: -32px; }
  .regulatory__cols { flex-direction: column; }
  .regulatory__img { min-height: 340px; }

  .offices__grid { flex-wrap: wrap; }
  .office-card { flex: 1 1 40%; }
}

@media (max-width: 768px) {
  .catalog-hero__title { font-size: 34px; line-height: 42px; }
  .catalog-hero__img { width: 100%; }

  .detail-hero { padding: 48px 20px; }
  .detail-hero__title { font-size: 36px; line-height: 46px; }
  .tabs { flex-wrap: wrap; gap: 16px; }

  .contact-hero { padding: 72px var(--page-pad); }
  .contact-hero__title { font-size: 36px; line-height: 44px; }
  .inquiry { padding: 48px 20px; }
  .inquiry__card { padding: 32px 24px 48px; }
  .form-row { flex-direction: column; }
  .office-card { flex: 1 1 100%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  :root { --page-pad: 40px; }

  .highlight-card { flex-basis: calc((100% - var(--highlight-gap)) / 2); }

  .services__inner { flex-direction: column; align-items: flex-start; }
  .services__left { width: 100%; }
  .services__photo { width: 100%; height: 480px; flex: none; }

  .category-chip { flex-basis: calc((100% - 3 * var(--chip-gap)) / 4); }

  .products__head { padding: 0 var(--page-pad); }
}

@media (max-width: 768px) {
  :root { --page-pad: 20px; }

  .hero { padding-top: 128px; }
  .hero__title { font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
  .hero__content { padding-right: 0; }

  .section-head__title { font-size: 34px; }
  .section-head__title--lg { font-size: 38px; }

  .about__highlights { --highlight-gap: 12px; }
  /* Fractional basis (like the categories strip below) leaves the next
     card peeking in from the edge as a hint that the strip scrolls. */
  .highlight-card { flex-basis: calc((100% - 0.2 * var(--highlight-gap)) / 1.2); }
  .highlight-card__title { font-size: 18px; padding: 6px 6px 0; }
  .highlight-card.is-featured .highlight-card__title { font-size: 21px; }
  .highlight-card__media { height: 140px; margin: 0 6px 6px; }

  .about__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .about__nav { flex: none; align-self: flex-start; gap: 16px; }
  .about__nav-btn { width: 48px; height: 48px; }

  .service-card { gap: 24px; }
  .services__photo { height: 340px; }

  .categories { padding: 40px var(--page-pad) 8px; }
  .categories__head { margin-bottom: 24px; }
  .categories__strip { --chip-gap: 12px; }
  /* Fractional basis (2.3, not 2) deliberately leaves the next chip peeking
     in from the edge as a hint that the strip scrolls. */
  .category-chip { flex-basis: calc((100% - 1.3 * var(--chip-gap)) / 2.3); gap: 8px; }
  .category-chip__icon { width: 56px; height: 56px; }
  .category-chip__icon img { width: 24px; height: 24px; }
  .category-chip__name { font-size: 12px; }
  .category-slider__btn { width: 36px; height: 36px; }

  .cta__box { padding: 48px 28px; border-radius: 28px; }
  .cta__title { font-size: 38px; line-height: 46px; letter-spacing: -0.6px; }

  .footer__band {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    min-height: 380px;
    padding: 60px 24px;
  }
  .footer__slogan { font-size: 38px; line-height: 46px; }
}