/* ==========================================================================
   HOME / CHEMID-STYLE LANDING (M8)
   Transparent overlay nav, full-screen hero slider, stats cards, expertise.
   Depends on tokens.css + global.css (loaded first).
   ========================================================================== */

/* ---------- Overlay header (transparent over hero → solid on scroll) ------ */
.site-header--overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.site-header--overlay .brand,
.site-header--overlay .nav__link { color: #fff; }
.site-header--overlay .brand__mark { color: #fff; }
.site-header--overlay .brand__name small { color: rgba(255, 255, 255, 0.8); }
.site-header--overlay .nav__link:hover,
.site-header--overlay .nav__link[aria-current="page"] { color: #fff; }

/* Solid state (JS toggles .is-solid past 60px) */
.site-header--overlay.is-solid {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.site-header--overlay.is-solid .brand,
.site-header--overlay.is-solid .nav__link { color: var(--color-ink); }
.site-header--overlay.is-solid .brand__mark { color: var(--color-primary); }
.site-header--overlay.is-solid .brand__name small { color: var(--color-muted); }
.site-header--overlay.is-solid .nav__link:hover,
.site-header--overlay.is-solid .nav__link[aria-current="page"] { color: var(--color-primary-dark); }

/* Header phone: white over the hero, reverts to dark when the header solidifies */

/* ---------- Buttons on dark backgrounds ---------- */
.btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
.btn--on-dark:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }

/* ---------- Hero slider ---------- */
.hero-slider {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 920px;
  overflow: hidden;
  background: var(--color-primary-darker);
}
.hero-slider__viewport { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.hero-slide__media { position: absolute; inset: 0; }
.hero-slide__media picture,
.hero-slide__media img { width: 100%; height: 100%; }
.hero-slide__media img { object-fit: cover; object-position: center; }

.hero-slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 20, 43, 0.85) 0%,
    rgba(9, 20, 43, 0.6) 45%,
    rgba(9, 20, 43, 0.28) 100%
  );
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding-block: calc(var(--header-h) + 1rem);
  max-width: 780px;
}
.hero-slide__eyebrow {
  display: inline-block;
  color: var(--color-yellow-bright);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  margin-bottom: var(--space-2);
}
.hero-slide__title {
  color: #fff;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.hero-slide__text {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lg);
  margin-top: var(--space-3);
  max-width: 50ch;
}
.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Subtle rise-in for the active slide's copy */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide__content > * { opacity: 0; transform: translateY(14px); }
  .hero-slide.is-active .hero-slide__content > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .hero-slide.is-active .hero-slide__eyebrow { transition-delay: 0.15s; }
  .hero-slide.is-active .hero-slide__title { transition-delay: 0.25s; }
  .hero-slide.is-active .hero-slide__text { transition-delay: 0.35s; }
  .hero-slide.is-active .hero-slide__actions { transition-delay: 0.45s; }
}

/* Arrows */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hero-slider__arrow:hover {
  background: var(--color-yellow);
  color: var(--color-ink);
  border-color: var(--color-yellow);
}
.hero-slider__arrow--prev { left: clamp(0.75rem, 3vw, 2rem); }
.hero-slider__arrow--next { right: clamp(0.75rem, 3vw, 2rem); }

/* Progress tabs (desktop) — active bar fills 0→100% over the autoplay timer.
   JS sets the fill element's inline width; on mobile these collapse to dots. */
.hero-slider__tabs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 100%;
  max-width: var(--container-max);
  padding: 0 var(--gutter) clamp(1rem, 3vh, 2rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.hero-slider__tab {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
}
.hero-slider__tab-track {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.hero-slider__tab-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: #fff;
}
.hero-slider__tab-row { display: flex; align-items: center; gap: 0.55rem; }
.hero-slider__tab-num { font-size: 1.6rem; font-weight: var(--fw-black); line-height: 1; }
.hero-slider__tab-label {
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.hero-slider__tab:hover { color: rgba(255, 255, 255, 0.85); }
.hero-slider__tab.is-active { color: #fff; }

/* Mobile (≤900px): collapse the tabs back to simple dots (PC-only bar feature) */
@media (max-width: 900px) {
  .hero-slider__tabs {
    max-width: none;
    padding: 0;
    bottom: clamp(1rem, 4vh, 2.5rem);
    display: flex;
    justify-content: center;
    gap: 0.6rem;
  }
  .hero-slider__tab { width: 24px; height: 24px; display: grid; place-items: center; gap: 0; }
  .hero-slider__tab-track, .hero-slider__tab-row { display: none; }
  .hero-slider__tab::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    transition: background var(--transition), transform var(--transition);
  }
  .hero-slider__tab.is-active::before { background: var(--color-yellow); border-color: var(--color-yellow); transform: scale(1.2); }

  /* Mobile hero copy: anchor to the top *below* the full two-tier header
     (dark utility bar ~30px + nav row = var(--header-h)). Centring it made a
     tall copy block overflow upward on short phones and render behind the
     transparent header, tangling the eyebrow/title into the whitewashed logo.

     Stack ALL slides in one grid cell so the slider grows to fit the tallest
     slide's copy instead of clipping it. The old layout used absolutely-
     positioned slides inside a fixed-height, overflow-hidden box, so a tall
     headline + two stacked CTAs overflowed and the second button ("Contact
     Our Experts") was cut off and overlapped the dots. */
  .hero-slider { height: auto; }
  .hero-slider__viewport { position: relative; inset: auto; display: grid; }
  .hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;      /* every slide shares one cell → cell = tallest slide */
    min-height: 88svh;     /* keep the hero full-height when the copy is short */
    align-items: flex-start;
  }
  .hero-slide__content {
    padding-top: calc(var(--header-h) + 30px + 1.25rem);
    padding-bottom: 4.5rem;  /* clear the slide-dots pinned to the slider base */
  }
}

/* ---------- Applications cards (non-link variant) ---------- */
.app-card { height: 100%; }
.section__cta { text-align: center; margin-top: var(--space-4); }

/* 8th applications tile — "See all applications" over a collage of the
   applications that live inside /applications/ only */
.app-all {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
  padding: var(--space-4);
  overflow: hidden;
  color: #fff;
}
.app-all picture,
.app-all__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-all__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 43, 0.55), rgba(12, 26, 43, 0.78));
  transition: background var(--transition);
}
.app-all:hover .app-all__scrim {
  background: linear-gradient(180deg, rgba(15, 79, 214, 0.62), rgba(15, 79, 214, 0.85));
}
.app-all__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.app-all__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.app-all__title { color: #fff; font-size: 1.2rem; }
.app-all p { color: rgba(255, 255, 255, 0.92); font-size: var(--fs-sm); }
.app-all__list {
  list-style: none;
  margin-top: 0.7rem;
  display: grid;
  gap: 0.35rem;
  text-align: left;
}
.app-all__list li {
  position: relative;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.app-all__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- Explore our expertise (image-backed tiles) ---------- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}
.expertise-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition);
}
.expertise-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Title sits fully ON the image; body text sits fully on the white area below */
.expertise-tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.expertise-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.expertise-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 20, 43, 0) 40%, rgba(9, 20, 43, 0.78) 100%);
}
.expertise-tile__title {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 0.85rem;
  z-index: 1;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.25;
}
.expertise-tile__body { padding: var(--space-2) var(--space-2) var(--space-3); }
.expertise-tile__body p { color: var(--color-body); font-size: var(--fs-sm); }

