/* ============================================================
   RAIVACO — Global Design System
   "Modern Corporate Soft UI"
   Palette: deep navy #17324F · corporate blue #00559F (AAA 7.5:1) · white · metallic gray
   Load this file LAST in <head> so it wins the cascade over
   per-page <style> blocks.
   ============================================================ */

:root {
  --rv-navy: #17324F;
  --rv-accent: #00559F; /* 7.5:1 on white — WCAG AAA (was #005AAA @ 6.9:1) */
  --rv-white: #FFFFFF;
  --rv-gray: #E3E7EC;
  --rv-ink: #1A1A1A;
  --rv-muted: #394B5C;

  --rv-radius-sm: 8px;
  --rv-radius: 12px;
  --rv-radius-lg: 16px;
  --rv-radius-xl: 20px;

  --rv-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --rv-shadow-lift: 0 22px 48px rgba(23, 50, 79, 0.14);
  --rv-shadow-panel: 0 20px 50px rgba(23, 50, 79, 0.10);

  --rv-glass-navy: rgba(23, 50, 79, 0.55);
  --rv-glass-white: rgba(255, 255, 255, 0.78);

  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   1. CARDS — soft radius, resting soft shadow, hover lift-up
   (replaces the old brutalist hard-offset shadows)
   ------------------------------------------------------------ */
.brutal-hover,
.brutal-hover-light {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease);
}

div.brutal-hover,
article.brutal-hover {
  overflow: hidden; /* clip card imagery to the rounded corners */
}

.brutal-hover:hover,
html[dir="rtl"] .brutal-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--rv-shadow-lift);
}

.brutal-hover-light:hover,
html[dir="rtl"] .brutal-hover-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);
}

/* Product tiles: same lift language */
.product-tile {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
  transition: opacity 0.5s ease, transform 0.5s var(--rv-ease),
              box-shadow 0.35s var(--rv-ease);
}
.product-tile.revealed { transition-duration: 0.35s, 0.35s, 0.35s; }
.product-tile:hover,
html[dir="rtl"] .product-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--rv-shadow-lift);
}

/* Glassmorphism label overlaying product-tile imagery */
span.product-tile-label {
  background-color: var(--rv-glass-navy);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* ------------------------------------------------------------
   2. GENERIC BORDERED BOXES — round every flat blocky container
   (skips single-edge borders such as table rows and dividers)
   ------------------------------------------------------------ */
div[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]),
a[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]) {
  border-radius: var(--rv-radius);
  border-color: var(--rv-gray);
}

img[class*="border-line"],
iframe {
  border-radius: var(--rv-radius);
}

/* Bordered image wrappers (gallery tiles, about visual, card media) */
div[class*="overflow-hidden"][class*="border-line"] {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
}

/* Footer social icon squares (bordered white on navy) */
a[class*="border-white"] { border-radius: 10px; }

/* Category header bands (Minerals / Chemicals group headings) */
a[class*="bg-navy"][class*="border-b-4"] { border-radius: var(--rv-radius); }

/* Floating content panel (contact page pull-up card) */
div[class*="-mt-12"][class*="border-line"] {
  border-radius: var(--rv-radius-lg);
  box-shadow: var(--rv-shadow-panel);
}

/* ------------------------------------------------------------
   3. BUTTONS & FORMS
   ------------------------------------------------------------ */
button { border-radius: 10px; }

.btn-sweep { border-radius: 10px; }
.btn-sweep.bg-accent,
a.btn-sweep {
  box-shadow: 0 8px 20px rgba(0, 90, 170, 0.22);
}

.mega-box { border-radius: 10px; }

input, select, textarea {
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rv-accent);
  box-shadow: 0 0 0 4px rgba(0, 90, 170, 0.12);
}

/* Accessible content, conversion actions, and product data. */
body { color: var(--rv-ink); }
.bg-white, .spec-texture { color: var(--rv-ink); }
.bg-white .font-light, .spec-texture .font-light { font-weight: 400; }
.text-ink { color: var(--rv-ink) !important; }
.text-navy { color: var(--rv-navy) !important; }
.text-accent { color: #00559F !important; }

a.btn-sweep.bg-accent,
button.btn-sweep.bg-accent,
.btn-sweep.border-accent.bg-accent {
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-color: #004985 !important;
  background-color: #00559F !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(0, 66, 122, 0.32) !important;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .2s var(--rv-ease), background-color .2s ease, box-shadow .2s var(--rv-ease);
}
a.btn-sweep.bg-accent:hover,
button.btn-sweep.bg-accent:hover,
.btn-sweep.border-accent.bg-accent:hover {
  background-color: #004985 !important;
  box-shadow: 0 14px 28px rgba(0, 66, 122, 0.38) !important;
  transform: translateY(-2px);
}
a.btn-sweep.bg-accent:focus-visible,
button.btn-sweep.bg-accent:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; }