/* Offset the anchored Technical Services section below the fixed two-tier header
   (nav row + 34px utility strip on desktop) */
#technical-services { scroll-margin-top: calc(var(--header-h) + 34px + 1rem); }

/* ---------- Technical articles (featured card on the homepage) ---------- */
.article-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.article-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.article-feature__media picture { display: block; height: 100%; }
.article-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.article-feature__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.article-feature__tag {
  color: var(--color-primary-dark);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.article-feature__body h3 { font-size: var(--fs-h3); }
.article-feature__body p { color: var(--color-muted); }
.article-feature .card__link { margin-top: auto; }
@media (max-width: 768px) {
  .article-feature { grid-template-columns: 1fr; }
  .article-feature__media { max-height: 220px; }
}

/* Service tiles are anchor targets from the nav dropdown */
.expertise-tile[id] { scroll-margin-top: calc(var(--header-h) + 34px + 1rem); }

/* ---------- Compact category cards (denser homepage product grid) ---------- */
.cards-compact { gap: var(--space-2); }
.cards-compact .card__media { aspect-ratio: 16 / 10; }
.cards-compact .card__body { padding: var(--space-2); gap: 0.35rem; }
.cards-compact .card__title { font-size: 1rem; }
.cards-compact .card__body p {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cards-compact .card__link { font-size: 0.85rem; }

/* ---------- Stats band (count-up, directly under the hero) ---------- */
.stats-band {
  background: var(--color-bg-alt);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  text-align: center;
}
.stats-band__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-2);
}
/* Minimal watermark icon behind each stat (globe, flask, …) */
.stats-band__item { position: relative; overflow: hidden; }
.stats-band__icon {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 64px;
  height: 64px;
  color: var(--color-primary-dark);
  opacity: 0.08;
  pointer-events: none;
}
.stats-band__num,
.stats-band__label { position: relative; z-index: 1; }
.stats-band__num {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: var(--fw-black);
  color: var(--color-primary-dark);
  line-height: 1;
}
.stats-band__label {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 900px) {
  .stats-band__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .hero-slider { height: auto; min-height: 88svh; max-height: none; }
  .hero-slider__arrow { display: none; }
  .hero-slide__scrim {
    background: linear-gradient(180deg, rgba(9, 20, 43, 0.7) 0%, rgba(9, 20, 43, 0.55) 60%, rgba(9, 20, 43, 0.7) 100%);
  }
}
/* Mobile slide-in menu: solid white panel needs dark links even in overlay mode */
@media (max-width: 900px) {
  .site-header--overlay .nav { background: #fff; }
  .site-header--overlay .nav__link { color: var(--color-ink); }
  .site-header--overlay .nav__link:hover,
  .site-header--overlay .nav__link[aria-current="page"] {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
  }
  /* "Menu" trigger stays readable on the transparent hero header */
  .site-header--overlay:not(.is-solid) .nav-toggle { color: #fff; }
}

/* ==========================================================================
   FAQ (native <details> accordion; powers FAQPage schema)
   ========================================================================== */
.faq__list {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.faq__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  margin-bottom: var(--space-1);
  overflow: hidden;
}
.faq__item[open] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 1.15rem 1.35rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  font-weight: var(--fw-normal);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after {
  content: "\2212"; /* minus */
}
.faq__q:hover { color: var(--color-primary-dark); }
.faq__a {
  padding: 0 1.35rem 1.25rem;
  color: var(--color-body);
}
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: var(--space-1); }
.faq__link a {
  font-weight: var(--fw-semibold);
  color: var(--color-primary-dark);
}
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}