table { width: 100%; border-collapse: collapse; color: var(--rv-ink); }
th, td { padding: .875rem 1rem; border: 1px solid #B8C4CF; text-align: start; vertical-align: top; }
th { background: #E8F0F7; color: #17324F; font-weight: 700; }
tr:nth-child(even) td { background: #F8FAFC; }
address { font-style: normal; }

@media (max-width: 767px) {
  /* Header: show the slogan side-by-side with the logo on mobile,
     both scaled down proportionally to fit the header space */
  header a.flex.shrink-0 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  header a.flex.shrink-0 > img[src*="logo-raiva"],
  header a.flex.shrink-0 > .hdr-logo-wrap,
  header a.flex.shrink-0 > .hdr-logo-wrap img {
    height: 40px !important;
    width: auto;
  }
  header a.flex.shrink-0 > img[src*="Slogan"] {
    display: block !important;
    height: 28px !important;
    width: auto;
  }
  header .hdr-divider {
    display: flex !important;
    height: 28px !important;
  }
  header .hdr-divider .hdr-logo-wrap,
  header .hdr-divider img {
    height: 28px !important;
    width: auto;
  }

  section:not(#hero-scroll) { padding-block: 44px; }
  section > .mx-auto { padding-inline: 18px !important; }
  #hero-scroll { min-height: 680px; height: auto; }
  #hero-scroll > .mx-auto { padding-inline: 20px !important; padding-block: 120px 72px; }
  .hero-stage-copy { min-height: 390px; }
  .hero-stage-text h1, .hero-stage-text h2 { font-size: clamp(2rem, 9vw, 2.75rem) !important; line-height: 1.12; }
  .hero-stage-text p { font-size: 1rem !important; line-height: 1.65; color: #FFFFFF !important; }
  .grid[class*="grid-cols-2"], .grid[class*="grid-cols-3"], .grid[class*="grid-cols-4"] { grid-template-columns: minmax(0, 1fr) !important; }
  .flex.items-center.gap-2 { align-items: flex-start; }
  a.btn-sweep, button.btn-sweep { width: 100%; min-height: 48px; padding-inline: 1.25rem !important; }
  .product-tile { min-height: 180px; }
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { margin-bottom: 1rem; border: 1px solid #B8C4CF; }
  td { border-width: 0 0 1px; }
  td:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------
   4. GLASSMORPHISM — header, dropdown panels, banner overlays
   ------------------------------------------------------------ */
header.sticky {
  background-color: var(--rv-glass-white);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(23, 50, 79, 0.08);
}

#langMenu {
  border-radius: 14px;
  overflow: hidden;
  background-color: #FFFFFF;
  border-color: rgba(23, 50, 79, 0.10);
  box-shadow: var(--rv-shadow-panel);
}

#megaMenu {
  border-radius: 0 0 var(--rv-radius-xl) var(--rv-radius-xl);
  background-color: #FFFFFF;
  border-color: rgba(23, 50, 79, 0.08);
  box-shadow: var(--rv-shadow-panel);
}

/* Mega-menu category headings (Minerals / Chemicals) — larger and centered */
#megaMenu p[data-i18n="mega.minerals"],
#megaMenu p[data-i18n="mega.chemicals"] {
  font-size: 1.375rem;
  line-height: 1.3;
  text-align: center;
}

/* Mega-menu product boxes — distinct, well-defined cards */
#megaMenu .mega-box {
  background-color: #FFFFFF;
  border: 1px solid #9FB0C2;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.10);
}
#megaMenu .mega-box:hover {
  border-color: var(--rv-accent);
  background-color: #F2F7FB;
}

/* Frosted navy scrim behind page-banner headline text */
div.absolute[class*="bg-navy/"] {
  background-color: rgba(23, 50, 79, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* No backdrop-filter support → solid fallbacks keep text readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.sticky { background-color: rgba(255, 255, 255, 0.97); }
  span.product-tile-label { background-color: rgba(23, 50, 79, 0.90); }
  div.absolute[class*="bg-navy/"] { background-color: rgba(23, 50, 79, 0.80); }
}

/* ------------------------------------------------------------
   5. ACCESSIBILITY — respect reduced-motion preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .brutal-hover:hover,
  .brutal-hover-light:hover,
  .product-tile:hover,
  html[dir="rtl"] .brutal-hover:hover,
  html[dir="rtl"] .brutal-hover-light:hover,
  html[dir="rtl"] .product-tile:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------
   6. HERO — benefit-driven headlines wrap normally
   (the old single-line "Processing & Quality Control" nowrap clamp
   was retired with the conversion-copy rewrite)
   ------------------------------------------------------------ */

/* Product tile hover overlay for injected cards (search results page) */
.product-tile-overlay { background: rgba(23, 50, 79, 0); transition: background .3s ease; }
.product-tile:hover .product-tile-overlay { background: rgba(23, 50, 79, 0.12); }

/* ------------------------------------------------------------
   7. ACCESSIBILITY — WCAG 2.2
   ------------------------------------------------------------ */

/* 7a. Skip link (WCAG 2.4.1 Bypass Blocks) — first focusable element,
   visually hidden until keyboard focus brings it on screen */
.skip-link {
  position: fixed;
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 100; /* above fixed header (z-40) and WhatsApp button (z-50) */
  padding: 0.875rem 1.5rem;
  background-color: var(--rv-navy);
  color: var(--rv-white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 10px;
  box-shadow: var(--rv-shadow-lift);
  transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus {
  transform: none;
  outline: 3px solid #F7B500;
  outline-offset: 3px;
}
main#main-content:focus { outline: none; }

/* 7b. Target size (WCAG 2.5.5 AAA — 44×44px minimum) */
header nav a,
header nav button,
header nav summary,
#megaBtn, #langBtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
header a[aria-label],
#mobileMenuBtn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
header a.flex.shrink-0 { min-height: 44px; } /* logo link: 40px-tall image on mobile */
#langMenu button { min-height: 44px; }
#megaMenu .mega-box { min-height: 44px; }
#mobileMenu nav > a,
#mobileMenu summary,
#mobileMenu select { display: flex; align-items: center; min-height: 44px; }
#mobileMenu details a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-rail-item { min-height: 44px; }
footer ul a,
footer p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Footer social icon squares: 40px → 44px */
footer a[aria-label].flex.h-10.w-10 { height: 2.75rem; width: 2.75rem; }
/* Underlined text links: expand the hit area without moving the underline */
.link-underline { position: relative; }
.link-underline::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* 7c. Contrast (WCAG 1.4.3 AA) — mega-menu product links were #2882C0
   (4.17:1 on white, fails AA for 14px bold); corporate blue passes 6.9:1 */
#megaMenu a.mega-box { color: var(--rv-accent); }
#megaMenu a.mega-box:hover { color: var(--rv-accent); }
/* Hero rail labels over video: white @45% opacity fails — raise resting state */
.hero-rail-item { color: rgba(255, 255, 255, 0.85); }
.hero-rail-item .rail-bar { background: rgba(255, 255, 255, 0.55); }

/* 7d. Typography (WCAG 1.4.8 / 1.4.12) — readable paragraph leading,
   relative units so it scales with user font-size settings */
p { line-height: 1.6; }
p[class*="text-"] { line-height: 1.6; } /* beats Tailwind text-size line-heights */

/* ------------------------------------------------------------
   8. AAA CONTRAST + PRIMARY-CTA PROMINENCE + CONSISTENCY
   ------------------------------------------------------------ */

/* 8a. Retire every hard-coded #005AAA (6.9:1) still set by per-page
   <style> blocks — this file loads last, so these overrides win */
:focus-visible { outline-color: #00559F; }
.link-underline { border-block-end-color: #00559F; }
.link-underline:hover { color: #00559F; }
.btn-sweep::after { background: #00559F; }

/* 8b. Primary CTA ("Get a Quote") — the most visually prominent
   element: filled AAA blue, heavier padding, strongest elevation */
a.btn-sweep.bg-accent,
button.btn-sweep.bg-accent,
.btn-sweep.border-accent.bg-accent {
  padding-inline: 1.625rem;
  font-size: 0.9375rem;
}
main a.btn-sweep.bg-accent,
main .btn-sweep.border-accent.bg-accent {
  box-shadow: 0 14px 30px rgba(0, 66, 122, 0.38) !important;
}

/* 8c. Unified button system — every CTA shares height, radius,
   weight, and focus treatment for a consistent, trustworthy feel */
a.btn-sweep, button.btn-sweep {
  min-height: 48px;
  border-radius: 10px;
  font-weight: 700;
}
a.btn-sweep:focus-visible,
button.btn-sweep:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; }

/* 8d. Form controls join the 44px target-size floor (WCAG 2.5.5) */
input:not([type="checkbox"]):not([type="radio"]),
select { min-height: 44px; }
textarea { min-height: 88px; }

/* ------------------------------------------------------------
   9. HEADER NAV — single-line guarantee in every locale
   ------------------------------------------------------------ */

/* Nav items, header controls, and every CTA never wrap to two lines */
header nav a,
header nav button,
header nav summary,
.hdr-link,
a.btn-sweep,
button.btn-sweep { white-space: nowrap; }

/* CTAs size to their (single-line) content and center it */
a.btn-sweep,
button.btn-sweep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
@media (max-width: 767px) {
  a.btn-sweep, button.btn-sweep { width: 100%; } /* keep full-width mobile CTAs */
}

/* Compact header band (1024–1400px): drop the decorative slogan divider,
   scale the logo, tighten gaps — longest locales (RU/TR/AR) keep one row.
   Attribute selectors outrank the Tailwind gap-8/text-sm utilities. */
@media (min-width: 1024px) and (max-width: 1400px) {
  header > div.mx-auto { gap: 0.5rem; padding-inline: 1rem; }
  header .hdr-divider { display: none; }
  header nav[class*="gap-8"] { gap: 0.75rem; }
  header nav[class*="text-sm"] { font-size: 0.75rem; }
  header a.flex.shrink-0 .hdr-logo-wrap,
  header a.flex.shrink-0 .hdr-logo-wrap img,
  header a.flex.shrink-0 > img { height: 56px; width: auto; }
  a.btn-sweep.bg-accent,
  .btn-sweep.border-accent.bg-accent { padding-inline: 0.875rem; font-size: 0.875rem; }
}
/* Wide screens: the 1400px container still can't fit the longest locales
   (RU needs ~1490px in the stock design) — moderate permanent compaction */
@media (min-width: 1401px) {
  header nav[class*="gap-8"] { gap: 1.5rem; }
  header nav[class*="text-sm"] { font-size: 0.8125rem; }
  header a.flex.shrink-0 .hdr-logo-wrap,
  header a.flex.shrink-0 .hdr-logo-wrap img,
  header a.flex.shrink-0 > img { height: 64px; width: auto; }
}

/* ============================================================
   Utility back-fill — the site ships a purged Tailwind build, so
   utilities not used on the original pages are missing. These
   fallbacks restore the ones used by the product sub-pages
   (product-lime*, and any future product pages). Safe: they either
   match Tailwind's own output or apply only where those classes appear.
   ============================================================ */
.flex-1 { flex: 1 1 0%; }
.self-start { align-self: flex-start; }
.items-start { align-items: flex-start; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.min-w-\[720px\] { min-width: 720px; }
.whitespace-nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.h-44 { height: 11rem; }
.w-fit { width: fit-content; }
.gap-px { gap: 1px; }
.bg-line { background-color: var(--rv-gray); }
.border-2 { border-width: 2px; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }
.top-0 { top: 0; }
.m-0 { margin: 0; }
.m-3 { margin: 0.75rem; }
.whitespace-nowrap { white-space: nowrap; }
.text-\[11px\] { font-size: 11px; line-height: 1rem; }
.text-\[10px\] { font-size: 10px; line-height: 0.9rem; }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
@media (min-width: 640px) {
  .sm\:h-52 { height: 13rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1.4fr 1fr; }
  .lg\:border-s { border-inline-start-width: 1px; }
  .lg\:border-t-0 { border-top-width: 0; }
}

/* Horizontal spec-card rail: cards sit side-by-side and share width when
   they fit, and become a horizontal scroll strip when they don't (any number
   of grades). Used by the product sub-pages' grade cards. */
.grade-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 8px 2px 30px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.grade-rail > .grade-card {
  flex: 1 0 15rem;
  min-width: 15rem;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .grade-rail > .grade-card { flex-basis: 84%; min-width: 84%; }
}
/* thin, on-brand scrollbar for the rail */
.grade-rail::-webkit-scrollbar { height: 8px; }
.grade-rail::-webkit-scrollbar-thumb { background: var(--rv-gray); border-radius: 4px; }
.grade-rail::-webkit-scrollbar-thumb:hover { background: var(--rv-muted); }

/* ------------------------------------------------------------
   PRODUCT SUB-PAGE COMPONENTS (lime family & future products)
   Secondary accent, geometric banner pattern, grade tabs,
   application icon-cards, elevated hero imagery.
   ------------------------------------------------------------ */
:root {
  --rv-accent2: #0E9F8A;       /* teal — secondary accent for key CTAs */
  --rv-accent2-dark: #0B8071;
}

/* Secondary-accent CTA */
.btn-accent2 {
  background-color: var(--rv-accent2) !important;
  border-color: var(--rv-accent2) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(14, 159, 138, 0.28);
  transition: background-color 0.25s ease, transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease);
}
.btn-accent2:hover {
  background-color: var(--rv-accent2-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 159, 138, 0.36);
}

/* Subtle geometric pattern overlay for dark (navy) banners */
.bg-geo { position: relative; }
.bg-geo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 26px);
}
.bg-geo > * { position: relative; }

/* Elevated hero product imagery */
.img-elevated { box-shadow: var(--rv-shadow-panel); }

/* Hero secondary (outline) button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(23, 50, 79, 0.25);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--rv-ease);
}
.btn-outline:hover {
  border-color: var(--rv-navy);
  background-color: #F7F8FA;
  transform: translateY(-2px);
}

/* --- Grade tab system --- */
.grade-tabs .tab-list { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--rv-gray);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: start;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease), border-color 0.25s, background-color 0.25s;
}
.tab-btn:hover { border-color: var(--rv-accent); transform: translateY(-2px); }
.tab-btn .tab-kicker { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--rv-muted); }
.tab-btn .tab-title { font-weight: 700; font-size: 0.95rem; color: var(--rv-navy); line-height: 1.15; }
.tab-btn.active { background: var(--rv-navy); border-color: var(--rv-navy); }
.tab-btn.active .tab-kicker { color: #9EC8EE; }
.tab-btn.active .tab-title { color: #fff; }
/* featured tab: distinct badge + subtle glow */
.tab-btn.featured { border-color: rgba(0, 90, 170, 0.55); box-shadow: 0 0 0 3px rgba(0, 90, 170, 0.10), var(--rv-shadow-soft); }
.tab-btn.featured.active { background: var(--rv-accent); border-color: var(--rv-accent); box-shadow: 0 0 0 4px rgba(0, 90, 170, 0.16), 0 12px 26px rgba(0, 90, 170, 0.28); }
.tab-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--rv-accent); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.tab-btn.active .tab-badge { background: #fff; color: var(--rv-accent); }

.tab-panel {
  margin-top: 1.25rem;
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  overflow: hidden;
}
.tab-panel.featured-panel {
  border-color: rgba(0, 90, 170, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 90, 170, 0.10), var(--rv-shadow-panel);
}
.tab-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 1.1rem 1.5rem;
  background: var(--rv-navy); color: #fff;
}
.featured-panel .tab-panel-head { background: var(--rv-accent); }
.spec-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rv-gray); }
@media (min-width: 700px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.5rem; background: #fff; }
.spec-row dt { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--rv-navy); }
.spec-row dd { font-family: 'IBM Plex Mono', monospace; font-size: 0.9375rem; font-weight: 500; color: var(--rv-ink); text-align: end; }
.spec-row.spec-highlight { background: rgba(0, 90, 170, 0.06); }
.spec-row.spec-highlight dt, .spec-row.spec-highlight dd { color: var(--rv-accent); }

/* --- Application icon-cards --- */
.app-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-lift); border-color: rgba(0, 90, 170, 0.35); }
.app-icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: rgba(0, 90, 170, 0.08); color: var(--rv-accent);
  transition: transform 0.3s var(--rv-ease), background-color 0.3s;
}
.app-card:hover .app-icon { transform: scale(1.1) rotate(-4deg); background: rgba(0, 90, 170, 0.14); }
@media (prefers-reduced-motion: reduce) {
  .tab-btn:hover, .app-card:hover, .app-card:hover .app-icon, .btn-accent2:hover, .btn-outline:hover { transform: none; }
}

/* --- Textured hero with legibility scrim ---------------------------------
   The lime-lump photograph is very light, so navy body copy needs a strong
   white scrim to stay well above WCAG AA. The scrim is heaviest over the
   text column and thins toward the image side, keeping the industrial
   texture visible without costing contrast. */
.hero-texture {
  position: relative;
  background-color: #EDEFF2;
  background-image: url('assets/images/lime-hero-texture-sm.webp');
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .hero-texture { background-image: url('assets/images/lime-hero-texture.webp'); }
}
.hero-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(2.5px) saturate(0.92);
  -webkit-backdrop-filter: blur(2.5px) saturate(0.92);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.95) 38%,
    rgba(255,255,255,0.78) 62%,
    rgba(255,255,255,0.58) 100%
  );
}
html[dir="rtl"] .hero-texture::before {
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.95) 38%,
    rgba(255,255,255,0.78) 62%,
    rgba(255,255,255,0.58) 100%
  );
}
/* Below md the copy spans the full width, so the scrim goes near-solid. */
@media (max-width: 767px) {
  .hero-texture::before { background: rgba(255,255,255,0.94); }
}
.hero-texture > * { position: relative; z-index: 1; }

/* Formula chip — mono formula + plain-language name */
.formula-chip {
  display: inline-flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--rv-gray); border-radius: 10px;
  background: rgba(255,255,255,0.92);
  padding: 0.5rem 1rem;
  box-shadow: var(--rv-shadow-soft);
}

/* Key-figures trust bar */
.figure-strip { display: grid; gap: 1px; background: var(--rv-gray); border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); overflow: hidden; }
.figure-strip > div { background: #fff; padding: 1.15rem 1.25rem; }
.figure-strip .fig-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--rv-navy); }
.figure-strip .fig-label { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rv-muted); margin-top: 2px; }

/* TDS / document download card */
.doc-card {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--rv-gray); border-radius: var(--rv-radius);
  background: #fff; padding: 1.15rem 1.35rem;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--rv-shadow-lift); border-color: rgba(0,90,170,0.4); }
.doc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(14,159,138,0.10); color: var(--rv-accent2); }

/* Analysis and comparison tables opt out of the site-wide mobile stacking
   pattern, for the same reason article tables do (see section 10). That
   pattern (line ~215) turns every cell into a block and hides <thead> — fine
   for the two-column label/value list on a stub page, useless here: "0.1 max"
   tells you nothing once "ASTM E 203" and "Water" have been unstacked away
   from it. Keep a real table and scroll it sideways instead. Scoped to the
   .overflow-x-auto wrapper that analysis_table and compare_table emit, so
   unwrapped two-column tables elsewhere keep stacking. */
@media (max-width: 767px) {
  main .overflow-x-auto > table { display: table; width: 100%; }
  /* display must be restored as well as position: the stacking rule sets
     thead to block, and a block thead drops out of the table's column
     layout, so the header row ends up narrower than the rows beneath it. */
  main .overflow-x-auto > table > thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  main .overflow-x-auto > table > thead > tr { display: table-row; margin-bottom: 0; border: 0; }
  main .overflow-x-auto > table > tbody { display: table-row-group; }
  main .overflow-x-auto > table > tbody > tr { display: table-row; margin-bottom: 0; border-inline: 0; border-block-start: 0; }
  main .overflow-x-auto > table th,
  main .overflow-x-auto > table td { display: table-cell; width: auto; }
  main .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Trade-terms definition rows */
.trade-grid { display: grid; gap: 1px; background: var(--rv-gray); border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); overflow: hidden; }
.trade-grid > div { background: #fff; padding: 1.25rem 1.4rem; }
.trade-grid dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rv-accent); }
.trade-grid dd { margin-top: 0.4rem; color: var(--rv-ink); font-weight: 300; }

/* FAQ accordion */
.faq-item { border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); background: #fff; box-shadow: var(--rv-shadow-soft); overflow: hidden; }
.faq-item + .faq-item { margin-top: 0.75rem; }
.faq-item > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 600; color: var(--rv-navy);
  transition: background-color 0.2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: #F7F8FA; }
.faq-item > summary::after {
  content: '+';
  flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 1.35rem; line-height: 1;
  color: var(--rv-accent); transition: transform 0.25s var(--rv-ease);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 1.4rem 1.25rem; color: var(--rv-ink); font-weight: 300; line-height: 1.7; }

/* Grade (datasheet) cards adopt the site's soft-UI language — rounded
   corners, soft resting shadow, lift on hover — with the coloured header
   clipped to the card and larger, clearer analysis text. */
.grade-card {
  border-radius: var(--rv-radius);
  overflow: hidden;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease);
}
.grade-card:hover,
.grade-card.is-featured:hover {
  transform: translateY(-5px);
  box-shadow: var(--rv-shadow-lift);
}
.grade-card dl > div { padding-top: 0.72rem; padding-bottom: 0.72rem; }
.grade-card dt { font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.01em; }
.grade-card dd { font-size: 0.9375rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .grade-card:hover, .grade-card.is-featured:hover { transform: none; }
}

/* Utilities the article bodies use that are absent from the trimmed
   tailwind.css build. Tailwind's preflight zeroes list markers and padding on
   every ul/ol, so without .list-disc and .ps-5 the bullet lists in the blog
   posts rendered as unstyled run-on paragraphs. .space-y-2/3/4 ship in the
   build but .space-y-6 does not. Definitions match Tailwind's own output. */
.list-disc { list-style-type: disc; }
.ps-5 { padding-inline-start: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

/* ------------------------------------------------------------
   10. BLOG — article typography and link cards

   The blog pages predate the component vocabulary the product
   pages use (.app-card, .doc-card, .figure-strip). These classes
   bring them onto the same footing: the page structure stays
   quiet and editorial, while anything clickable becomes a raised
   card so it reads as an action rather than a run of blue text.
   All spacing lives here rather than in Tailwind utilities —
   tailwind.css is a trimmed build and cannot be relied on.
   ------------------------------------------------------------ */

/* --- measure --------------------------------------------------
   Body copy is capped at 40rem: at 17px that lands around 72
   characters per line, inside the 55-75 band where long-form text
   reads comfortably. Figures, tables, equation panels and link
   cards break out wider so they still feel generous — the text
   column narrows, the page does not.
   -------------------------------------------------------------- */
.post-head { max-width: 48rem; }   /* matches the breakout width below */
.post-crumbs { font-size: 0.75rem; color: var(--rv-muted); }
.post-crumbs a:hover { color: var(--rv-accent); }

.post-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 85, 159, 0.09);
  color: var(--rv-accent);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
html[dir="rtl"] .post-kicker { letter-spacing: 0; }

.post-title {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--rv-navy);
}
html[dir="rtl"] .post-title { letter-spacing: 0; line-height: 1.35; }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin-top: 1.1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--rv-muted);
}
.post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* --- figures ------------------------------------------------ */
.post-figure { margin: 0; }
.post-figure img {
  width: 100%;
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
}
.post-figure-hero img { border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-panel); }
.post-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  color: var(--rv-muted);
}

/* --- body --------------------------------------------------- */
.post-body { max-width: 40rem; color: var(--rv-ink); font-size: 1.0625rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.5rem; }

/* wider elements escape the measure symmetrically in both directions:
   margin-inline-start flips under RTL, so one rule covers both */
@media (min-width: 960px) {
  .post-body > .post-figure,
  .post-body > .overflow-x-auto,
  .post-body > .post-equation,
  .post-body > .post-link-card,
  .post-body > .post-faq {
    width: calc(100% + 8rem);
    margin-inline-start: -4rem;
  }
}

.post-body h2 {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rv-gray);
  /* scales with the h1 clamp — a fixed 28px sat almost level with the
     30px mobile h1 and flattened the hierarchy */
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rv-navy);
}
html[dir="rtl"] .post-body h2 { letter-spacing: 0; }

/* Tables in articles opt out of the site-wide mobile stacking pattern.
   That pattern (line ~215) turns every cell into a block and visually hides
   <thead> — fine for a two-column spec list, but a comparison table is
   nothing without its column headers: "95-96.5%" means nothing if you cannot
   see it sits under "Mesh 400". Keep a real table and scroll it sideways. */
.post-body table { min-width: 38rem; }
.post-body .overflow-x-auto { -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .post-body table { display: table; width: 100%; }
  .post-body thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .post-body thead tr { display: table-row; margin-bottom: 0; border: 0; }
  .post-body tbody { display: table-row-group; }
  .post-body tbody tr { display: table-row; margin-bottom: 0; border: 0; }
  .post-body th, .post-body td { display: table-cell; width: auto; border-width: 1px; }
  .post-body .overflow-x-auto {
    /* let the scrollable strip use the full width of a phone screen */
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}
.post-body h2 + * { margin-top: 1rem; }
.post-body strong { font-weight: 600; color: var(--rv-navy); }
.post-body ul { padding-inline-start: 0; list-style: none; }
.post-body ul > li { position: relative; padding-inline-start: 1.5rem; }
.post-body ul > li + li { margin-top: 0.85rem; }
.post-body ul > li::before {
  content: ''; position: absolute; inset-inline-start: 0.25rem; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rv-accent);
}

/* --- key-takeaway callout ----------------------------------- */
.post-callout {
  position: relative;
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(0, 85, 159, 0.22);
  border-radius: var(--rv-radius);
  background: linear-gradient(180deg, rgba(0, 85, 159, 0.06), rgba(0, 85, 159, 0.02));
  overflow: hidden;
}
.post-callout::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--rv-accent);
}
.post-callout-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rv-accent);
}
html[dir="rtl"] .post-callout-label { letter-spacing: 0; }
.post-callout-label svg { width: 15px; height: 15px; flex: none; }
.post-callout p { margin-top: 0.75rem; }

/* --- equation panel ----------------------------------------- */
.post-equation {
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  overflow: hidden;
}
.post-equation-step + .post-equation-step { border-top: 1px solid var(--rv-gray); }
.post-equation-step { padding: 1.35rem 1.5rem; }
.post-equation-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rv-muted);
}
html[dir="rtl"] .post-equation-title { letter-spacing: 0; }
.post-equation-formula {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem; font-weight: 600;
  color: var(--rv-navy);
  direction: ltr; unicode-bidi: isolate;
}
.post-equation-step p { margin-top: 0.8rem; font-size: 0.95rem; }

/* --- product link card (the boxed link) --------------------- */
.post-link-card {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s;
}
.post-link-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rv-shadow-lift);
  border-color: rgba(0, 85, 159, 0.45);
}
.post-link-icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: rgba(0, 85, 159, 0.08); color: var(--rv-accent);
  transition: transform 0.3s var(--rv-ease), background-color 0.3s;
}
.post-link-card:hover .post-link-icon { transform: scale(1.08); background: rgba(0, 85, 159, 0.15); }
.post-link-icon svg { width: 22px; height: 22px; }
.post-link-text { flex: 1 1 auto; min-width: 0; }
.post-link-kicker {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--rv-muted);
}
html[dir="rtl"] .post-link-kicker { letter-spacing: 0; }
.post-link-title {
  display: block; margin-top: 3px;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.25;
  color: var(--rv-navy);
}
.post-link-card:hover .post-link-title { color: var(--rv-accent); }
.post-link-desc {
  display: block; margin-top: 5px;
  font-size: 0.85rem; line-height: 1.5;
  color: var(--rv-muted);
}
.post-link-arrow {
  flex: none; color: var(--rv-accent);
  transition: transform 0.3s var(--rv-ease);
}
.post-link-arrow svg { width: 20px; height: 20px; }
html[dir="rtl"] .post-link-arrow { transform: scaleX(-1); }
.post-link-card:hover .post-link-arrow { transform: translateX(5px); }
html[dir="rtl"] .post-link-card:hover .post-link-arrow { transform: translateX(-5px) scaleX(-1); }

/* --- closing call to action --------------------------------- */
.post-cta {
  position: relative;
  margin-top: 3.5rem;
  padding: 2.5rem 2rem;
  border-radius: var(--rv-radius-lg);
  background: var(--rv-navy);
  color: #fff;
  box-shadow: var(--rv-shadow-panel);
  overflow: hidden;
}
.post-cta::after {
  content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 85, 159, 0.55), transparent 70%);
  pointer-events: none;
}
.post-cta > * { position: relative; z-index: 1; }
.post-cta-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.post-cta-text { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.86); max-width: 44rem; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.post-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.85rem 1.5rem;
  border-radius: 10px;
  background: #fff; color: var(--rv-navy);
  font-weight: 700; font-size: 0.9375rem;
  transition: transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease), background-color 0.25s;
}
.post-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); }
.post-cta-btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.post-cta-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); }
.post-cta-contact { margin-top: 1.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); }
.post-cta-contact a { color: #fff; border-block-end: 1px solid rgba(255, 255, 255, 0.4); }
.post-cta-contact a:hover { border-block-end-color: #fff; }

/* --- blog index cards --------------------------------------- */
.post-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--rv-ease); }
article.brutal-hover:hover .post-card-media img { transform: scale(1.05); }
.post-card-tag {
  position: absolute; inset-block-start: 0.9rem; inset-inline-start: 0.9rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--rv-glass-white);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--rv-navy);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
html[dir="rtl"] .post-card-tag { letter-spacing: 0; }
.post-card-more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rv-accent);
}
html[dir="rtl"] .post-card-more { letter-spacing: 0; }
.post-card-more .arr { transition: transform 0.25s var(--rv-ease); }
html[dir="rtl"] .post-card-more .arr { transform: scaleX(-1); }
article.brutal-hover:hover .post-card-more .arr { transform: translateX(5px); }
html[dir="rtl"] article.brutal-hover:hover .post-card-more .arr { transform: translateX(-5px) scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .post-link-card:hover, .post-link-card:hover .post-link-icon,
  .post-cta-btn:hover, .post-card-media img,
  article.brutal-hover:hover .post-card-media img { transform: none; }
}

/* ---------------------------------------------------------------------
   .text-sky on a dark surface
   The built utility resolves .text-sky to the same blue as the accent
   (#005AAA), which is only 1.9:1 against --rv-navy and effectively
   unreadable. Lighten it in the two places it sits on navy: the
   grade-panel kickers and the dark "bespoke production" CTA panels.
   Featured panels already use text-white/80 and are unaffected.
   --------------------------------------------------------------------- */
.tab-panel-head .text-sky,
.bg-navy .text-sky {
  color: #9DC8EC; /* 7.4:1 on --rv-navy — WCAG AA/AAA */
}
.bg-navy a.text-sky:hover,
.bg-navy .link-underline.text-sky:hover {
  color: #FFFFFF;
}

/* ------------------------------------------------------------
   Chemical formulas inside an uppercase label
   .product-tile-label and the hero badge are uppercase, which suits a product
   name but corrupts a formula — CaO becomes CAO, Na2CO3 becomes NA2CO3. Case is
   part of chemical notation, so formulas opt out of the transform.
   ------------------------------------------------------------ */
.product-tile-label.formula,
.badge-formula {
  text-transform: none;
  letter-spacing: 0.03em;
}
