/* ==========================================================================
   Karachem for Chemical Industries — styles.css (custom-style, consolidated)
   --------------------------------------------------------------------------
   White-canvas, editorial, image-led. Brand palette mapping:
     White      = page canvas and raised neutral surfaces
     Brand orange/blue = content panels
     Cool neutral = alternating section bands
     Charcoal   = headlines, body text, dark feature panels
     Blue   = secondary accent (eyebrows, Discover/Learn-more links, arrows,
              outline tag-pills, the big bottom CTA band background)
     Orange = PRIMARY action accent (primary buttons, active nav indicator,
              link-arrow hover nudge, the button inside the blue CTA band)
   Saturated fills appear ONLY in dark charcoal panels and the one blue CTA band.
   ========================================================================== */

/* 1. FONTS — self-hosted Archivo (display) + Hanken Grotesk (body) --------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Turkish needs Latin Extended-A (ş ğ İ …), which the base Latin faces above
   drop. These dedicated full-glyph faces load only under html[lang="tr"] (see
   below), so English/Arabic visitors never download them. Variable wght axis is
   preserved. Build with: python tools/build_fonts.py */
@font-face {
  font-family: "Archivo TR";
  src: url("../fonts/archivo-tr.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk TR";
  src: url("../fonts/hanken-grotesk-tr.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* 2. DESIGN TOKENS ---------------------------------------------------------- */
:root {
  /* Brand colors (keep exactly) */
  --orange:       #F47216;
  --orange-d:     #D9620E;
  --blue:         #0F57BE;
  --blue-d:       #0E4FA3;
  --navy:         #0C3D7A;           /* Karachem-style dark blue — headings + dark bands */
  /* Semantic white-canvas surfaces and text */
  --page-bg:       #FFFFFF;
  --surface:       #F7F9FA;
  --surface-muted: #F2F6FA;          /* faint cool band — restores section rhythm */
  --surface-dark:  #0C3D7A;          /* Karachem: dark bands are deep brand blue, not charcoal */
  --text:          #1A1B1E;
  --text-muted:    #54606B;
  --border:        #E1E8ED;          /* lighter Karachem-style hairline */

  /* KarachemxKarachem feather layer - transparent derivatives of the brand
     palette ONLY (no new hues). Washes back the light brand panels with
     dark text on top. */
  --orange-wash:  #FCEDD5;
  --orange-wash2: #FCEDD5;
  --blue-wash:    #DCEEFA;
  --blue-wash2:   #DCEEFA;
  --blue-line:    rgba(15,87,190,0.45);  /* mid-strength divider, derived from --blue */

  /* Legacy aliases retained for the existing component system */
  --black:    var(--text);
  --white:    #FFFFFF;
  --gray-100: var(--surface-muted);
  --gray-300: var(--border);
  --gray-600: var(--text-muted);
  --hairline: var(--border);
  --rule-color:  #2B4A70;                       /* Karachem pass: navy-slate structural line (was black) */
  --rule:        1px solid var(--rule-color);   /* structural 1px line */
  --rule-2:      2px solid var(--rule-color);   /* prominent 2px line */
  --rule-dark:   1px solid rgba(255,255,255,0.22);
  --rule-dark-2: 2px solid rgba(255,255,255,0.30);

  /* Typography — geometric display + grotesque body (self-hosted) */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font: var(--font-body);   /* legacy alias — keeps existing var(--font) refs working */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1440px;
  --radius: 0;          /* sharp industrial — flat, flush boxes site-wide */
  --radius-lg: 0;

  /* Effects — minimal, restrained (navy-tinted, matches the brand blue) */
  --shadow-base: 0 4px 16px rgba(12, 45, 90, 0.08);
  --shadow-md: 0 14px 40px rgba(12, 45, 90, 0.22);
  --ring: 0 0 0 3px rgba(15, 87, 190, 0.30);

  /* Photographic-hero scrims — LIGHT pass: much gentler; the white hero
     panel (§61) carries legibility now, so photos read bright and clean */
  --scrim-hero:   linear-gradient(90deg, rgba(10,22,40,0.42) 0%, rgba(11,21,36,0.22) 45%, rgba(13,13,13,0.06) 100%);
  --scrim-hero-v: linear-gradient(180deg, rgba(10,22,40,0.05) 0%, rgba(10,20,36,0.22) 52%, rgba(9,14,22,0.52) 100%);
  --footer-bg:    var(--surface-dark);

  --gap-grid: 20px;          /* custom grid gap */

  --header-h: 84px;
  --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);

  /* custom motion scale — slow + deliberate is the brand */
  --dur-micro: 180ms;   /* tiny state changes */
  --dur-hover: 360ms;   /* responsive industrial hover */
  --dur-word:  420ms;   /* per-word rise */
  --dur-hero:  1100ms;  /* hero entrance */
  --dur-panel: 480ms;   /* nav panel slide-in */
  --dur-reveal: 700ms;  /* scroll-reveal rise */
  --word-step: 0.16s;   /* per-word stagger increment */
  --ease-custom: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-logo: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. RESET & BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------
   Premium soft color blend background — solves the "blank white" feeling
   ------------------------------------------------------------------ */
body {
  background-color: var(--page-bg);
  background-image: none;
}

img, svg { max-width: 100%; display: block; height: auto; }

a { color: var(--orange); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange-d); }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}
/* On dark surfaces the blue ring is low-contrast — use a white ring instead */
.hero.on-dark :focus-visible,
.site-footer :focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.7); }

/* 4. TYPOGRAPHY ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--black);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 6.4vw, 5.8rem); font-weight: 300; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); font-weight: 400; letter-spacing: -0.032em; }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; }
h4 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
  max-width: 60ch;
}

.muted { color: var(--gray-600); }

/* 5. LAYOUT HELPERS ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: clamp(80px, 9vw, 144px); }
.section--tight { padding-block: clamp(56px, 6.5vw, 104px); }
.section--gray { background-color: var(--surface-muted); }
.section--orange {
  background: var(--orange-wash);
  color: var(--text);
  max-width: calc(var(--container) - var(--space-5) * 2);
  margin-inline: auto;
  margin-block: clamp(48px, 7vw, 110px);
  padding-block: clamp(48px, 5vw, 80px);
  padding-inline: clamp(28px, 4vw, 64px);
}
.section.section--orange:not(.section--tight) { padding-block: clamp(48px, 5vw, 80px); }
.section--orange > .container { padding-inline: 0; max-width: none; }
.section-box--gray > .container { padding-inline: 0; max-width: none; }
.section--orange h2, .section--orange h3 { color: var(--text); }
.section--orange .eyebrow { color: var(--blue); }
.section--orange .eyebrow::before { background: var(--orange); z-index: 10; }
.section--orange .muted, .section--orange p { color: var(--text-muted); }
.section--orange .spec-list li { color: var(--text-muted); }
.section--orange .spec-list li::before { background: var(--orange); z-index: 10; }

/* Blue uppercase eyebrow label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-3);
}

.section-head { max-width: 880px; margin-bottom: var(--space-9); }
.section-head.center { margin-inline: auto; text-align: center; }

.measure { max-width: 68ch; }

/* 6. BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 1rem 1.55rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: var(--text); letter-spacing: 0.01em; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-d); color: var(--white); border-color: var(--blue-d); }
/* custom CTA: flat (no shadow); trailing arrow nudges right on hover */
.btn-primary svg { transition: transform var(--transition); }
.btn-primary:hover svg { transform: translateX(4px); }

/* Blue outline with black text (Mega Menu CTA) */
.btn-menu-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--blue);
}
.btn-menu-outline:hover { background: var(--blue) !important; color: var(--white) !important; border-color: var(--blue) !important; }

/* Orange outline button */
.btn-orange-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--orange);
}
.btn-orange-outline:hover { background-color: var(--orange) !important; color: var(--white) !important; border-color: var(--orange) !important; }

/* Secondary = blue outline (secondary accent) */
.btn-secondary {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-secondary:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

.on-dark .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.5); }
.on-dark .btn-secondary:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.btn-download {
  background: var(--surface);
  color: var(--black);
  border-color: var(--gray-300);
}
.btn-download:hover { border-color: var(--orange); color: var(--orange-d); }
.btn-download svg { width: 18px; height: 18px; flex: none; }

/* Arrow link — "Discover ›" / "Learn more ›": blue text + arrow,
   nudges right and turns orange on hover (action affordance). */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--blue);
  font-size: 0.95rem;
  transition: color var(--transition);
}
.btn-link::after {
  content: "\276F";
  transition: transform var(--transition);
}
.btn-link:hover { color: var(--orange); }
.btn-link:hover::after { transform: translateX(4px); }

/* 7. HEADER & NAVIGATION (skeleton; final colors in §17) ------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-300);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-5);
}

.logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.logo-mark { height: 58px; width: auto; max-width: 220px; object-fit: contain; }

.primary-nav { display: flex; align-items: center; gap: var(--space-7); }
.primary-nav a:not(.btn) {
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--black);
  position: relative;
  padding-block: var(--space-3);
}
.primary-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2.5px;
  background: var(--orange); z-index: 10;              /* active/hover indicator = orange */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.primary-nav a:not(.btn):hover { color: var(--orange-d); }
.primary-nav a:not(.btn):hover::after,
.primary-nav a.is-active::after { transform: scaleX(1); }
.primary-nav a.is-active { color: var(--black); }

/* Nav search icon (placeholder — non-functional) */
.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  border-radius: 50%;
  color: var(--black);
  transition: color var(--transition), background var(--transition);
}
.nav-search:hover { color: var(--orange-d); background: var(--gray-100); }
.nav-search svg { width: 21px; height: 21px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block; height: 2px; width: 24px; margin-inline: auto;
  background: var(--black);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 8. HERO — full-bleed photographic stage, dark scrim, content overlaid --- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  background: var(--surface-dark);
}
.hero > .container { position: relative; z-index: 1; width: 100%; }

/* Photo layer fills the stage; scrim keeps overlaid white text legible */
.hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-media img, .hero-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Anchor the photo to the RIGHT edge site-wide: the main subjects (e.g. the
   chemist's hands) sit on the right side of these photos. object-fit: cover
   crops the sides on tall/narrow viewports, so anchoring right keeps the
   subject visible instead of clipped off — applied to every hero, home and
   the compact interior heroes alike. */
.hero-media img { object-position: right center; }
/* On very narrow phones the container's max-width shrinks; pulling fully right
   would still hide the subject, so nudge slightly off the edge. */
@media (max-width: 600px) {
  .hero-media img { object-position: 75% center; }
}
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-hero); }

.hero-inner { position: relative; z-index: 1; max-width: 820px; }
.hero h1    { margin-bottom: var(--space-5); font-weight: 300; }
.hero .lead { margin-bottom: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-actions .btn { flex: 1; min-width: 200px; justify-content: center; text-align: center; }

/* On-dark treatment: white headline / lead / eyebrow (no new palette color) */
.hero.on-dark h1      { color: var(--white); }
.hero.on-dark .lead   { color: rgba(255,255,255,0.86); }
.hero.on-dark .eyebrow{ color: var(--white); letter-spacing: 0.2em; }

/* Home: tall, content vertically centered, left-dark scrim */
.hero--home { min-height: clamp(420px, 52vh, 600px); align-items: center; }
.hero--home .hero-inner { padding-block: clamp(56px, 7vw, 96px); max-width: 840px; }

/* Compact interior: shorter, content anchored lower-left, bottom-dark scrim */
.hero--compact { min-height: clamp(420px, 52vh, 600px); align-items: flex-end; }
.hero--compact .hero-media::after { background: var(--scrim-hero-v); }
.hero--compact .hero-inner { padding-block: clamp(56px, 7vw, 96px); max-width: 840px; }

/* 9. CARDS — minimal, no border/shadow, whitespace separation ------------- */
.grid {
  display: grid;
  gap: var(--space-7);
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: var(--space-5) 0;
  overflow: hidden;
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--gray-600); margin-bottom: var(--space-4); }
.card .btn-link { margin-top: auto; }

/* 10. STATS STRIP — left-aligned, not centered ----------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
  text-align: left;
}
.stats > div {
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--black);
  letter-spacing: -0.03em;
}
.stat-num span { color: var(--orange); }
.stat-label {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 11. CTA BAND (black default; blue variant in §17) ----------------------- */
.cta-band {
  background: var(--surface-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 6vw, var(--space-10));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--orange); z-index: 10;
}
.cta-band h2 { color: var(--white); margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.cta-band p { color: rgba(255,255,255,0.78); margin: var(--space-4) 0 0; font-size: 1.1rem; }
.cta-band .cta-copy { max-width: 720px; }

/* 12. SPEC TABLES --------------------------------------------------------- */
.grade {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--surface);
  scroll-margin-top: 120px;   /* clear the sticky header on deep-link */
}
.grade + .grade { margin-top: var(--space-6); }
/* Blue outline pill */

/* Horizontal scroll wrapper — prevents mobile overflow */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
}
table.spec {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 0.95rem;
}
table.spec th, table.spec td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-300);
  vertical-align: top;
}
table.spec thead th {
  background: var(--gray-100);
  font-family: var(--font);
  font-weight: 600;
  white-space: nowrap;
}
table.spec tbody tr:nth-child(even) { background: var(--gray-100); }
table.spec tbody tr:last-child td { border-bottom: none; }
table.spec td:first-child, table.spec th:first-child { font-weight: 600; }

.download-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  list-style: none;
}
.download-list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  color: var(--black);
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}
.download-list a:hover { border-color: var(--orange); color: var(--orange-d); background: var(--gray-100); }
.download-list svg { width: 18px; height: 18px; flex: none; color: var(--blue); }

/* 13. BREADCRUMB ---------------------------------------------------------- */
.breadcrumb {
  font-size: 0.9rem;
  color: var(--gray-600);
  padding-top: var(--space-6);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.breadcrumb li::after { content: "/"; margin-left: var(--space-2); color: var(--gray-300); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--gray-600); font-weight: 500; }
.breadcrumb a:hover { color: var(--orange-d); }
.breadcrumb [aria-current="page"] { color: var(--black); }

/* 14. FORMS --------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .req { color: var(--orange); }
.field input, .field textarea {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--black);
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--gray-300);
  border-radius: 0;
  background: transparent;
  transition: border-color var(--transition);
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-600); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
  border-bottom-width: 2px;
  margin-bottom: -1px;   /* keep baseline steady when border thickens */
}
.field textarea { resize: vertical; min-height: 140px; }
.field .error-msg { color: var(--orange-d); font-size: 0.85rem; min-height: 1em; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--orange-d); }

.form-success {
  display: none;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  border-top: 3px solid var(--blue);
  color: var(--black);
  padding: var(--space-4) var(--space-5);
  border-radius: 0;
}
.form-success.show { display: flex; }
.form-success svg { width: 24px; height: 24px; color: var(--blue); flex: none; }
.form-success.error { border-top-color: var(--orange); }
.form-success.error svg { color: var(--orange); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: var(--space-8); align-items: start; }
.contact-info dl { display: grid; gap: var(--space-5); margin: 0; }
/* Eyebrow-style label = blue */
.contact-info dt { font-weight: 600; color: var(--blue); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-1); }
.contact-info dd { margin: 0; color: var(--black); }

/* 15. FOOTER — dark off-black, custom-style ----------------------------- */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,0.66); border-top: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--space-7);
  padding-block: clamp(64px, 8vw, 100px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.footer-brand .logo-mark { height: 44px; }
.footer-brand p { margin-top: var(--space-4); max-width: 34ch; line-height: 1.5; color: rgba(255,255,255,0.66); }
/* Show the full-color brand mark on the dark footer */
.site-footer nav ul { list-style: none; display: grid; gap: var(--space-3); }
.site-footer nav a { color: rgba(255,255,255,0.66); font-weight: 500; }
.site-footer nav a:hover { color: var(--white); }
.footer-contact address { font-style: normal; display: grid; gap: var(--space-2); color: rgba(255,255,255,0.66); }
.footer-contact address a { color: rgba(255,255,255,0.66); }
.footer-contact address a:hover { color: var(--white); }
.social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
  transition: background var(--transition), color var(--transition);
}
.social a:hover { background: var(--orange); z-index: 10; color: var(--white); }
.social svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
  font-size: 0.85rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  color: rgba(255,255,255,0.5);
}
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-legal a {
  color: rgba(255,255,255,0.5); font-weight: 500; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 0.3em;
}
.footer-legal a::after { content: "›"; color: rgba(255,255,255,0.4); transition: transform var(--transition), color var(--transition); }
.footer-legal a:hover { color: var(--white); }
.footer-legal a:hover::after { transform: translateX(3px); color: var(--white); }

/* 16. SCROLL-REVEAL — gentle, subtle -------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }

/* ==========================================================================
   17. custom COMPONENT SYSTEM (consolidated)
   One coherent layer. Every accent resolves to the palette mapping at top.
   ========================================================================== */

/* ── Utility bar: small uppercase gray links, right-aligned ─────────────── */
.utility-bar {
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-300);
  font-size: 0.78rem;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  min-height: 42px;
}
.utility-bar a {
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.utility-bar a:hover { color: var(--orange-d); }
.utility-search { display: inline-flex; align-items: center; gap: 0.4em; }
.utility-search svg { width: 13px; height: 13px; }

/* ── Header: solid white, subtle shadow, clean (no orange stripe) ───────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--gray-300);
  box-shadow: none;
}
.site-header.scrolled { background: var(--surface); border-bottom-color: transparent;
  box-shadow: 0 4px 18px rgba(17,17,17,0.10); }

/* ── Media box — image slot with hairline frame ────────────────────────── */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  aspect-ratio: 16 / 9;
}
.media img, .media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Feature grid — flat image-on-top cards (no heavy shadow) ───────────── */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: none; }
.feature-card .media { border: 0; border-bottom: 1px solid var(--gray-300); border-radius: 0; }
.feature-card .media img { transition: transform var(--dur-hover) var(--ease-custom); }
.feature-card:hover .media img { transform: scale(1.05); }
.feature-body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.feature-body .eyebrow { margin-bottom: var(--space-2); color: var(--blue); }
.feature-body h3 { margin: 0 0 var(--space-3); font-size: 1.15rem; min-height: 2.8rem; }
.feature-body p { color: var(--gray-600); margin-bottom: var(--space-5); font-size: 0.98rem; min-height: 4.5rem; }
.feature-body .btn-link { margin-top: auto; }

/* ── Teaser — alternating image + text ─────────────────────────────────── */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
  align-items: center;
}
.teaser + .teaser { margin-top: clamp(64px, 10vw, 140px); }
.teaser-media .media { aspect-ratio: 4 / 3; }
.teaser-body .eyebrow { margin-bottom: var(--space-3); }

/* ── Tag labels — boxless display-font text (no pill) ───────────────────── */
.tag {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue); background: transparent;
  border: none; padding: 0 0 0 1rem; border-radius: 0;
}
.tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.45rem;
  height: 0.45rem;
  background: var(--blue);
}
html[dir="rtl"] .tag { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .tag::before { left: auto; right: 0; }
.tag-row {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: auto; padding-top: var(--space-4);
}

/* ── Newsroom "coming soon" panel (honest placeholder, no dead links) ───── */
.news-soon {
  border: var(--rule);
  border-top: var(--rule-2);
  padding: var(--space-9) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.news-soon-badge {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0;
  border: none;
  border-radius: 0;
}
.news-soon h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0; }
.news-soon p { max-width: 52ch; margin: 0; }
.news-soon .btn { margin-top: var(--space-2); }

/* ── Teaser image: gentle zoom on card hover (custom cue) ────────────── */
.feature-card .media img { transition: transform 600ms ease; }
.feature-card:hover .media img { transform: scale(1.05); }

/* ── Homepage quicklink tiles: one big image tile + small data tiles ───── */
.tile-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
}
.tile {
  position: relative;
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
  border: 1px solid var(--gray-300);
  box-shadow: none;
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-custom), box-shadow var(--dur-hover) var(--ease-custom);
}
.tile:hover { transform: translateY(-6px); box-shadow: none; }

/* Big image tile: photo + dark scrim + white label */
.tile--lg { color: var(--white); border: 0; min-height: 360px; }
.tile--lg .tile-media { position: absolute; inset: 0; z-index: 0; }
.tile--lg .tile-media img, .tile--lg .tile-media svg { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms ease; }
.tile--lg:hover .tile-media img { transform: scale(1.05); }
.tile--lg .tile-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.10) 0%, rgba(17,17,17,0.78) 100%); }
.tile--lg .tile-body { position: relative; z-index: 1; margin-top: auto; padding: var(--space-6); }
.tile--lg .tile-body h3 { color: var(--white); margin: 0 0 var(--space-2); font-size: clamp(1.3rem,2vw,1.6rem); }
.tile--lg .tile-body p { color: rgba(255,255,255,0.82); margin: 0; max-width: 42ch; }

/* Small data tiles: white index card, category accent rail + arrow */
.tile--data { flex-direction: column; justify-content: space-between; padding: var(--space-6);
  background: var(--white); border-top: 3px solid var(--border); }
.tile--data .tile-eyebrow { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.tile--data h3 { margin: var(--space-3) 0 0; font-size: 1.4rem; }
.tile--data .tile-meta { margin-top: var(--space-2); color: var(--gray-600); font-size: 0.9rem; }
.tile--data .tile-arrow { margin-top: var(--space-5); color: var(--blue); font-size: 1.4rem; line-height: 1;
  transition: transform var(--transition), color var(--transition); }
.tile--data:hover { border-top-color: var(--orange); }
.tile--data:hover .tile-arrow { transform: translateX(4px); color: var(--orange); }

/* ── Stats: dark treatment (orange eyebrow on dark) ────────────────────── */
.section--stats { background: var(--surface-dark); }
.section--stats .stat-num { color: var(--white); }
.section--stats .stat-num span { color: var(--orange); }
.section--stats .stat-label { color: rgba(255,255,255,0.60); }
.section--stats .section-head h2 { color: var(--white); }
.section--stats .eyebrow { color: var(--orange); }

/* ── Find-a-product / Find-your-industry split strip (signature) ───────── */
.find-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 5;
}
.find-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) var(--space-5);
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition);
}
.find-tab svg { width: 22px; height: 22px; flex: none; transition: transform var(--dur-hover) var(--ease-custom); }
.find-tab:hover svg { transform: translateX(4px); }
.find-tab--dark  { background: var(--surface-dark); color: var(--white); }
.find-tab--dark:hover  { background: var(--surface-dark); color: var(--orange); }
.find-tab--light { background: var(--surface); color: var(--text); }
.find-tab--light:hover { background: var(--surface-muted); color: var(--orange-d); }

/* ── Carousel (What are we doing?) — blue arrows, orange on hover ───────── */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.carousel-head .section-head { margin-bottom: 0; }
.carousel-nav {
  display: flex;
  gap: var(--space-5);
  flex: none;
  justify-content: center;
  margin-top: var(--space-6);
}
.carousel-btn {
  width: 48px; height: 48px;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition), opacity var(--transition);
}
.carousel-btn:hover:not(:disabled) { color: var(--orange); }
.carousel-btn:disabled { opacity: 0.32; cursor: default; }
.carousel-btn svg { width: 22px; height: 22px; }
.carousel-track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 clamp(280px, 32%, 384px);
  scroll-snap-align: start;
}
.carousel-slide .news-card { height: 100%; }

/* ── Brand block (We are here for: …) ──────────────────────────────────── */

/* ── Split row (gray text box + media box) ─────────────────────────────── */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.split-box { border-radius: var(--radius-lg); overflow: hidden; }
.split-box--gray {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: flex; flex-direction: column; justify-content: center;
}
.split-box--gray .btn-link { margin-top: var(--space-5); }
.split-box--media { position: relative; min-height: 300px; border: 1px solid var(--gray-300); }
.split-box--media .media {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  border: 0; border-radius: 0; aspect-ratio: auto;
}
.split-caption {
  position: absolute;
  left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.split-caption h3 { margin: 0 0 var(--space-2); }
.split-caption p { margin: 0 0 var(--space-3); color: var(--gray-600); font-size: 0.95rem; }

/* ── Perform row (dark media panel + light data panel) ─────────────────── */
.perform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.perform-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  border: 1px solid var(--gray-300);
}
.perform-media .media {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  border: 0; border-radius: 0; aspect-ratio: auto;
}
.perform-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.15) 0%, rgba(17,17,17,0.82) 100%);
}
.perform-label .eyebrow { color: var(--orange); }
.perform-label .btn-link { color: var(--white); }
.perform-label .btn-link:hover { color: var(--orange); }
.perform-data {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: flex; flex-direction: column; justify-content: center;
}
.perform-data .stats { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

/* ── Blue CTA band (white heading/subline + orange button) ─────────────── */
.cta-band--blue { background: var(--blue-wash2); }
.cta-band--blue::before { background: var(--orange); z-index: 10; z-index: 1; }
.cta-band--blue h2 { color: var(--text); }
.cta-band--blue p { color: var(--text-muted); }

/* ── Product catalog (filter active = orange; text-first cards) ─────────── */
.filter-tab {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-600);
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  border: 1.5px solid var(--gray-300);
  border-radius: 99px;
  background: var(--surface);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  user-select: none;
  white-space: nowrap;
}
.filter-tab:hover { border-color: var(--orange); color: var(--orange-d); }
.filter-tab.active { background: var(--orange); z-index: 10; color: var(--white); border-color: var(--orange); }
.filter-tab:not(.active) .tab-count { background: var(--gray-100); color: var(--gray-600); }

/* ── Product list → editorial ledger (no cards): framed rows, click-through ─ */
.product-list { border-top: var(--rule-2); }
.product-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);   /* collapses with next row's top */
  margin-top: -1px;                            /* avoid double hairline between rows */
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-left var(--transition), background var(--transition);
}
.product-list .product-row:first-child { border-top: 0; margin-top: 0; }
.product-list .product-row:last-child { border-bottom: var(--rule-2); }
/* per-category accent rail (revealed on hover) */
.product-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gray-300); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.product-row[data-category="acrylics"]::before  { background: var(--blue); }
.product-row[data-category="alkyds"]::before     { background: var(--orange); z-index: 10; }
.product-row[data-category="additives"]::before  { background: var(--gray-600); }
.product-row:hover { padding-left: var(--space-5); background: var(--gray-100); }
.product-row:hover::before { transform: scaleX(1); }
.product-row[style*="display: none"] { display: none !important; }

.pr-main { flex: 1; min-width: 0; }
.pr-code {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--black);
  line-height: 1.15;
}
.pr-type { font-size: 0.9rem; color: var(--gray-600); margin-top: 0.3rem; }
.pr-tags { flex-shrink: 0; gap: var(--space-2); margin-top: 0; padding-top: 0; justify-content: flex-end; }

/* Reuse the news-ledger circular arrow for the click-through affordance */
.product-row .row-arrow {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gray-300);
  font-size: 1.05rem; line-height: 1; color: var(--blue);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.product-row:hover .row-arrow {
  background: var(--orange); z-index: 10; border-color: var(--orange); color: var(--white);
  transform: translateX(2px);
}
/* Grade index (in-page jump rows live in the gray band): nudge the ↓ down */
.section--gray .product-row:hover .row-arrow { transform: translateY(2px); }

/* ── Products chooser: full-width alternating group bands (de-boxed) ────── */
.group-band .teaser-media .media { overflow: hidden; }
.group-band .teaser-media .media img { transition: transform 600ms var(--ease-custom, ease); }
.group-band:hover .teaser-media .media img { transform: scale(1.03); }
/* category-colour accent under the group name */
/* CTA reads like .btn-link; arrow nudges + turns orange on band hover */

/* ── Category sections (text-first, left accent line) ──────────────────── */

/* ── Interior page header / content teaser → single-column text ────────── */
.page-head .teaser,
section.section > .container > .teaser {
  grid-template-columns: 1fr;
  max-width: 720px;
}
/* Opt a section teaser back into the two-column (text + media) layout */
section.section > .container > .teaser.teaser--split {
  grid-template-columns: 1fr 1fr;
  max-width: none;
}

/* ── Carousel card radius (custom near-square) ───────────────────────── */
.slide-card { border-radius: 4px; }
.slide-card .slide-img { border-radius: 4px 4px 0 0; }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .teaser { gap: var(--space-6); }
}

@media (max-width: 960px) {
  .tile-row { grid-template-columns: 1fr 1fr; }
  .tile--lg { grid-column: 1 / -1; }
  .split-row, .perform-row { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    /* absolute + top:100% anchors the drawer to the header's real bottom
       edge in every state (utility bar visible, condensed .scrolled height)
       — a fixed inset would assume the 84px resting height and misalign.
       NOTE: keep .site-header free of overflow, transform, filter, and
       backdrop-filter or this drawer breaks (see §43 note). */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--gray-300);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5) var(--space-6);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform 260ms ease, visibility 0s linear 260ms;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav.open {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  .primary-nav a:not(.btn) {
    padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--gray-300);
    border-left: 3px solid transparent;
    font-size: 1.1rem;
    transition: background var(--dur-micro) var(--ease-custom),
                border-left-color var(--dur-micro) var(--ease-custom),
                padding-left var(--dur-micro) var(--ease-custom);
  }
  .primary-nav a:not(.btn)::after { display: none; }
  /* Mobile drawer has no underline indicator (display:none above), so the
     current page needs its own accent — a left orange bar, matching the
     thin-line language used everywhere else on the site (eyebrow ticks,
     top-rules). Without this the active link was visually identical to
     every other link in the stacked list. */
  .primary-nav a:not(.btn):hover,
  .primary-nav a:not(.btn):focus-visible {
    background: var(--surface-muted);
    padding-left: var(--space-5);
  }
  .primary-nav a.is-active,
  .primary-nav a[data-panel][aria-expanded="true"] {
    border-left-color: var(--orange);
    background: var(--surface-muted);
    color: var(--orange-d);
  }
  .primary-nav .btn { margin-top: var(--space-4); justify-content: center; }
  .nav-search { align-self: flex-start; margin-top: var(--space-3); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

@media (max-width: 768px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* Product rows: code + arrow share the first line, tags wrap below */
  .product-row { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .pr-main { flex: 1 1 auto; }
  .pr-tags { order: 3; flex-basis: 100%; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .teaser { grid-template-columns: 1fr; gap: var(--space-6); }
  .teaser + .teaser { margin-top: var(--space-8); }
  .tile-row { grid-template-columns: 1fr; }
  .hero--home { min-height: clamp(440px, 68vh, 600px); }
  .hero--compact { min-height: clamp(260px, 38vh, 360px); }
}

@media (max-width: 700px) {
  .find-tabs { grid-template-columns: 1fr; }
  .carousel-slide { flex-basis: 86%; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .section { padding-block: clamp(48px, 8vw, 80px); }
}

@media (max-width: 520px) {
  .product-row { padding: var(--space-5) 0; }
  .carousel-slide { flex-basis: 100%; }
  .carousel-head { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion: freeze polymer + reveal, disable smooth scroll ─────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .feature-card:hover .media img,
  .tile--lg:hover .tile-media img { transform: none; }
  .carousel-track { scroll-behavior: auto; }
}

/* ==========================================================================
   19. custom PASS 2 — mega-menu · teaser polish · brand band · footer logo
   ========================================================================== */

/* ── Teaser card polish ─────────────────────────────────────────────────── */
.feature-card .media { position: relative; }
.feature-card .media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,17,17,0) 55%, rgba(17,17,17,0.20) 100%);
}
.feature-card .feature-body .eyebrow {
  align-self: flex-start;
  margin-bottom: var(--space-3);
}
.feature-card:hover { border-color: var(--gray-600); }

/* ── "We are here for" brand band — contained mark, calmer ─────────────── */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
}

/* ==========================================================================
   20. custom PASS 3 — light rhythm, image-dominant teasers, tile stats,
   filled news chips, arrow polish, hero-docked CTA bar
   ========================================================================== */

/* Grid gaps → custom ~20px */
.carousel-track { gap: var(--gap-grid); }

/* Lighter category heading */

/* Footer contrast bump for the lighter charcoal bg */
.footer-bottom,
.footer-legal a { color: rgba(255,255,255,0.62); }

/* ── Image-dominant teaser cards (carousel) ────────────────────────────── */
.feature-card .media { aspect-ratio: 4 / 3; }
.feature-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.feature-body h3 { font-size: 1.05rem; font-weight: 500; }
.feature-body p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: var(--space-4);
}

/* ── Tile data: big stat number + dark variant ─────────────────────────── */
.tile-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--black);
  margin-top: var(--space-3);
}
.tile-stat span { color: var(--orange); }
.tile--data.tile--dark { background: var(--surface-dark); border-top-color: rgba(255,255,255,0.25); }
.tile--data.tile--dark .tile-eyebrow,
.tile--data.tile--dark h3,
.tile--data.tile--dark .tile-stat,
.tile--data.tile--dark .tile-arrow { color: var(--white); }
.tile--data.tile--dark .tile-meta { color: rgba(255,255,255,0.66); }
.tile--data.tile--dark:hover { border-top-color: var(--orange); }
.tile--data.tile--dark:hover .tile-arrow { color: var(--orange); }

/* ── Arrow-link nudge unified (springy) ────────────────────────────────── */
.btn-link::after,
.tile--data .tile-arrow,
.footer-legal a::after {
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), color var(--transition);
}

/* ── Hero-docked CTA bar (home only): find-tabs flush at image bottom ───── */
.hero .find-tabs--hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; }
.hero .find-tabs--hero .find-tab { padding-block: clamp(0.85rem, 1.6vw, 1.15rem); }

@media (max-width: 700px) {
  .hero .find-tabs--hero { position: static; }
}

/* ==========================================================================
   21. custom MOTION — word-stagger reveal, hero entrance wipe, drapes hover,
   carousel dark-fill, underline reveal. GPU-only (transform/opacity/clip-path).
   ========================================================================== */

/* ── (A) Animated-text: per-word rise+fade, staggered, on scroll reveal ── */
.reveal-words { opacity: 1; transform: none; }
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em);
  transition: opacity var(--dur-word) var(--ease-custom),
              transform var(--dur-word) var(--ease-custom);
  transition-delay: calc(var(--i, 0) * var(--word-step));
}
.reveal-words.is-visible .word { opacity: 1; transform: translateY(0); }

/* ── (B) Hero entrance: photo wipes in L→R + CTA fades (JS-armed) ───────── */
[data-hero].hero-armed .hero-media { clip-path: inset(0 100% 0 0); }
[data-hero].hero-armed.initialized .hero-media {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-hero) var(--ease-custom);
}
/* Docked CTA fade only where it actually overlaps the hero (desktop); below 700px
   it flows static under the hero, so a delayed fade would just blank the strip. */
@media (min-width: 701px) {
  [data-hero].hero-armed .find-tabs--hero { opacity: 0; }
  [data-hero].hero-armed.initialized .find-tabs--hero {
    opacity: 1;
    transition: opacity var(--dur-hero) var(--ease-custom);
    transition-delay: var(--dur-hero);
  }
}

/* ── (C) Drapes wipe — translucent panel sweeps the big image tile ─────── */
.tile--lg .tile-media { position: relative; overflow: hidden; }
.drapes {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(17,17,17,0.12);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
  pointer-events: none;
}
.tile--lg:hover .drapes { transform: scaleX(1); }

/* custom restraint: tiles/cards don't zoom or lift — neutralize prior FX */
.tile:hover { transform: none; box-shadow: none; }
.tile--lg:hover .tile-media img { transform: none; }
.feature-card:hover { transform: none; box-shadow: none; }
.feature-card:hover .media img { transform: none; }

/* ── (D) Carousel card dark-fill hover (custom teaser hover) ─────────── */
.carousel-slide .news-card,
.carousel-slide .news-card .feature-body,
.carousel-slide .news-card h3,
.carousel-slide .news-card p,
.carousel-slide .news-card .eyebrow,
.carousel-slide .news-card .btn-link {
  transition: background var(--dur-hover) var(--ease-custom),
              color var(--dur-hover) var(--ease-custom),
              border-color var(--dur-hover) var(--ease-custom);
}
.carousel-slide .news-card:hover { background: var(--surface-dark); border-color: var(--surface-dark); }
.carousel-slide .news-card:hover h3 { color: var(--white); }
.carousel-slide .news-card:hover p { color: rgba(255,255,255,0.78); }
.carousel-slide .news-card:hover .eyebrow { color: var(--white); }
.carousel-slide .news-card:hover .btn-link { color: var(--orange); }
.carousel-slide .news-card:hover .media { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.12); }

/* ── (E) Scroll-triggered underline reveal on a heading ────────────────── */
.underline-reveal { position: relative; padding-bottom: var(--space-3); }
.underline-reveal::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 64px;
  background: var(--orange); z-index: 10;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.underline-reveal.is-visible::after { transform: scaleX(1); }

/* ── Reduced motion: resolve every new effect to its final static state ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-words .word { opacity: 1; transform: none; transition: none; }
  [data-hero].hero-armed .hero-media { clip-path: none; }
  [data-hero].hero-armed .find-tabs--hero { opacity: 1; }
  .drapes, .tile--lg:hover .drapes { transform: scaleX(0); }
  .underline-reveal::after { transform: scaleX(1); }
}

/* ==========================================================================
   22. DE-BOX — custom borderless: strip card borders / radius / shadows.
   Structure now comes from the image edge, whitespace, hairline dividers + fills.
   ========================================================================== */
.media,
.feature-card,
.tile,
.split-box--gray, .split-box--media,
.perform-media, .perform-data,
.grade, .table-scroll,
.cta-band { border-radius: 0; }

.media { border: 0; }
.feature-card { border: 0; }
.feature-card .media { border-bottom: 0; }
.tile { border: 0; }
.split-box--gray, .split-box--media, .perform-media, .perform-data { border: 0; }

/* Grades: whitespace + hairline top-divider instead of bordered panels */
.grade { border: 0; padding-left: 0; padding-right: 0; }
.grade + .grade { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--hairline); }

/* Spec tables: borderless, hairline row dividers only (drop wrapper + zebra) */
.table-scroll { border: 0; }
table.spec tbody tr:nth-child(even) { background: transparent; }

/* Brand mark: plain logo, no tile */

/* Download list: hairline rows, not bordered buttons */
.download-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.download-list a { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 0.95rem 0; }
.download-list a:hover { background: transparent; color: var(--orange-d); }

/* Filter bar rule → hairline */

/* ── Emotional statement band (custom text-led block) ────────────────── */
.emotional { max-width: 880px; }
.emotional .eyebrow { margin-bottom: var(--space-4); }
.emotional h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: var(--space-5); }
.emotional .lead { margin-bottom: var(--space-6); max-width: 72ch; }

/* ── De-box review fixes ───────────────────────────────────────────────── */
/* S2: download rows read as links (blue at rest, gray-fill target on hover) */
.download-list a { color: var(--blue); }
.download-list a:hover { background: var(--gray-100); color: var(--orange-d); }
/* S3: guard — color-fill blocks flip to white on a gray section (custom pattern) */
.section--gray .split-box--gray,
.section--gray .perform-data { background: var(--surface); }
/* N1: stronger header rule on borderless spec tables */
table.spec thead th { border-bottom: 2px solid var(--gray-600); }

/* ==========================================================================
   23. BLACK LINE-GRID — custom straight-line structure (#111) with orange/
   blue accents. Single top-rules only (structure, never frames). De-box intact.
   ========================================================================== */

/* a. Section dividers — container-width black line between sections (top only).
   Padding-top keeps content (boxes, bands) off the line. */
.section + .section > .container { border-top: var(--rule); padding-top: clamp(48px, 6vw, 80px); }
.hero + .section > .container { border-top: 0; padding-top: 0; }    /* index: no line under hero */
.section--dark + .section > .container,
.section--stats + .section > .container,
.section + .section--dark > .container,
.section + .section--stats > .container { border-top: 0; padding-top: 0; }  /* skip dark seams */

/* b. Eyebrow tick — short orange accent line before the label */
.eyebrow { position: relative; padding-left: 2.4rem; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 1.6rem; height: 2px; background: var(--orange); z-index: 10; }
.feature-card .eyebrow { padding-left: 0; }
.feature-card .eyebrow::before { content: none; }
/* on dark surfaces the tick follows the text colour so it shows on photo/black */
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.section--stats .eyebrow::before,
.perform-label .eyebrow::before { background: currentColor; }

/* c. Header + utility bottom rule → black (persists through .scrolled) */
.utility-bar { border-bottom: var(--rule); }
.site-header { border-bottom: 1px solid var(--blue); }

/* d. Breadcrumb top rule → black (interior pages) */
.breadcrumb { border-top: var(--rule); padding-top: var(--space-5); }

/* e. Spec tables — the literal black data grid */
table.spec { border-top: var(--rule-2); border-bottom: var(--rule-2); }
table.spec thead th { border-bottom: var(--rule-2); }
table.spec th, table.spec td { border-bottom: var(--rule); }
table.spec tbody tr:last-child td { border-bottom: var(--rule); }

/* f. Grade dividers → black */
.grade + .grade { border-top: var(--rule); }

/* g. Product catalog dividers → black (category colour rails/ticks kept as accents) */

/* h. Footer vertical separators (white analogue on dark) + utility verticals */
.footer-grid > * { position: relative; }
.footer-grid > * + *::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--space-7) / -2); width: 1px; background: rgba(255,255,255,0.14); }
@media (max-width: 1024px) { .footer-grid > * + *::before { display: none; } }

/* ==========================================================================
   24. SECTION UPGRADES — custom editorial polish. Single rules only
   (de-box + line-grid preserved; never a full frame on a card).
   ========================================================================== */


/* Perform stats → frameless data-band: short black rule above each figure */
.perform-data .stats > div { border-top: var(--rule); padding-top: var(--space-4); }

/* Carousel cards → 2px black baseline rule (structure, not a box) */
.carousel-slide .news-card { border-bottom: var(--rule-2); }
.carousel-slide .news-card:hover { border-bottom-color: rgba(255,255,255,0.18); }   /* baseline stays visible on dark-fill hover */

/* CTA band → a touch more breathing room + medium-weight title */
.cta-band h2 { font-weight: 500; }

/* ==========================================================================
   25. MOTION — cascade: staggered child reveal via the EXISTING .is-visible
   observer (add `cascade` to a `.reveal` parent; children stream in).
   ========================================================================== */
.cascade { opacity: 1; transform: none; }            /* neutralize the block-level reveal */
.cascade > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-custom), transform var(--dur-reveal) var(--ease-custom);
}
.cascade.is-visible > * { opacity: 1; transform: none; }
.cascade.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.cascade.is-visible > *:nth-child(3) { transition-delay: 240ms; }
.cascade.is-visible > *:nth-child(4) { transition-delay: 360ms; }
.cascade.is-visible > *:nth-child(5) { transition-delay: 480ms; }
.cascade.is-visible > *:nth-child(6) { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .cascade > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   26. REDESIGN — home horizontal tile (balanced 8/4 image+text) + products
   refined editorial cards. De-box / line-grid / motion / palette preserved.
   ========================================================================== */

/* ── Home tile-row: clean WHITE "index cards" — brand colour as a thin
      accent only (top-rule + big numeral + arrow/hover), matching the
      feather panels. tile--dark no longer paints a solid fill. ──────────── */
.tile-row--home .tile--data,
.tile-row--home .tile--data.tile--dark {
  background: var(--page-bg);
  border: 1px solid var(--border) !important;       /* beat the global de-box `!important` border */
  border-top: 3px solid var(--border) !important;   /* category colour set below */
  color: var(--text);
}
.tile-row--home .tile--data .tile-eyebrow,
.tile-row--home .tile--data.tile--dark .tile-eyebrow { color: var(--text-muted); }
.tile-row--home .tile--data h3,
.tile-row--home .tile--data.tile--dark h3 { color: var(--text); }
.tile-row--home .tile--data .tile-meta,
.tile-row--home .tile--data.tile--dark .tile-meta { color: var(--text-muted); }
.tile-row--home .tile--data .tile-arrow,
.tile-row--home .tile--data.tile--dark .tile-arrow { color: var(--text-muted); }
.tile-row--home .tile--data .tile-stat,
.tile-row--home .tile--data.tile--dark .tile-stat,
.tile-row--home .tile--data .tile-stat span,
.tile-row--home .tile--data.tile--dark .tile-stat span { color: var(--text); }
.tile-row--home .tile--data:hover { transform: translateY(-6px); box-shadow: none; }
/* Big image tile gets a matching hairline frame (it ships with border:0). */
.tile-row--home .tile--lg { border: 1px solid var(--border); }
.tile-row--home .tile--lg:hover { transform: translateY(-6px); box-shadow: none; }

/* Per-category accent — acrylics = blue, alkyds = orange, additives = charcoal
   (mirrors the product-catalog category colours). Big colour lives in the
   numeral; the 3px top-rule + hover arrow echo it. */
.tile-row--home .tile--data.tile[href="/acrylics"] { border-top-color: var(--blue) !important; }
.tile-row--home .tile--data.tile[href="/acrylics"] .tile-stat,
.tile-row--home .tile--data.tile[href="/acrylics"] .tile-stat span,
.tile-row--home .tile--data.tile[href="/acrylics"]:hover .tile-arrow { color: var(--blue); }
.tile-row--home .tile--data.tile[href="/acrylics"]:hover { border-top-color: var(--blue) !important; }

.tile-row--home .tile--data.tile[href="/alkyd-resins"] { border-top-color: var(--orange-d) !important; }
.tile-row--home .tile--data.tile[href="/alkyd-resins"] .tile-stat,
.tile-row--home .tile--data.tile[href="/alkyd-resins"] .tile-stat span,
.tile-row--home .tile--data.tile[href="/alkyd-resins"]:hover .tile-arrow { color: var(--orange-d); }
.tile-row--home .tile--data.tile[href="/alkyd-resins"]:hover { border-top-color: var(--orange-d) !important; }

.tile-row--home .tile--data.tile[href="/additives"] { border-top-color: var(--text) !important; }
.tile-row--home .tile--data.tile[href="/additives"] .tile-stat,
.tile-row--home .tile--data.tile[href="/additives"] .tile-stat span,
.tile-row--home .tile--data.tile[href="/additives"]:hover .tile-arrow { color: var(--text); }
.tile-row--home .tile--data.tile[href="/additives"]:hover { border-top-color: var(--text) !important; }

/* ── Home tile-row: big tile (image | charcoal text panel) + stacked data ── */
.tile-row { grid-template-columns: 8fr 4fr; align-items: stretch; }
.tile-stack { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: var(--space-4); min-width: 0; }
.tile-stack > .tile { min-height: 0; height: 100%; }

.tile--lg { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 340px; overflow: hidden; border-radius: var(--radius-lg); }
.tile--lg .tile-media { grid-column: 1; grid-row: 1; position: relative; inset: auto; height: 100%; min-height: 0; overflow: hidden; }
.tile--lg .tile-media img, .tile--lg .tile-media svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-hero) var(--ease-custom); }
.tile--lg:hover .tile-media img { transform: scale(1.05); }
.tile--lg .tile-media::after { 
  content: ""; position: absolute; inset: 0; 
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.15) 30%, rgba(13,13,13,0.85) 100%); 
  display: block; 
}
.tile--lg .tile-body {
  grid-column: 1; grid-row: 1; z-index: 1; align-self: end; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: clamp(1.4rem, 2.2vw, 2.5rem);
  background: transparent; color: var(--white);
  border-top: none;
}
.tile--lg .tile-body .eyebrow { color: var(--white); padding-left: 0; opacity: 0.9; letter-spacing: 0.15em; }
.tile--lg .tile-body .eyebrow::before { content: none; }   /* flush on the narrow panel */
.tile--lg .tile-body h3 { color: var(--white); margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.tile--lg .tile-body p { color: rgba(255,255,255,0.85); margin: 0; max-width: 44ch; font-size: 1.05rem; }
.tile--lg .tile-body .tile-arrow {
  margin-top: var(--space-2); color: var(--white); font-size: 1.5rem; line-height: 1;
  transition: transform var(--transition), color var(--transition);
}
.tile--lg:hover .tile-body .tile-arrow { transform: translateX(6px); color: var(--orange); }
.tile--data { height: 100%; }

@media (max-width: 960px) {
  .tile-row { grid-template-columns: 1fr; }
  .tile--lg { grid-column: auto; }
  .tile-stack { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 768px) {
  .tile--lg { min-height: 420px; }
  .tile--lg .tile-media { aspect-ratio: unset; }
  .tile-stack { grid-template-columns: 1fr; }
}

/* ── Products: flat segmented filter tabs (drop the pill) ───────────────── */
.filter-tab { border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent;
  padding: 0.5rem 0.9rem; color: var(--gray-600); }
.filter-tab:hover { color: var(--black); border-bottom-color: var(--gray-300); }
.filter-tab.active { background: transparent; color: var(--black); border-bottom-color: var(--orange); }
.filter-tab.active .tab-count { background: var(--orange); z-index: 10; color: var(--white); }

/* ── Products: category headers (kicker + heavier h2 + colour underline) ── */

/* ==========================================================================
   27. PRODUCT DETAIL, FINDER & COMPARE — additive only.
   New surfaces: <grade>.html detail pages, all-products.html, compare.html.
   Appended last so it wins the cascade; references existing tokens only.
   Nothing above this line is modified.
   ========================================================================== */

/* 27a. Single-grade spec table → clean 2-col key→value, fits mobile */
table.spec.spec--detail { min-width: 0; }
table.spec.spec--detail th[scope="row"] { width: 38%; white-space: normal; }

/* 27b. Per-category accent rail on key-property stat tiles (mirrors .product-row) */
.tile--data[data-category="acrylics"]  { border-top-color: var(--blue); }
.tile--data[data-category="alkyds"]    { border-top-color: var(--orange); }
.tile--data[data-category="additives"] { border-top-color: var(--gray-600); }

/* 27c. Key-property tile grid (auto-fit, wraps on small screens) */

/* 27d. "At a glance" bullet lists — short orange dash markers */
.spec-list { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.spec-list li { position: relative; padding-left: 1.6rem; color: var(--gray-600); line-height: 1.5; }
.spec-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 2px; background: var(--orange); z-index: 10; }
.spec-list--blue-square li::before { top: 0.55em; width: 0.45rem; height: 0.45rem; background: var(--blue); }

/* 27e. Product rows now always open a detail page → nudge the arrow sideways
   (overrides the older in-page-jump down-nudge at §6/line ~1079). */
.section--gray .product-row:hover .row-arrow,
.related-grades .product-row:hover .row-arrow { transform: translateX(4px); }

/* 27f. Product finder (all-products.html): search field + filter chips + states */
.finder-search { position: relative; }
.finder-search > svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--gray-600); pointer-events: none; }
.finder-search input { width: 100%; font: inherit; color: var(--black); border-radius: var(--radius);
  padding: 0.95rem 1rem 0.95rem 2.9rem; border: 1px solid var(--gray-300); background: var(--surface);
  transition: border-color var(--transition); }
.finder-search input:focus { outline: none; border-color: var(--blue); }
.finder-chips .filter-tab { font: inherit; font-weight: 600; cursor: pointer; }

/* 27g. Compare tool (compare.html): slot dropdowns + side-by-side table */
.compare-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5); margin-bottom: var(--space-6); }
.compare-slot { border-top: var(--rule-2); padding-top: var(--space-4);
  transition: border-color var(--dur-micro); }
.compare-slot:focus-within { border-top-color: var(--orange); }
.compare-slot-label { display: block; font-family: var(--font-display); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--space-3); }
.compare-select { width: 100%; font: inherit; font-size: 1rem; color: var(--black);
  padding: 0.85rem 2.6rem 0.85rem 1rem; border: 1px solid var(--gray-300);
  border-radius: var(--radius); background-color: var(--surface); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23323232' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px;
  transition: border-color var(--transition); }
.compare-select:hover { border-color: var(--ink); }
.compare-select:focus { outline: none; border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange); }
table.compare-table th[scope="col"] { font-family: var(--font-display); white-space: normal; vertical-align: bottom; }
table.compare-table th[scope="col"] a { color: var(--black); }
table.compare-table th[scope="col"] a:hover { color: var(--orange-d); }
.compare-empty { color: var(--gray-600); padding: var(--space-6) 0; }
.compare-empty[hidden] { display: none; }

/* ==========================================================================
   28. custom POLISH (keep orange) — added pass
   Charcoal body ink, tighter headings, custom secondary/ghost buttons,
   animated "more" link. Structural black rules are untouched.
   ========================================================================== */
:root { --ink: var(--text); --ink-soft: var(--text-muted);
  --score-exc-bg: #E3F6E8; --score-exc-fg: #2f7d4a;
  --score-good-bg: #FCEDD5; --score-good-fg: #B85C12;
  --score-ok-bg:  #EEF0F2; --score-ok-fg:  var(--text-muted); }

body { color: var(--ink); }
h1, h2, h3, h4, h5, h6 { color: var(--black); letter-spacing: -0.01em; }
.hero.on-dark h1 { color: var(--white); }

/* Secondary button → custom charcoal outline that thickens on hover */
.btn-secondary { color: var(--blue); border-color: var(--blue); background: transparent; }
.btn-secondary:hover { background: var(--blue); color: var(--white);
  border-color: var(--blue); border-width: 2px; }
.on-dark .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.6); }
.on-dark .btn-secondary:hover { background: transparent; color: var(--white); border-color: var(--white); border-width: 2px; }

/* Ghost / white button (for use on tinted bands) */

/* custom animated "more" link — charcoal text + arrow, nudges + turns orange */

/* Lighter, calmer detail spec table (custom data style) */
table.spec.spec--detail { border-top: none; border-bottom: none; }
table.spec.spec--detail thead th { background: var(--orange-wash2); color: var(--ink); }
table.spec.spec--detail th, table.spec.spec--detail td { border-bottom: 1px solid var(--blue-line); }
table.spec.spec--detail tbody tr:nth-child(even) { background: transparent; }
table.spec.spec--detail th[scope="row"] { color: var(--ink); font-weight: 600; }
table.spec.spec--detail td { color: var(--black); }

/* ==========================================================================
   29. PRODUCTS BROWSER (products.html) — Organik-style system, custom look
   ========================================================================== */

/* ── filter sidebar ── */
.plp-filters { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 0;
  border-top: var(--rule-2); }
.plp-filters-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0 var(--space-2); }
.plp-filters-title { margin: 0; font-size: 1.05rem; }
.flt-close { display: none; background: none; border: 0; font-size: 1.8rem; line-height: 1;
  color: var(--ink); cursor: pointer; padding: 0 0.25rem; }

.fgp { border-bottom: 1px solid var(--hairline); }
.fgp-header { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); background: none; border: 0; cursor: pointer; padding: var(--space-4) 0;
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); }
.fgp-header svg { width: 18px; height: 18px; flex: none; transition: transform var(--transition); color: var(--gray-600); }
.fgp.open .fgp-header svg { transform: rotate(180deg); }
.fgp-body { overflow: hidden; max-height: 0; transition: max-height var(--transition); }
.fgp.open .fgp-body { max-height: 520px; }
.fgp-opts { display: grid; gap: 0.1rem; padding-bottom: var(--space-4); }
.flt-opt { display: flex; align-items: center; gap: var(--space-3); padding: 0.42rem 0; cursor: pointer;
  color: var(--ink); font-size: 0.92rem; }
.flt-opt input { width: 1.02rem; height: 1.02rem; accent-color: var(--orange); flex: none; }
.flt-opt:hover { color: var(--black); }
.flt-reset { margin-top: var(--space-5); width: 100%; justify-content: center; }

/* ── controls row ── */
.plp-controls .finder-search { flex: 1 1 auto; }
.plp-count { color: var(--gray-600); font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.flt-open { display: none; align-items: center; gap: var(--space-2); }

/* ── product card grid ── */
.plp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5); }
.product-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--white); border: 1px solid var(--hairline); border-top: 4px solid var(--gray-300);
  border-radius: var(--radius); padding: var(--space-6); color: var(--ink); min-height: 280px;
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.product-card[data-category="acrylics"]  { border-top-color: var(--blue); }
.product-card[data-category="alkyds"]     { border-top-color: var(--orange); }
.product-card[data-category="additives"]  { border-top-color: var(--gray-600); }
.product-card:hover { border-color: var(--gray-300); box-shadow: none; transform: translateY(-3px); }
.pc-cat { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-600); }
.pc-code { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--black); line-height: 1.1; }
.pc-type { color: var(--ink-soft); font-size: 1rem; }
.pps-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: var(--space-3) 0 0; padding: 0; }
.pps { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.3rem 0.65rem;
  border-radius: 999px; background: var(--score-ok-bg); color: var(--score-ok-fg); }
.pps[data-score="excellent"] { background: var(--score-exc-bg); color: var(--score-exc-fg); }
.pps[data-score="very-good"] { background: var(--score-good-bg); color: var(--score-good-fg); }
.pps[data-score="suitable"]  { background: var(--score-ok-bg);  color: var(--score-ok-fg); }
.pps-more { background: transparent; color: var(--gray-600); border: 1px solid var(--hairline); }
.pc-arrow { margin-top: auto; align-self: flex-end; color: var(--gray-600); font-size: 1.25rem; line-height: 1;
  transition: transform var(--dur-hover) var(--ease-custom), color var(--transition); }
.product-card:hover .pc-arrow { transform: translateX(5px); color: var(--orange); }
.product-card[style*="display: none"] { display: none !important; }

/* ── mobile drawer ── */
@media (max-width: 900px) {
  .flt-open { display: inline-flex; }
  .flt-close { display: inline-block; }
  .plp-filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: min(86vw, 340px);
    background: var(--surface); border-top: 0; padding: var(--space-4) var(--space-5) var(--space-6);
    overflow-y: auto; transform: translateX(-100%); transition: transform var(--transition);
    box-shadow: 0 0 40px rgba(17,17,17,0.18); }
  .plp-filters.open { transform: translateX(0); }
  body.plp-drawer-open { overflow: hidden; }
  body.plp-drawer-open::after { content: ""; position: fixed; inset: 0; z-index: 150;
    background: rgba(17,17,17,0.45); }
}

/* 30. Group-page intro band — balanced two-column lead (fills width, not a lone column) */
.intro-band { gap: var(--space-7); align-items: start; }
.intro-band .section-head h2 { margin-top: var(--space-2); }
@media (max-width: 760px) { .intro-band { gap: var(--space-5); } }

/* 31. "SOON" / coming-soon state — pressable but inert (no href = no navigation) */
.is-soon { cursor: default; }
a.is-soon { pointer-events: auto; }
.group-band.is-soon { opacity: 0.92; }
.group-band.is-soon:hover { transform: none; }
.group-band.is-soon .group-cta { color: var(--gray-600); }
.footer-grid a.is-soon { color: rgba(255,255,255,0.5); }
.footer-grid a.is-soon:hover { color: rgba(255,255,255,0.5); }
.soon-badge {
  display: inline-block; vertical-align: middle;
  background: var(--surface-dark); color: #fff;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.26rem 0.66rem; border-radius: 999px; margin-left: 0.6rem;
}

/* 32. custom "bigger" scale — supplemental box / number / control bumps */
.feature-body h3 { font-size: 1.45rem; }
.feature-body p { font-size: 1.05rem; }
.tile-stat { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
.tile--data .tile-eyebrow { font-size: 0.78rem; }
.eyebrow { font-size: 0.82rem; }
.breadcrumb { font-size: 0.95rem; }
.plp-count { font-size: 1.05rem; }
.plp-filters-title { font-size: 1.2rem; }
.finder-search input { padding: 1.15rem 1.15rem 1.15rem 3rem; font-size: 1.05rem; }
.btn { font-size: 1rem; padding: 1.1rem 1.7rem; }
table.spec th, table.spec td { font-size: 1.02rem; }
/* keep mobile breathing room sane at the new scale */
@media (max-width: 760px) {
  .section { padding-block: clamp(48px, 9vw, 80px); }
  .hero--compact { min-height: clamp(360px, 56vh, 460px); }
}

/* 33. custom visual upgrade — kicker rule, media zoom, hover, footer presence */
/* crisp eyebrow kicker (orange rule before label) */
.eyebrow { padding-left: 2.7rem; }
.eyebrow::before { width: 2rem; height: 2px; top: 0.62em; }

/* teaser / group-band media: slow custom image zoom on hover */
.teaser-media .media { overflow: hidden; }
.teaser-media .media img { transition: transform var(--dur-hover) var(--ease-custom); }
.teaser:hover .media img { transform: scale(1.05); }

/* product cards: deeper lift shadow */
.product-card:hover { box-shadow: 0 16px 38px rgba(17,17,17,0.13); transform: translateY(-4px); }

/* footer presence — bigger, more structured */
.footer-grid { padding-block: clamp(72px, 9vw, 132px); gap: var(--space-8); }
.footer-grid h4 { font-size: 0.82rem; letter-spacing: 0.18em; margin-bottom: var(--space-5); }
.site-footer nav a, .footer-contact address, .footer-contact address a { font-size: 1.02rem; }
.footer-brand p { font-size: 1.05rem; max-width: 38ch; }
.footer-brand .logo-mark { height: 52px; }

/* header bar: vertically center the taller logo cleanly */
.header-inner { gap: var(--space-6); }

/* ==========================================================================
   34. custom top bar (icon-links) + working search + contrast
   ========================================================================== */
/* ── utility bar icon-links ── */
.utility-inner { justify-content: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.utility-bar .util-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--black); padding: 0; transition: color var(--transition);
}
.utility-bar .util-link svg { width: 15px; height: 15px; flex: none; }
.utility-bar .util-link:hover { color: var(--orange-d); }
.utility-bar .util-link[aria-pressed="true"] { color: var(--orange-d); }

/* ── main-nav vertical divider before the search button ── */
.nav-divider { width: 1px; height: 26px; background: var(--gray-300); align-self: center; margin-inline: var(--space-2); }
.nav-search { background: none; }

/* ── search overlay (custom-style drop panel) ── */
.search-overlay { position: fixed; inset: 0; z-index: 300; }
.search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,0.5); opacity: 0; transition: opacity 200ms ease; }
.search-overlay.is-open .search-backdrop { opacity: 1; }
.search-panel { position: relative; background: var(--surface); border-bottom: 1px solid var(--gray-300);
  box-shadow: 0 12px 44px rgba(17,17,17,0.18); transform: translateY(-14px); opacity: 0;
  transition: transform 220ms var(--ease-custom), opacity 220ms ease; }
.search-overlay.is-open .search-panel { transform: translateY(0); opacity: 1; }
.search-inner { padding-block: clamp(22px, 4vw, 44px) clamp(24px, 4vw, 48px); }
.search-form { display: flex; align-items: center; gap: var(--space-4); border-bottom: 2px solid var(--black); padding-bottom: var(--space-4); }
.search-ico { width: 26px; height: 26px; flex: none; color: var(--gray-600); }
.search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; padding: 0;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 500; color: var(--black); }
.search-input::placeholder { color: var(--gray-300); }
.search-close { background: none; border: 0; cursor: pointer; font-size: 2rem; line-height: 1; color: var(--ink); padding: 0 0.25rem; flex: none; }
.search-close:hover { color: var(--orange-d); }
.search-results { margin-top: var(--space-6); max-height: 62vh; overflow-y: auto; }
.search-hint { color: var(--gray-600); font-size: 1.05rem; }
.search-group + .search-group { margin-top: var(--space-6); }
.search-group-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-2); }
.search-group-label span { color: var(--gray-600); }
.search-group ul { list-style: none; display: grid; gap: 0; }
.search-group li a { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--hairline); color: var(--black);
  transition: padding-left var(--transition), background var(--transition); }
.search-group li a > :not(.sr-arrow) { transition: transform var(--transition); }
.search-group li a:hover > :not(.sr-arrow) { transform: translateX(8px); }
.search-group li a:hover { background: var(--gray-100); }
.sr-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.sr-sub { color: var(--gray-600); font-size: 0.95rem; }
.sr-arrow { margin-left: auto; color: var(--orange); font-size: 1.1rem; transition: transform var(--transition); }
.search-group li a:hover .sr-arrow { transform: translateX(4px); }
body.search-open { overflow: hidden; }
@media (max-width: 640px) {
  .search-input { font-size: 1.4rem; }
  .search-results { max-height: 70vh; }
}

/* ── high-contrast accessibility mode (toggled on <html>) ──────────────────
   Monochrome (black-and-white) filter for low-vision users. It desaturates
   and hardens the whole page while leaving every layout, box, border, and
   authored text colour EXACTLY as the normal theme — nothing is recoloured
   to pure black, no boxes change.

   Mechanism: a full-viewport fixed overlay whose `backdrop-filter` greyscales
   everything painted behind it. A plain `filter` on <html>/<body> could NOT
   be used here — it would become the containing block for the sticky header,
   the fixed back-to-top button, and every modal/overlay, re-anchoring and
   breaking them. The overlay touches paint only, never layout. */
html.contrast::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  -webkit-backdrop-filter: grayscale(100%) contrast(1.15);
  backdrop-filter: grayscale(100%) contrast(1.15);
}
/* Graceful degradation: if the engine lacks backdrop-filter, fall back to a
   plain greyscale filter on each top-level block. Slightly less crisp on
   fixed descendants, but colour is still removed for the low-vision user. */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  html.contrast::after { content: none; }
  html.contrast body > * { filter: grayscale(100%) contrast(1.12); }
}
/* ==========================================================================
   35. custom header placement + sitewide BOLD pass
   ========================================================================== */
/* ── header placement: utility left · logo left / nav centered / search right ── */
.utility-inner { justify-content: flex-start; gap: var(--space-6); }
.header-inner { gap: var(--space-6); }
.primary-nav { flex: 1 1 auto; justify-content: center;
  gap: clamp(var(--space-5), 2.4vw, var(--space-7)); }
.header-actions .nav-divider { height: 28px; }
.nav-toggle { margin-left: auto; }   /* mobile: push hamburger + search right (no effect on desktop) */

/* ── bold nav (custom) ── */
.primary-nav a:not(.btn) { font-weight: 700; font-size: 1.05rem; letter-spacing: 0; }

/* ── bold typography ── */
h1 { font-weight: 400; }
h2 { font-weight: 700; letter-spacing: -0.03em; }
h3 { font-weight: 700; }
.hero h1 { font-weight: 500; }
.hero.on-dark h1 { font-weight: 500; }
.cta-band h2 { font-weight: 700; }

/* ── bold buttons ── */
.btn { font-weight: 700; }

/* ── bold cards / stats ── */
.feature-body h3, .pc-code, .sr-title,
.tile--data h3, .tile--lg .tile-body h3 { font-weight: 700; }
.stat-num { font-weight: 800; }
.stat-label { font-weight: 600; color: var(--ink); }

/* ── a touch more section presence ── */
.section-head { margin-bottom: var(--space-9); }
.eyebrow { font-weight: 700; }

/* mobile: keep utility bar tidy when it wraps */
@media (max-width: 640px) {
  .utility-inner { gap: var(--space-4) var(--space-5); }
}

/* ==========================================================================
   37. Comprehensive custom pass — image-overlay cards + bigger titles
   ========================================================================== */
/* ── custom image-overlay teaser cards (homepage carousel) ── */
.carousel-slide .news-card {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(380px, 42vw, 470px);
  border: 0; border-radius: var(--radius); overflow: hidden; color: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carousel-slide .news-card .media {
  position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--surface-dark);
}
.carousel-slide .news-card .media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-hover) var(--ease-custom); }
.carousel-slide .news-card .media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.55) 56%, rgba(13,13,13,0.92) 100%); }
.carousel-slide .news-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(17,17,17,0.20); }
.carousel-slide .news-card:hover .media img { transform: scale(1.06); }
.carousel-slide .news-card .feature-body { position: relative; z-index: 1; margin-top: auto;
  padding: var(--space-6); }
.carousel-slide .news-card .feature-body .eyebrow { color: #fff; letter-spacing: 0.2em; }
.carousel-slide .news-card .feature-body h3 { color: #fff; }
.carousel-slide .news-card .feature-body p { color: rgba(255,255,255,0.88); }
.carousel-slide .news-card .feature-body .btn-link,
.carousel-slide .news-card .feature-body .btn-link:hover { color: #fff; }
.carousel-slide .news-card .feature-body .is-soon { color: rgba(255,255,255,0.9) !important; }
.carousel-slide .news-card .soon-badge { background: #fff; color: #111; }

/* ── bigger custom section titles (~58px desktop) ── */
h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.cta-band h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.emotional h2 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
.hero h1 { font-weight: 500; }

/* ── docked hero CTA: custom vertical divider between the two tabs ── */
.find-tabs--hero .find-tab--dark { border-right: 1px solid rgba(255,255,255,0.16); }
/* anchor the overlay card's text block to the bottom of the photo */
.carousel-slide .news-card .feature-body { flex: 0 0 auto; margin-top: auto; }

/* ==========================================================================
   38. custom scroll-condense header — the top section "changes/connects"
   on scroll: the utility bar scrolls away, the sticky header condenses
   (smaller logo + shorter bar) and locks to the top edge.
   ========================================================================== */
.header-inner { transition: min-height var(--transition); }
.logo-mark    { transition: height var(--transition); }
.site-header  { transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition); will-change: box-shadow; }

.site-header.scrolled .header-inner { min-height: 60px; }
.site-header.scrolled .logo-mark    { height: 38px; }
.site-header.scrolled .primary-nav a:not(.btn) { font-size: 0.98rem; }
.site-header.scrolled .nav-search   { width: 40px; height: 40px; }
.site-header.scrolled .nav-divider  { height: 22px; }
.site-header.scrolled { border-bottom: 1px solid var(--blue); box-shadow: 0 6px 20px rgba(17,17,17,0.10); }

/* ==========================================================================
   39. "We are here for" band — animated logo (left) + copy (right)
   ========================================================================== */
.emotional-band { display: grid; grid-template-columns: minmax(220px, 0.85fr) 1.15fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; }
.emotional-logo { display: flex; justify-content: center; }
.lm-logo { width: clamp(200px, 22vw, 340px); height: auto; overflow: visible; }
.emotional-copy .eyebrow { margin-bottom: var(--space-4); }
.emotional-copy h2 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); margin-bottom: var(--space-5); }
.emotional-copy .lead { margin-bottom: var(--space-6); max-width: 60ch; }

/* animatable parts pivot about their own centre.
   Build choreography (custom badge technique — sequential stroke draw-on
   + parts assembling): bars slide in, the keyline contour draws around the
   silhouette (stroke-dashoffset, pathLength=1 on the path), the two ring
   halves sweep in along the split diagonal, then a gentle ambient float.
   Transforms on inner <path> elements are in viewBox user units (1024-ish
   per logo width), so values here are ~3x their on-screen pixels. */
.lm-bar, .lm-hex { transform-box: fill-box; transform-origin: center; }
/* pre-reveal state (hidden / offset so there's no flash) */
.emotional-logo .lm-bar-left  { opacity: 0; transform: translateX(-120px); }
.emotional-logo .lm-bar-right { opacity: 0; transform: translateX(120px); }
.emotional-logo .lm-hex-left  { opacity: 0; transform: translate(-44px, 44px); }
.emotional-logo .lm-hex-right { opacity: 0; transform: translate(44px, -44px); }
.emotional-logo .lm-ring      { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }

/* assemble when scrolled into view; bars pick up a counter-phase ambient
   drift after landing (second animation in the list takes over transform).
   v17: slowed ~2.5x — deliberate custom build, ≈6s total before idle. */
.emotional-logo.is-visible .lm-bar-left {
  animation: lm-bar-in 1600ms var(--ease-logo) 200ms forwards,
             lm-drift-l 9s ease-in-out 6600ms infinite;
}
.emotional-logo.is-visible .lm-bar-right {
  animation: lm-bar-in 1600ms var(--ease-logo) 200ms forwards,
             lm-drift-r 9s ease-in-out 6600ms infinite;
}
.emotional-logo.is-visible .lm-ring      { animation: lm-ring-draw 3600ms var(--ease-custom) 900ms forwards; }
.emotional-logo.is-visible .lm-hex-left  { animation: lm-hex-in 1200ms var(--ease-logo) 4200ms forwards; }
.emotional-logo.is-visible .lm-hex-right { animation: lm-hex-in 1200ms var(--ease-logo) 4800ms forwards; }
/* gentle idle float of the whole mark after assembling */
.emotional-logo.is-visible .lm-logo { animation: lm-float 9s ease-in-out 6600ms infinite; }

@keyframes lm-bar-in { to { opacity: 1; transform: translateX(0); } }
@keyframes lm-hex-in { to { opacity: 1; transform: translate(0, 0); } }
@keyframes lm-ring-draw {
  0%   { opacity: 1; stroke-dashoffset: 1; stroke-width: 16; }
  85%  { stroke-width: 16; }
  100% { opacity: 1; stroke-dashoffset: 0; stroke-width: 10; }
}
@keyframes lm-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lm-drift-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateY(10px); } }
@keyframes lm-drift-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 760px) {
  .emotional-band { grid-template-columns: 1fr; text-align: center; gap: var(--space-6); }
  .emotional-logo { order: -1; }
  .emotional-copy .eyebrow { padding-left: 0; }
  .emotional-copy .eyebrow::before { content: none; }
  .emotional-copy .lead { margin-inline: auto; }
  /* the band is centered here — the orange rule centers under the heading
     (its base rule anchors left for the left-aligned desktop layout) */
  .emotional-copy .underline-reveal::after {
    left: 50%;
    right: auto;
    margin-left: -32px;   /* half the 64px rule */
    transform-origin: center;
  }
  html[dir="rtl"] .emotional-copy .underline-reveal::after {
    left: 50%;
    right: auto;
    margin-left: -32px;
    transform-origin: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .emotional-logo .lm-bar, .emotional-logo .lm-hex { opacity: 1; transform: none; }
  .emotional-logo .lm-ring { opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; }
  .emotional-logo.is-visible .lm-bar-left, .emotional-logo.is-visible .lm-bar-right,
  .emotional-logo.is-visible .lm-hex-left, .emotional-logo.is-visible .lm-hex-right,
  .emotional-logo.is-visible .lm-ring, .emotional-logo.is-visible .lm-logo { animation: none; }
}

/* ==========================================================================
   41. MOTION & STRUCTURE v16 — animated arrow links, count-up stat band,
       brand-motif hooks, mega-menu promo. Appended so it wins the cascade.
   ========================================================================== */

/* Animated arrow link (custom .blue-arrow.animated equivalent): underline
   sweeps in from the left while the arrow nudges right. Position-absolute
   underline = zero layout shift, so JS-rendered links inherit it safely. */
.btn-link { position: relative; }
.btn-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: calc(100% - 26px);
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.btn-link:hover::before,
.btn-link:focus-visible::before { transform: scaleX(1); }
.btn-link:hover::after,
.btn-link:focus-visible::after { transform: translateX(6px); }

/* Count-up stat numbers: the wrapping <b> keeps the orange suffix rule
   (.stat-num span) from hitting the animated number itself. */
.stat-num b { font-weight: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .btn-link::before { transition: none; }
  .btn-link:hover::after,
  .btn-link:focus-visible::after { transform: none; }
}

/* §41b — home restructure pieces */
/* Standalone stat band: charcoal (footer tone) */
.stat-band { background: var(--footer-bg); }
.stat-band .section-head { margin-bottom: var(--space-7); }

/* ==========================================================================
   42. custom TOP UTILITY ROW — left-aligned, tracked-out small labels,
       icon after label (custom order). Appended so it wins the cascade.
   ========================================================================== */
.utility-inner {
  justify-content: flex-start;
  gap: clamp(var(--space-5), 3.2vw, var(--space-8));
  min-height: 44px;
}
.utility-bar .util-link {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  gap: 0.55em;
}
.utility-bar .util-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   43. NAV PANEL — custom left slide-in below the header.
       Injected by js/script.js §16. Lives INSIDE .site-header so it tracks
       the sticky header height (incl. .scrolled condensed state) via top:100%.
       NOTE: never put `overflow` on .site-header — it would clip this panel.
       Layering: backdrop 90 < header 100 < panel (in header context)
                 < search/lang overlays 300/305.
   ========================================================================== */
.nav-panel-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 17, 17, 0.5);
  opacity: 0;
  transition: opacity 400ms var(--ease-custom);
}
.nav-panel-backdrop.is-open { opacity: 1; }
.nav-panel-backdrop[hidden] { display: none; }

.nav-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: var(--rule-2);
  max-height: calc(100vh - var(--header-h) - 42px);
  max-height: calc(100dvh - var(--header-h) - 42px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur-panel) var(--ease-custom),
              visibility 0s linear var(--dur-panel);
}
.nav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s, 0s;
}

.nav-panel-inner {
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
}
.nav-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 380px;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
}
.nav-panel-visual {
  display: flex;
  flex-direction: column;
}
.nav-panel-visual img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: right center;
  display: block;
}
.nav-panel-intro .eyebrow { margin-bottom: var(--space-4); }
.nav-panel-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--space-5);
}
.nav-panel-title a { color: var(--black); transition: color var(--dur-micro); }
.nav-panel-title a:hover { color: var(--orange-d); }
.nav-panel-intro p { color: var(--gray-600); max-width: 46ch; margin: 0; }

.nav-panel-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.nav-panel-links a {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--black);
  transition: padding-left var(--dur-micro) var(--ease-custom),
              background var(--dur-micro) var(--ease-custom);
}
.nav-panel-links a > :not(.npl-arrow) { transition: transform var(--dur-micro) var(--ease-custom); }
.nav-panel-links a:hover > :not(.npl-arrow) { transform: translateX(8px); }
.nav-panel-links a:hover { background: var(--gray-100); color: var(--black); }
.npl-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.01em;
}
.npl-sub { color: var(--gray-600); font-size: 0.95rem; }
.npl-arrow {
  margin-left: auto; flex: none; color: var(--blue);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-micro), transform var(--dur-micro), color var(--dur-micro);
}
.nav-panel-links a:hover .npl-arrow { opacity: 1; transform: none; color: var(--orange); }
.nav-panel-links a.is-soon { color: var(--gray-600); cursor: default; }
.nav-panel-links a.is-soon:hover { background: transparent; padding-left: var(--space-2); }
.nav-panel-links a.is-soon .npl-label { font-weight: 500; color: var(--gray-600); }
.nav-panel-links .npl-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-600); border: 1px solid var(--gray-300); border-radius: 99px;
  padding: 0.15em 0.7em; margin-left: var(--space-2);
}

.nav-panel-close {
  position: absolute; top: var(--space-4); right: var(--space-5);
  background: none; border: 0; cursor: pointer;
  font-size: 2.1rem; line-height: 1; color: var(--ink, var(--black));
  padding: 0.2em 0.35em;
  transition: color var(--dur-micro), transform var(--dur-micro);
}
.nav-panel-close:hover { color: var(--orange-d); transform: rotate(90deg); }

/* staggered row entrance while the panel slides in */
.nav-panel.is-open .nav-panel-links li {
  opacity: 0; transform: translateX(-14px);
  animation: npl-in 500ms var(--ease-custom) forwards;
  animation-delay: calc(180ms + var(--i, 0) * 50ms);
}
@keyframes npl-in { to { opacity: 1; transform: none; } }

/* open trigger state — orange underline like .is-active */
.primary-nav a[data-panel][aria-expanded="true"] { color: var(--orange-d); }

/* mobile: full-screen takeover */
@media (max-width: 860px) {
  .nav-panel {
    position: fixed; inset: 0; top: 0; z-index: 250;
    max-height: none; border-top: 0;
  }
  .nav-panel-inner { padding-top: 72px; }
  .nav-panel-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .nav-panel-title { font-size: clamp(2rem, 8vw, 2.6rem); }
  body.panel-open { overflow: hidden; }
}


/* ==========================================================================
   44. PRODUCTS GATEWAY — custom tile grid + A–Z grade ledger
   ========================================================================== */
.hero--products h1 { font-weight: 300; font-size: clamp(3rem, 6.5vw, 5.4rem); letter-spacing: -0.03em; }

.group-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}

/* ── Split card: framed photograph on top, frosted white glass body below.
   The body rises over the photo edge so the blur reads as real glass. ── */
.group-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: none;
}
/* top: framed photograph — a fixed strip, no longer full-bleed */
.group-tile .tile-media {
  position: relative; inset: auto; z-index: 0;
  width: 100%; aspect-ratio: 16 / 11; flex: none; overflow: hidden;
}
.group-tile .tile-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: contrast(1.1) saturate(1.12);
  transition: transform var(--dur-hover) var(--ease-custom);
}
/* additives photo: subject (dropper + droplet) sits in the upper-right of the source.
   Frame it + cut the haze EVERYWHERE the image is used — group tiles, feature cards, full heroes. */
img[src*="hero-additives"] {
  object-position: 80% 30%;
  filter: grayscale(1) brightness(1.35) contrast(1.1);
}
.group-tile:hover .tile-media img { transform: scale(1.05); }
/* frosted white glass body — pulled up over the photo edge (glassmorphism),
   rounded top like a rising panel, dark ink text */
.gt-body {
  position: relative; z-index: 2;
  margin-top: 0; width: auto;
  flex: 1 1 auto;
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2, 8px);
  border-radius: 0;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
/* kicker label removed — the h3 below is the sole title now */
.gt-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-600); margin: 0 0 2px;
}
.gt-body h3 {
  margin: 0; color: var(--ink);
  /* inherit global h3 font settings to match other headers exactly */
  font-weight: 700; font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  /* fixed 2-line box, top-aligned so every title's first line sits on the same baseline
     across tiles (1-line and 2-line headers start at the same y) */
  line-height: 1.2; height: calc(1.2em * 2); flex: none;
  display: flex; align-items: flex-start; overflow: hidden;
}
/* fixed 3-line box so bodies of any length keep kicker/header/arrow on one row
   (3-line reserve keeps the block short so more photo shows) */
.gt-body p {
  margin: 0; color: var(--gray-600);
  font-size: 1.02rem; line-height: 1.5; height: calc(1.5em * 3); flex: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* keep body text dark on hover — override global a:hover blue (arrow answers instead) */
.group-tile:hover, .group-tile:hover h3 { color: var(--ink); }
.group-tile:hover p { color: var(--gray-600); }
/* inline text link (label + chevron), anchored bottom-left of the body */
.gt-arrow {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0;
  color: var(--blue); font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: 0.005em;
  transition: gap var(--dur-micro), color var(--dur-micro);
}
.gt-arrow .gt-chev {
  font-size: 0.95em; line-height: 1;
  transition: transform var(--dur-micro);
}
.group-tile:hover .gt-arrow { gap: 11px; color: var(--blue-d, var(--blue)); }
.group-tile:hover .gt-arrow .gt-chev { transform: translateX(2px); }
.gt-body::before { content: none; }
.group-tile.is-soon { cursor: default; }
.group-tile.is-soon:hover .tile-media img { transform: none; }
.group-tile.is-soon:hover .gt-arrow { gap: 7px; color: var(--blue); }
@media (max-width: 980px) {
  .group-tiles { grid-template-columns: 1fr; }
  .group-tile { aspect-ratio: auto; }
  .group-tile:nth-child(2) { margin-top: 0; }
}

/* A–Z ledger: search + category heading rows over the existing .product-row */
.ledger-controls .finder-search { flex: 1 1 auto; max-width: 520px; }
/* JS renders rows with spans — keep code/type stacked like the div-based pages */
[data-grades-ledger] .pr-main,
[data-grades-ledger] .pr-code,
[data-grades-ledger] .pr-type { display: block; }

/* ==========================================================================
   45. TYPE & MOTION REFINEMENT — custom light display pass
   ========================================================================== */
.hero h1 { font-weight: 400; }
.hero:not(.hero--compact) h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.03em; }
/* unify image hovers: deliberate 600ms, modest zoom */
.feature-card:hover .media img { transform: scale(1.04); }
.tile--lg:hover .tile-media img { transform: none; }   /* drapes own this hover */
.group-band:hover .teaser-media .media img { transform: scale(1.04); }

/* ==========================================================================
   46. REDUCED-MOTION MOP-UP for §42–§45
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: opacity 1ms linear; transform: none; opacity: 0; }
  .nav-panel.is-open { opacity: 1; }
  .nav-panel.is-open .nav-panel-links li { animation: none; opacity: 1; transform: none; }
  .nav-panel-backdrop { transition: none; }
  .nav-panel-close:hover { transform: none; }
  .group-tile:hover .tile-media img { transform: none; }
  .group-tile:hover .gt-arrow { transform: none; }
  .feature-card:hover .media img,
  .group-band:hover .teaser-media .media img { transform: none; }
}

/* ==========================================================================
   47. PRODUCT PORTFOLIO ROWS — custom editorial ledger, one row per grade.
       Rendered by js/script.js §17 into [data-product-rows].
   ========================================================================== */
[data-product-rows] { border-top: var(--rule-2); }
.prow {
  display: grid;
  grid-template-columns: minmax(96px, 0.45fr) 1.6fr 64px;
  align-items: center;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  padding: clamp(28px, 3.6vw, 52px) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-micro), padding-left var(--dur-micro);
}
.prow:last-child { border-bottom: var(--rule-2); }
.prow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gray-300); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro);
}
.prow[data-category="acrylics"]::before  { background: var(--blue); }
.prow[data-category="alkyds"]::before     { background: var(--orange); z-index: 10; }
.prow[data-category="additives"]::before  { background: var(--gray-600); }
.prow:hover { background: var(--gray-100); padding-left: var(--space-5); }
.prow:hover::before { transform: scaleX(1); }

.prow-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.prow-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1;
  color: var(--gray-300); letter-spacing: -0.02em;
}
.prow-cat {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-600);
}
.prow-code {
  margin: 0 0 0.3rem; font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.1;
}
.prow-type { margin: 0 0 var(--space-3); color: var(--gray-600); font-size: 1rem; }
.prow-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); row-gap: var(--space-3); margin: 0; padding: 0; }
.prow-chips li {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray-600); border: none; border-radius: 0;
  padding: 0;
}
.prow-chips li:not(:last-child)::after {
  content: "\00B7";
  margin-inline-start: var(--space-5);
  color: var(--orange); font-weight: 700; letter-spacing: 0;
}

.prow .row-arrow {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gray-300);
  font-size: 1.1rem; line-height: 1; color: var(--blue);
  transition: background var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro), transform var(--dur-micro);
}
.prow:hover .row-arrow {
  background: var(--orange); z-index: 10; border-color: var(--orange); color: var(--white);
  transform: translateX(3px);
}

@media (max-width: 920px) {
  .prow { grid-template-columns: 1fr; gap: var(--space-4); padding-right: 64px; }
  .prow-meta { flex-direction: row; align-items: baseline; gap: var(--space-4); }
  .prow .row-arrow { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); }
  .prow:hover .row-arrow { transform: translateY(-50%) translateX(3px); }
}

/* ── teaser link rows (replaces feature-card grid on product surfaces) ──── */
.link-rows { border-top: var(--rule-2); }
.link-rows a {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--black); text-decoration: none;
  transition: background var(--dur-micro), padding-left var(--dur-micro);
}
.link-rows a > :not(.lr-arrow) { transition: transform var(--dur-micro); }
.link-rows a:hover > :not(.lr-arrow) { transform: translateX(8px); }
.link-rows a:hover { background: var(--gray-100); color: var(--black); }
.link-rows .lr-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.link-rows .lr-sub { color: var(--gray-600); font-size: 0.95rem; }
.link-rows .lr-arrow {
  margin-left: auto; flex: none; color: var(--blue);
  transition: transform var(--dur-micro), color var(--dur-micro);
}
.link-rows a:hover .lr-arrow { transform: translateX(6px); color: var(--orange); }
@media (max-width: 560px) {
  /* title + sub + arrow can't share one line at phone widths — the sub
     drops to its own full-width line instead of pushing past the viewport */
  .link-rows a { flex-wrap: wrap; }
  .link-rows .lr-sub { flex-basis: 100%; }
}

/* ── v18 type refinement: heroes breathe a little more ── */
.hero:not(.hero--compact) h1 { font-size: clamp(3rem, 6.4vw, 5.5rem); }
.section-head h2 { max-width: 26ch; }


@media (prefers-reduced-motion: reduce) {
  .prow:hover .row-arrow { transform: none; }
  .link-rows a:hover .lr-arrow { transform: none; }
}

/* ==========================================================================
   48. DARK EDITORIAL BAND (.section--dark) — v19
       Black editorial panel used on industries.html (#high-gloss), the
       product-detail "Where it's used" band, and anywhere a dark editorial
       beat is needed. White/#2A2B2D ≈ 14.2:1 — passes AA comfortably.
   ========================================================================== */
.section--dark .eyebrow { color: rgba(255, 255, 255, 0.82); }
.section--dark .muted{ color: rgba(255, 255, 255, 0.72); }
.section--dark .section-head h2 { color: var(--white); }
.section--dark a:not(.btn) { color: var(--white); }
.section--dark .perform-data { background: transparent; }
.section--dark .media { border-color: rgba(255, 255, 255, 0.22); }
/* product detail "Built for the job" band: no label sits on the photo here, so
   drop the dark gradient overlay and let the image read clean and crisp */
.section--dark .perform-media::after { content: none; }
.section--dark .perform-media .media img { object-position: center; }
/* Product detail "Built for the job": lock the photo to its native 5:4 so it
   sits identically on every grade page instead of stretching to the text height.
   Square corners, no frame/shadow — the image reads flat and clean. */
#product-detail .perform-row { align-items: center; }
#product-detail .perform-media {
  aspect-ratio: 5 / 4;
  min-height: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
/* the inter-section hairline (§ .section + .section > .container) turns white */
.section--dark > .container { border-top-color: rgba(255, 255, 255, 0.22) !important; }
.section--dark .tag { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.88); }

/* product rows recolored on the dark band (industries #high-gloss) */
.section--dark .prow { color: var(--white); border-bottom: var(--rule-dark); }
.section--dark .prow:last-child { border-bottom: var(--rule-dark-2); }
.section--dark .prow:hover { background: rgba(255, 255, 255, 0.06); }
.section--dark .prow-num { color: rgba(255, 255, 255, 0.32); }
.section--dark .prow-cat,
.section--dark .prow-type{ color: rgba(255, 255, 255, 0.70); }
.section--dark .prow-chips li { border-color: rgba(255, 255, 255, 0.38); color: rgba(255, 255, 255, 0.85); }
.section--dark .prow .row-arrow { border-color: rgba(255, 255, 255, 0.38); color: var(--white); }
.section--dark .prow:hover .row-arrow { background: var(--orange); z-index: 10; border-color: var(--orange); }


/* ==========================================================================
   49. V19 VISUAL REFRESH — bigger display type, hero accent, score bars,
       stat-band refinement, dark CTA, compare polish, airier rhythm.
   ========================================================================== */
/* — display type scale up — */
.hero:not(.hero--compact) h1 { font-weight: 300; font-size: clamp(3.4rem, 7.2vw, 6.4rem); letter-spacing: -0.035em; }
.hero--compact h1 { font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -0.03em; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -0.02em; }

/* — hero: orange accent dash left of the eyebrow, sweeps in with the reveal — */
.hero .hero-inner .eyebrow::before {
  background: var(--orange); z-index: 10;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom) 250ms;
}
.hero .hero-inner.is-visible .eyebrow::before { transform: scaleX(1); }
.hero--compact { border-bottom: 1px solid var(--blue); }

/* — performance-profile score bars (detail pages; data properties[]) — */
.score-bars.is-visible .sb-fill { transform: scaleX(1); }
@media (max-width: 640px) {
}

/* — stat band: hairline-ruled cells, bigger numerals — */
.stat-band .stats > div { border-top: var(--rule-dark); padding-top: var(--space-4); position: relative; }
/* vertical hairline between cells — reads as one structured data strip
   rather than four loose numbers (mirrors the footer-grid divider).
   Only at the true 4-across layout: the 2-column breakpoints (1024px /
   560px, see §18) would otherwise put a stray divider on the wrapped
   3rd item, which has no row-mate to divide from. */
@media (min-width: 1025px) {
  .stat-band .stats > div + div::before {
    content: "";
    position: absolute; top: var(--space-4); bottom: 0; left: 0;
    width: 1px;
    margin-left: calc(clamp(var(--space-5), 3vw, var(--space-8)) / -2);
    background: rgba(255,255,255,0.14);
  }
}
.section--stats .stat-num { font-size: clamp(3.4rem, 6vw, 6rem); }

/* — group tiles: scrim eases on hover — */
.group-tile .tile-media::after { transition: opacity var(--dur-hover) var(--ease-custom); }
.group-tile:hover .tile-media::after { opacity: 0.82; }

/* — dark CTA band variant (alternates with the blue one) — */

/* — compare page polish — */
table.compare-table th[scope="row"] { position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.compare-table tbody tr:hover td,
table.compare-table tbody tr:hover th[scope="row"] { background: var(--gray-100); }
table.compare-table thead th { border-top: var(--rule-2); }
table.compare-table td a[download] {
  display: inline-flex; align-items: center; gap: 0.4em;
  border: 1px solid var(--gray-300); border-radius: 99px;
  padding: 0.3em 0.9em; font-size: 0.85rem; font-weight: 600;
  color: var(--blue); text-decoration: none;
  transition: border-color var(--dur-micro), color var(--dur-micro), background var(--dur-micro);
}
table.compare-table td a[download]:hover { border-color: var(--orange); color: var(--orange-d); background: var(--surface); }

/* — airier section rhythm on wide screens — */
@media (min-width: 1024px) {
  .section:not(.section--tight) { padding-block: clamp(96px, 9vw, 150px); }
}

/* — reduced-motion + contrast counterparts for §48–§49 — */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-inner .eyebrow::before { transform: scaleX(1); transition: none; }
  .group-tile .tile-media::after { transition: none; }
}

/* ==========================================================================
   50. Pressable affordance — no circular arrow buttons. Instead, a translucent
       panel wipes in from left → right on hover (the same "drapes" effect as
       the big home tile, .tile--lg), unified across every pressable box.
   ========================================================================== */
/* Flatten every circular .row-arrow into a plain glyph (kills the circle) */
.row-arrow {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gray-600);
  font-size: 1.4rem;
  line-height: 1;
}
.prow:hover .row-arrow,
.product-row:hover .row-arrow {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--orange);
}

/* Left → right "drapes" wipe on every pressable box (matches .tile--lg) */
.prow,
.product-row,
.tile,
.card,
.feature-card,
.find-tab { position: relative; }
.tile::after,
.card::after,
.feature-card::after,
.find-tab::after,
.prow::after,
.product-row::after,
.group-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(17, 17, 17, 0.09);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
  pointer-events: none;
}
.tile:hover::after,
.card:hover::after,
.feature-card:hover::after,
.find-tab:hover::after,
.prow:hover::after,
.product-row:hover::after,
.group-tile:hover::after {
  transform: scaleX(1);
}
/* "Soon" gateway tiles aren't pressable — no wipe */
.group-tile.is-soon:hover::after { transform: scaleX(0); }
/* Dark surfaces: a light wipe so the sweep reads against dark */
.tile.tile--dark:not(.tile-row--home .tile)::after,
.find-tab--dark::after,
.section--dark .prow::after {
  background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .tile::after, .card::after, .feature-card::after, .find-tab::after,
  .prow::after, .product-row::after, .group-tile::after {
    transition: none;
    transform: scaleX(0);
  }
}

/* ============================ LEGAL DOCUMENTS ============================ */
/* Long-form legal pages: imprint, terms, privacy */
.legal-doc { padding-bottom: var(--space-4); }
.legal-doc .legal-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9rem; color: var(--gray-600);
}
.legal-doc .legal-disclaimer {
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  background: var(--surface-muted);
  border-top: 3px solid var(--orange);
  font-size: 0.95rem; line-height: 1.6; color: var(--gray-600);
}
.legal-doc h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-top: var(--space-8); margin-bottom: var(--space-3);
  scroll-margin-top: var(--space-8);
}
.legal-doc h2:first-of-type { margin-top: var(--space-6); }
.legal-doc h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-top: var(--space-6); margin-bottom: var(--space-2);
}
.legal-doc p { margin-bottom: var(--space-4); }
.legal-doc ul, .legal-doc ol {
  margin: 0 0 var(--space-4); padding-left: 1.4em;
  list-style: revert;
}
.legal-doc li { margin-bottom: var(--space-2); line-height: 1.55; }
.legal-doc dl.legal-facts { margin: 0 0 var(--space-5); }
.legal-doc dl.legal-facts > div {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.legal-doc dl.legal-facts dt { font-weight: 600; color: var(--ink); }
.legal-doc dl.legal-facts dd { margin: 0; color: var(--text-muted); }
.legal-doc .legal-fill {
  color: var(--text-muted); font-style: italic;
}
@media (max-width: 600px) {
  .legal-doc dl.legal-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==========================================================================
   51. CTA BAND — custom ruled / structural treatment
   Orange accent moves from the chunky left bar to a thin full-width top rule;
   the action sits behind a vertical hairline divider; the button is a white
   outline at rest and fills with the orange brand action on hover.
   ========================================================================== */
.cta-band::before {
  left: 0; right: 0; top: 0; bottom: auto;
  width: auto; height: 4px;
  background: var(--orange); z-index: 10;
}
.cta-band { padding: clamp(var(--space-7), 5vw, var(--space-9)); }

/* Kicker: reuse the site eyebrow (orange dash) in white on the band */
.cta-band .cta-copy { max-width: 640px; }
.cta-band .eyebrow { color: var(--blue); margin-bottom: var(--space-4); }

/* Action: short hairline separator attached just left of the button */
.cta-band > .btn {
  position: relative;
  align-self: center;
  margin-left: var(--space-8);
}
.cta-band > .btn::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1);   /* 32px to the left of the button */
  top: -8px; bottom: -8px;           /* button height + a touch */
  width: 1px;
  background: rgba(17, 17, 17, 0.18);
}

/* White outline at rest → orange fill on hover/focus */
.cta-band .btn-primary {
  background: transparent;
  color: var(--text);
  border-color: var(--blue);
  border-width: 2px;
}
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Stacked layout (≤768px): drop the divider + side spacing */
@media (max-width: 768px) {
  .cta-band > .btn { margin-left: 0; padding-left: 0; }
  .cta-band > .btn::before { display: none; }
}


/* ==========================================================================
   52. LANGUAGE SWITCHER + COMPLETE ARABIC RTL SUPPORT
   ========================================================================== */
.language-switcher { position: static; display: inline-flex; align-items: center; align-self: stretch; }
.language-trigger { min-height: 42px; white-space: nowrap; }
.language-trigger .language-globe { width: 17px; height: 17px; }
.language-trigger-label { font-weight: 600; }
.language-trigger .language-chevron {
  width: 10px; height: 7px; margin-inline-start: 0.1rem;
  transition: transform var(--dur-micro) ease;
}
.language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-overlay { position: fixed; inset: 42px 0 0; z-index: 330; }
.language-overlay[hidden] { display: none; }
.language-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: rgba(17, 24, 29, 0.54); cursor: default;
  opacity: 0; transition: opacity 220ms ease;
}
.language-overlay.is-open .language-backdrop { opacity: 1; }
.language-panel {
  position: relative; width: 100%; max-height: calc(100dvh - 42px); overflow-y: auto;
  background: var(--page-bg); border-top: 3px solid var(--orange); border-bottom: 1px solid var(--black);
  box-shadow: 0 24px 60px rgba(17, 24, 29, 0.24);
  opacity: 0; transform: translateY(-18px);
  transition: opacity 220ms ease, transform 320ms var(--ease-custom);
}
.language-overlay.is-open .language-panel { opacity: 1; transform: translateY(0); }
.language-panel-inner { padding-block: clamp(32px, 5vw, 64px); }
.language-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); margin-bottom: clamp(28px, 4vw, 48px);
}
.language-panel-head h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: normal; }
.language-close {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 0; border: 0; background: transparent; color: var(--gray-600);
  font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: color var(--transition);
}
.language-close:hover { color: var(--orange-d); }
.language-close svg { width: 20px; height: 20px; }
.language-close span { display: inline; }
.language-panel-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: clamp(var(--space-5), 4vw, var(--space-8));
}
.language-options { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--space-3); direction: ltr; }
.language-option {
  position: relative; min-height: 92px; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--gray-300); border-radius: 0;
  background: var(--page-bg); color: var(--black); font: inherit; text-align: start;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
  box-shadow: none; transform: none;
}
.language-option:hover {
  border-color: var(--gray-600); background: var(--gray-50); box-shadow: none; transform: none;
}
.language-option[aria-checked="true"] { border-color: var(--blue); border-width: 2px; background: var(--blue-wash2); }
.language-option:hover { background: var(--surface-muted); border-color: var(--ink); }
.language-option:focus-visible { position: relative; z-index: 2; box-shadow: inset 0 0 0 2px var(--blue); }
.language-option[aria-checked="true"] { border-color: var(--orange); background: var(--surface); }

/* Code badge — the hero element on the left */
.language-option-code {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--gray-600); line-height: 1;
  min-width: 2.2ch; text-align: center;
}
.language-option[aria-checked="true"] .language-option-code { color: var(--orange); }

/* Names — native (primary) + English exonym (sub) */
.language-option-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.language-option-name { font-size: 1.02rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-option-sub { font-size: 0.78rem; font-weight: 500; color: var(--gray-600); }

/* Check indicator — right; drawn only when the option is selected */
.language-option-mark {
  width: 22px; height: 22px; border: 1.5px solid var(--gray-300);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.language-option-mark::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.language-option[aria-checked="true"] .language-option-mark {
  border-color: var(--orange); background: var(--orange); z-index: 10; color: #fff;
}
.language-apply { min-height: 56px; justify-content: center; }
.language-apply svg { width: 18px; height: 18px; }
body.language-panel-open { overflow: hidden; }

/* Turkish: swap display/body stacks to the dedicated full-glyph TR faces so
   ş ğ İ render at every weight; font-synthesis: none blocks faux-bold fallback. */
html[lang="tr"] {
  --font-display: "Archivo TR", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk TR", "Hanken Grotesk", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font: var(--font-body);
  font-synthesis: none;
}

/* Arabic-capable system stack and script-appropriate typography. */
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input,
html[lang="ar"] select, html[lang="ar"] textarea,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5 {
  font-family: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
}
html[lang="ar"] .eyebrow, html[lang="ar"] .util-link,
html[lang="ar"] .search-group-label,
html[lang="ar"] .prow-cat, html[lang="ar"] .prow-chips li{
  letter-spacing: 0; text-transform: none;
}

html[dir="rtl"] body { direction: rtl; text-align: start; }
html[dir="rtl"] .site-header, html[dir="rtl"] .utility-bar,
html[dir="rtl"] .nav-panel, html[dir="rtl"] .search-panel,
html[dir="rtl"] .site-footer, html[dir="rtl"] .language-panel { text-align: start; }
html[dir="rtl"] .nav-panel { transform: translateX(100%); }
html[dir="rtl"] .nav-panel.is-open { transform: translateX(0); }
html[dir="rtl"] .nav-panel-close { right: auto; left: var(--space-5); }
html[dir="rtl"] .nav-panel.is-open .nav-panel-links li { transform: translateX(14px); }

html[dir="rtl"] .row-arrow,
html[dir="rtl"] .sr-arrow, html[dir="rtl"] .lr-arrow,
html[dir="rtl"] .btn-link span[aria-hidden="true"] { transform: scaleX(-1); }

html[dir="rtl"] .npl-arrow { font-size: 0; transform: translateX(6px); }
/* html[dir="rtl"] .npl-arrow::after removed to rely on auto-mirroring */
html[dir="rtl"] .sr-arrow, html[dir="rtl"] .lr-arrow, html[dir="rtl"] .npl-arrow,
html[dir="rtl"] .nav-toggle,
html[dir="rtl"] .tile-arrow, html[dir="rtl"] .pc-arrow {
  margin-left: 0; margin-inline-start: auto;
}
html[dir="rtl"] .primary-nav a:not(.btn)::after { transform-origin: right; }
html[dir="rtl"] .nav-panel-links a:hover { padding-left: var(--space-2); padding-right: var(--space-2); }
html[dir="rtl"] .nav-panel-links a.is-soon:hover { padding-left: 0; padding-right: var(--space-2); }
html[dir="rtl"] .nav-panel-links a:hover .npl-arrow { transform: none; }
html[dir="rtl"] .nav-panel-links a:hover > :not(.npl-arrow) { transform: translateX(-8px); }
html[dir="rtl"] .prow:hover { padding-left: var(--space-2); padding-right: var(--space-5); }
html[dir="rtl"] .prow::before { left: auto; right: 0; transform-origin: right; }
html[dir="rtl"] .link-rows a:hover { padding-left: var(--space-2); padding-right: var(--space-4); }
html[dir="rtl"] .tile::after, html[dir="rtl"] .card::after,
html[dir="rtl"] .feature-card::after, html[dir="rtl"] .find-tab::after,
html[dir="rtl"] .prow::after,
html[dir="rtl"] .product-row::after, html[dir="rtl"] .group-tile::after,
html[dir="rtl"] .hero .hero-inner .eyebrow::before{ transform-origin: right; }

/* eyebrow tick (the small orange line + tracked label) mirrors to the right */
html[dir="rtl"] .eyebrow { padding-left: 0; padding-right: 2.4rem; }
html[dir="rtl"] .eyebrow::before { left: auto; right: 0; }
html[dir="rtl"] .feature-card .eyebrow { padding-right: 0; }
/* the scroll-reveal heading underline starts from the right in RTL */
html[dir="rtl"] .underline-reveal::after { left: auto; right: 0; transform-origin: right; }

html[dir="rtl"] .spec, html[dir="rtl"] .compare-table { direction: rtl; }
html[dir="rtl"] table.compare-table th[scope="row"] { left: auto; right: 0; }
.carousel-track { direction: ltr; }
.carousel-nav { direction: ltr; }
html[dir="rtl"] .carousel-track { direction: rtl; }
html[dir="rtl"] .carousel-nav { direction: rtl; }
html[dir="rtl"] .carousel-btn svg { transform: scaleX(-1); }
html[dir="rtl"] .carousel-slide { direction: rtl; text-align: start; }
.pc-code, .prow-code, .pr-code, [data-product-code],
a[href^="mailto:"], a[href^="tel:"], .spec td, .compare-table td { unicode-bidi: isolate; }
html[dir="rtl"] .pc-code, html[dir="rtl"] .prow-code, html[dir="rtl"] .pr-code, html[dir="rtl"] [data-product-code],
html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"] {
  direction: ltr; text-align: right;
}

html[dir="rtl"] .cta-band > .btn { margin-left: 0; margin-right: var(--space-8); }
html[dir="rtl"] .cta-band > .btn::before { left: auto; right: calc(var(--space-6) * -1); }
html[dir="rtl"] .legal-doc .legal-disclaimer {
  border-left: 0; border-right: 0;
}
html[dir="rtl"] .legal-doc ul, html[dir="rtl"] .legal-doc ol { padding-left: 0; padding-right: 1.4em; }

/* ── RTL completion: mirror the inline arrows, accent draws & bullets the base
   block above missed, so nothing under html[dir="rtl"] still points or sweeps
   left → right. ─────────────────────────────────────────────────────────── */

/* Inline "→" affordances rendered as ::after content flip to follow the text. */
html[dir="rtl"] .btn-link::after,
html[dir="rtl"] .footer-legal a::after { display: inline-block; transform: none; }
html[dir="rtl"] .btn-link:hover::after { transform: translateX(-4px); }
html[dir="rtl"] .footer-legal a:hover::after { transform: translateX(-3px); }

/* btn-link underline sweep: anchor to inline-end (right) so it wipes R→L. */
html[dir="rtl"] .btn-link::before { left: auto; right: 0; transform-origin: right; }

/* Tile drapes (§21-C, injected by JS into .tile--lg .tile-media): wipe R→L. */
html[dir="rtl"] .drapes { transform-origin: right; }

/* Card / tile / group / product arrows (text glyphs + the CTA arrow svg). */
/* Text glyphs auto-mirror in RTL, so only apply scaleX to SVGs. */
html[dir="rtl"] .btn-primary svg { transform: scaleX(-1); }
/* The spans dock to the physical right edge (Chrome RTL
   column-flex: flex-start = inline-start = physical right). */
html[dir="rtl"] .tile--data .tile-arrow,
html[dir="rtl"] .gt-arrow { align-self: flex-start; }
html[dir="rtl"] .tile--data:hover .tile-arrow,
html[dir="rtl"] .tile--lg:hover .tile-body .tile-arrow { transform: translateX(-4px); }
html[dir="rtl"] .btn-primary:hover svg { transform: scaleX(-1) translateX(4px); }
/* Higher specificity needed: dark home tile hover rule (0,5,0) beats RTL (0,4,1). */
html[dir="rtl"] .tile-row--home .tile--data.tile--dark:hover .tile-arrow { transform: translateX(-4px); }
html[dir="rtl"] .product-card:hover .pc-arrow { transform: translateX(-5px); }
html[dir="rtl"] .group-tile:hover .gt-arrow { transform: translateX(-8px); }

/* Hover nudges on the auto-mirrored text arrows move backwards. */
html[dir="rtl"] .prow:hover .row-arrow,
html[dir="rtl"] .related-grades .product-row:hover .row-arrow,
html[dir="rtl"] .search-group li a:hover .sr-arrow { transform: translateX(-4px); }

/* Left-anchored accent draws now grow from the inline-start (right) edge. */
html[dir="rtl"] .product-row::before { left: auto; right: 0; transform-origin: right; }

/* Spec bullet ticks sit on the inline-start (right) edge. */
html[dir="rtl"] .spec-list li { padding-left: 0; padding-right: 1.6rem; }
html[dir="rtl"] .spec-list li::before { left: auto; right: 0; }

@media (max-width: 920px) {
  html[dir="rtl"] .prow { padding-left: 64px; padding-right: var(--space-2); }
  html[dir="rtl"] .prow .row-arrow { right: auto; left: var(--space-2); }
}
@media (max-width: 768px) {
  html[dir="rtl"] .cta-band > .btn { margin-right: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .utility-inner { flex-wrap: nowrap; gap: var(--space-4); }
  .utility-bar .util-link { font-size: 0.72rem; }
  .language-trigger-label { display: none; }
  .language-panel-inner { padding-block: var(--space-6); }
  .language-panel-head { margin-bottom: var(--space-5); }
  .language-panel-controls { grid-template-columns: 1fr; gap: var(--space-5); }
  .language-options { grid-template-columns: 1fr; }
  .language-option { min-height: 68px; }
  .language-apply { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .language-chevron, .language-backdrop, .language-panel { transition: none; }
}

/* ==========================================================================
   53. WHITE CANVAS + BRAND COLOR PANELS
   White stays on the page; intentional color belongs to content panels and
   alternating bands. Brand, photography, layout, and rules remain unchanged.
   ========================================================================== */

/* Raised light surfaces */
.site-header { background: var(--surface); }
.site-header.scrolled,
.primary-nav,
.nav-panel,
.search-panel,
.language-panel,
.feature-card,
.grade,
.product-card,
.plp-filters,
.finder-search input,
.btn-download{
  background: var(--surface);
}
.compare-select { background-color: var(--surface); }
table.compare-table th[scope="row"] { background: var(--surface); }
.section--gray .split-box--gray,
.split-box--gray {
  background: var(--orange-wash2);
  border-color: var(--orange);
  border-top: 3px solid var(--orange);
  color: var(--text);
}
.split-box--gray .btn-link,
.split-box--gray .btn-link:hover { color: var(--text); }
.split-box--gray .eyebrow::before { background: var(--orange); z-index: 10; }

.section--gray .perform-data,
.perform-data {
  background: var(--blue-wash2);
  border-color: var(--blue);
  border-top: 3px solid var(--blue);
  color: var(--text);
}
.perform-data h2,
.perform-data h3,
.perform-data p,
.perform-data .muted,
.perform-data .btn-link,
.perform-data .btn-link:hover,
.perform-data .stat-num,
.perform-data .stat-label { color: var(--text); }

/* Plain tonal bands replace decorative background artwork. */
.section--gray { background-color: var(--surface-muted); }

/* Dark anchors use the approved charcoal surface. */
.section--stats,
.stat-band,
.site-footer {
  background-color: var(--surface-dark);
  background-image: none;
}

/* Orange remains the action color; dark text supplies AA contrast. */
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}


/* ==========================================================================
   REFINED INDUSTRIAL SYSTEM
   Shared composition, panel, interaction, and reading rules for every page
   family. The canvas stays white; structure comes from image, scale, rules,
   and Karachem's existing blue and orange.
   ========================================================================== */

/* Typography and rhythm */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(44px, 5vw, 72px); }
.section-head {
  max-width: 860px;
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-9));
}
.section-head h2 { max-width: 24ch; }
.section-head .lead,
.section-head > p { max-width: 68ch; }
.section + .section > .container {
  padding-top: clamp(28px, 3vw, 44px);
}
.section--stats,
.stat-band { padding-block: clamp(48px, 5vw, 72px); }
.stat-band .section-head { margin-bottom: var(--space-7); }
.stat-band .stats { gap: clamp(var(--space-5), 3vw, var(--space-8)); }

/* Reusable industrial composition */
.content-stage,
.perform-row,
.split-row {
  display: grid;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
  align-items: stretch;
}
/* Asymmetric, image-led ratio (Karachem composition: the photograph always
   carries more visual weight than its paired text panel — never a plain
   50/50 split). perform-row's photo is DOM-first, split-row's is DOM-last,
   so each gets its own track order; content-stage--reverse swaps visual
   order via `order`, so its ratio is swapped too, keeping the photo the
   larger box regardless of which side it lands on. */
.perform-row { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
.split-row   { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr); }
.perform-row.content-stage--reverse { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr); }
.content-stage--reverse > :first-child { order: 2; }
.content-stage--reverse > :last-child { order: 1; }

.content-stage .perform-media,
.content-stage .split-box--media{
  min-height: clamp(380px, 44vw, 660px);
  overflow: hidden;
}
.content-stage .media img{
  transition: transform var(--dur-hover) var(--ease-custom);
}
@media (hover: hover) {
  .content-stage:hover .media img{ transform: scale(1.015); }
}

/* Flush split — image and panel butt together as one unit, sharp seam,
   no floating box. Crisp photo (drop the muddy darkening gradient). */
.content-stage { gap: 0; }
.content-stage .perform-media,
.content-stage .perform-data,
.content-stage .panel--blue,
.content-stage .panel--orange,
.content-stage .split-box--gray,
.content-stage .split-box--media { border-radius: 0; border: 0; }
.content-stage .perform-media::after { content: none; }

/* Semantic brand panels; legacy classes remain compatible aliases. */
.panel--blue {
  background: var(--blue-wash2);
  color: var(--text);
}
.panel--orange {
  background: var(--orange-wash2);
  color: var(--text);
}
.panel--blue,
.panel--orange,
.perform-data,
.split-box--gray {
  min-height: 100%;
  padding: clamp(var(--space-6), 4vw, var(--space-9));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
}
.perform-data,
.panel--blue { background: var(--blue-wash2); border-top: 3px solid var(--blue); }
.split-box--gray,
.panel--orange { background: var(--orange-wash2); border-top: 3px solid var(--orange); }

.panel--blue h2,
.panel--blue h3,
.panel--blue p,
.panel--blue .muted,
.panel--blue .stat-num,
.panel--blue .stat-label,
.panel--blue .btn-link,
.panel--blue .btn-link:hover,
.perform-data h2,
.perform-data h3,
.perform-data p,
.perform-data .muted,
.perform-data .stat-num,
.perform-data .stat-label,
.perform-data .btn-link,
.perform-data .btn-link:hover { color: var(--text); }
.panel--blue .eyebrow::before,
.perform-data .eyebrow::before { background: var(--orange); z-index: 10; }

.panel--orange h2,
.panel--orange h3,
.panel--orange p,
.panel--orange .muted,
.panel--orange .stat-num,
.panel--orange .stat-label,
.panel--orange .btn-link,
.panel--orange .btn-link:hover,
.split-box--gray h2,
.split-box--gray h3,
.split-box--gray p,
.split-box--gray .muted,
.split-box--gray .btn-link,
.split-box--gray .btn-link:hover { color: var(--text); }
.split-box--gray .eyebrow::before { background: var(--orange); z-index: 10; }

.section--dark .panel--orange h2,
.section--dark .panel--orange h3,
.section--dark .panel--orange p,
.section--dark .panel--orange .muted,
.section--dark .panel--orange .eyebrow,
.section--dark .panel--orange .stat-num,
.section--dark .panel--orange .stat-label,
.section--dark .panel--orange .btn-link,
.section--dark .panel--orange .btn-link:hover,
.section--dark .split-box--gray h2,
.section--dark .split-box--gray h3,
.section--dark .split-box--gray p,
.section--dark .split-box--gray .muted,
.section--dark .split-box--gray .eyebrow,
.section--dark .split-box--gray .btn-link,
.section--dark .split-box--gray .btn-link:hover { color: var(--white); }
.section--dark .panel--orange .eyebrow::before,
.section--dark .split-box--gray .eyebrow::before { background: var(--blue); }

/* Shared spacing utilities replace one-off inline declarations. */
.section-head--compact { margin-bottom: 0; }
.section-head--narrow { max-width: 640px; }
.measure--compact { max-width: 60ch; }
.cluster-top { margin-top: var(--space-5); }
.stage-title { margin-bottom: var(--space-5); }
.stage-copy { margin-bottom: var(--space-6); }
.stats--two { grid-template-columns: 1fr 1fr; text-align: start; }
.breadcrumb--legal { margin-top: var(--space-6); }
.standalone-message { padding-block: var(--space-9); }

/* Interaction quality and touch targets */
.btn,
.btn-link,
.find-tab,
.filter-tab,
.carousel-btn,
.nav-search,
.nav-toggle,
.util-link { min-height: 44px; }
.btn-link { padding-block: 0.55rem; }
.btn:active,
.btn-link:active,
.find-tab:active,
.filter-tab:active,
.carousel-btn:active { transform: translateY(1px); }

.site-header,
.site-header.scrolled,
.primary-nav,
.nav-panel,
.search-panel,
.language-panel { background-color: var(--page-bg); }
.filter-tab { transition-duration: var(--dur-micro); }
.filter-tab:focus-visible { box-shadow: var(--ring); }
.prow { transition: background var(--dur-micro), color var(--dur-micro); }
.prow:hover { padding-left: var(--space-2); }
.prow::before {
  inset: auto 0 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
}
.prow:focus-visible::before,
.prow:hover::before { transform: scaleX(1); }

/* Contact and form hierarchy */
.contact-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(var(--space-7), 6vw, var(--space-10));
}
.contact-form-panel {
  border-top: var(--rule-2);
  padding-top: var(--space-6);
}
.contact-info {
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}
.contact-info.panel--blue dt,
.contact-info.panel--blue dd,
.contact-info.panel--blue a:not(.btn) { color: var(--white); }
.contact-info.panel--blue dt { opacity: 0.74; }
.field input,
.field textarea,
.field select { background: var(--surface); }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--text-muted); }
.field input:focus,
.field textarea:focus,
.field select:focus { background: var(--page-bg); }
.form-success {
  border-left: 0;
  border-top: 3px solid var(--blue);
}
.form-success.error { border-top-color: var(--orange); }

/* Calm, highly readable legal pages */
.legal-doc {
  max-width: 78ch;
  margin-inline: auto;
  padding-bottom: var(--space-6);
}
.legal-doc .legal-meta { margin-bottom: var(--space-8); }
.legal-doc h2 { margin-top: clamp(var(--space-7), 5vw, var(--space-9)); }
.legal-doc p,
.legal-doc li { line-height: 1.68; }
.legal-doc .legal-disclaimer {
  border-left: 0;
  border-top: 3px solid var(--orange);
  padding: var(--space-5) 0 0;
}

/* Strong, consistent calls to action without side-stripe decoration. */
.cta-band {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: end;
}
.cta-band::before {
  inset: 0 0 auto;
  width: auto;
  height: 4px;
}
.cta-band > .btn { min-width: 190px; justify-content: center; }

/* RTL, contrast, responsive, and reduced-motion parity */
html[dir="rtl"] .content-stage--reverse > :first-child { order: 2; }
html[dir="rtl"] .content-stage--reverse > :last-child { order: 1; }
html[dir="rtl"] .prow::before { transform-origin: right; }


@media (max-width: 768px) {
  /* .perform-row.content-stage--reverse repeated here on purpose: its
     two-class desktop rule (§ industrial composition) outranks the plain
     .perform-row selector, so without it reverse rows never stacked */
  .content-stage,
  .perform-row,
  .perform-row.content-stage--reverse,
  .split-row { grid-template-columns: 1fr; }
  .content-stage--reverse > :first-child,
  .content-stage--reverse > :last-child { order: initial; }
  .content-stage .perform-media,
  .content-stage .split-box--media{ min-height: clamp(280px, 78vw, 440px); }
  .panel--blue,
  .panel--orange,
  .perform-data,
  .split-box--gray { padding: var(--space-6); }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; align-items: start; }
  .cta-band > .btn { min-width: 0; width: 100%; }
  .section + .section > .container { padding-top: var(--space-6); }
}

@media (max-width: 480px) {
  .section { padding-block: 48px; }
  .section--tight { padding-block: 40px; }
  .stats--two { grid-template-columns: 1fr; }
  .legal-doc h2 { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .content-stage,
  .content-stage *{ transition: none !important; }
  .content-stage:hover .media img{ transform: none; }
}

/* ===========================================================================
   58. UNIFIED BOX SYSTEM — one language across every surface.
   The site had two clashing card idioms: sharp flush tiles (orange drape-wipe,
   1px rules) AND floaty SaaS cards (rounded corners + translateY lift + big
   soft shadow). Radius is now 0 via tokens; here we retire the float so every
   pressable box reads the same: crisp hairline frame, grounded, orange accent
   + quiet media zoom on hover. No lift, no drop-shadow.
   =========================================================================== */
.feature-card,
.tile,
.product-card,
.carousel-slide .news-card {
  box-shadow: none;
  transition: border-color var(--dur-hover) var(--ease-custom),
              background var(--dur-hover) var(--ease-custom);
}
.feature-card:hover,
.tile:hover,
.product-card:hover,
.carousel-slide .news-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--orange);
}
/* Media keeps its quiet zoom — the one motion cue, shared by all image cards */
.feature-card:hover .media img,
.tile:hover .media img,
.product-card:hover .media img,
.carousel-slide .news-card:hover .media img { transform: scale(1.04); }

/* Every image|panel split goes flush + sharp, like .content-stage */
.split-row { gap: 0; }
.split-row > .split-box,
.split-box,
.split-box--media,
.split-box--gray { border-radius: 0; }
/* Grounded caption — hairline frame instead of a floating soft shadow */
.split-caption {
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
}

/* Sustainability: spec-list legible on the graphite pillars band (orange dash stays) */
.section--dark .spec-list li { color: rgba(255, 255, 255, 0.74); }
/* Tags legible on the blue commitment panel (default .tag is blue → invisible on blue) */
.panel--blue .tag,
.perform-data .tag { color: rgba(255, 255, 255, 0.92); }


/* ===========================================================================
   59. COMPARE TABLE — upgraded scanning surface.
   Category-accented product headers, sticky header row, column separators,
   and difference emphasis (orange tick on rows that differ, dimmed on rows
   that agree) with an optional "only differences" filter.
   =========================================================================== */
.cmp-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.cmp-count {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600);
}
.cmp-toggle {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.92rem; color: var(--ink); cursor: pointer; user-select: none;
}
.cmp-toggle input { width: 1.05em; height: 1.05em; accent-color: var(--orange); cursor: pointer; }

/* Even columns — product lanes split the width equally (2 → halves, 3 → thirds).
   Fixed first column; count-aware min-width keeps it readable, scrolling only
   on small screens. --cmp-cols is set per render in js/script.js. */
table.compare-table {
  table-layout: fixed;
  width: 100%;
  min-width: calc(180px + var(--cmp-cols, 2) * 210px);
}
table.compare-table th.cmp-corner,
table.compare-table th[scope="row"] { width: 180px; }
table.compare-table td,
table.compare-table th[scope="row"] { overflow-wrap: anywhere; }

/* Product column headers — category accent bar + code-forward label */
table.compare-table thead th { position: sticky; top: 0; z-index: 2; background: var(--page-bg); vertical-align: bottom; }
table.compare-table thead th.cmp-corner { z-index: 3; left: 0; }
table.compare-table thead th.cmp-prod { border-top: 3px solid var(--gray-300); }
table.compare-table thead th.cmp-cat-acrylics  { border-top-color: var(--blue); }
table.compare-table thead th.cmp-cat-alkyds    { border-top-color: var(--orange); }
table.compare-table thead th.cmp-cat-additives { border-top-color: var(--gray-600); }
.cmp-prod a { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; }
.cmp-code { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--black); line-height: 1.15; }
.cmp-type { font-size: 0.8rem; font-weight: 500; color: var(--gray-600); }
.cmp-prod a:hover .cmp-code { color: var(--orange-d); }

/* Column separators so each grade reads as its own lane */
table.compare-table th + th,
table.compare-table td + td { border-left: 1px solid var(--hairline); }

/* Difference emphasis — only while actually comparing 2+ grades.
   No edge ticks: rows that differ stay full-strength, rows that agree recede
   to muted. The contrast itself reads the differences. */
.cmp-comparing .compare-table tr.is-same td { color: var(--gray-600); }
.cmp-comparing .compare-table tr.is-diff th[scope="row"],
.cmp-comparing .compare-table tr.is-diff td { color: var(--black); }
.cmp-na { color: var(--gray-300); font-style: italic; }
.cmp-diffs-only .compare-table tbody tr.is-same { display: none; }

/* ==========================================================================
   VALUE CARDS — bordered boxes w/ accent bar + index number (About › Values)
   ========================================================================== */
.value-card {
  --accent: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.value-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--accent);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(17, 17, 17, 0.12);
  border-color: var(--gray-600);
}
.value-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.value-card .eyebrow { margin-bottom: var(--space-2); }
.value-card h3 { margin: 0 0 var(--space-3); }
.value-card p { color: var(--gray-600); margin: 0; }

.section--gray .value-card { background: var(--white); }


@media (prefers-reduced-motion: reduce) {
  .value-card { transition: none; }
  .value-card:hover { transform: none; }
}

/* ── Split Section Head ─────────────────────────────────────────────── */
.section-head--split {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.section-head--box {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border: 1px solid var(--gray-300);
  margin-bottom: var(--space-9);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-head--box:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(17, 17, 17, 0.04);
  border-color: rgba(17, 17, 17, 0.1);
}

.section-head--split .head-secondary p {
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .section-head--split {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
  }
  .section-head--split .head-primary {
    flex: 0 0 45%;
  }
  .section-head--split .head-secondary {
    flex: 0 0 45%;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   CORPORATE INDUSTRIAL DESIGN LANGUAGE (Karachem / custom Override)
   ========================================================================== */

/* 1. Eliminate radii (Sharp & Flat) - Selective targets */
.card, .tile, .btn, .feature-card, .value-card, .product-card, .split-box,
.cta-band, .nav-panel, .panel, .panel--blue, .panel--orange,
input, textarea, select,
.tag, .gt-kicker, .section-head--box {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2. Premium restrained hover — subtle lift + soft shadow + slow image zoom */
.tile:hover, .feature-card:hover, .product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md) !important;
}
.tile--lg:hover .tile-media img, .feature-card:hover .media img {
  transform: scale(1.05) !important;
}

/* 3. Sharp Corporate Interactions (Color Wipes / Inversions) */
.btn:hover {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.btn-primary:hover, .btn-secondary:hover{
  background-color: var(--blue) !important;
  color: var(--white) !important;
  border-color: var(--blue) !important;
}
.btn-orange-outline:hover {
  background-color: var(--orange) !important;
  color: var(--white) !important;
  border-color: var(--orange) !important;
}

/* 4. Typography & Contrast Refinements (Editorial/Corporate) */
/* Headings: let the hero stay large + thin (Karachem); refined section weights */
h2, h3, h4, h5, h6, .stage-title {
  font-weight: 600;
}
.eyebrow, .gt-kicker, .tag, .tile-eyebrow, .lr-title{
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* 5. Emphasize Grid Structure (Block Layouts) */
.tile, .feature-card, .product-card, .value-card {
  border: 1px solid var(--gray-300) !important;
}
.tile--lg, .slide-card {
  border: none !important;
}

/* Signature Corporate Section Headings (Thick Color Bar) */
.section-head {
  border-left: 6px solid var(--orange);
  padding-left: var(--space-4);
  /* Safely aligned, no negative margins */
}
html[dir="rtl"] .section-head {
  border-left: none;
  border-right: 6px solid var(--orange);
  padding-left: 0;
  padding-right: var(--space-4);
}
.section-head.center {
  border-left: none;
  border-top: 6px solid var(--orange);
  padding-top: var(--space-4);
  padding-left: 0;
}
html[dir="rtl"] .section-head.center {
  border-right: none;
  padding-right: 0;
}
.section-head--box {
  border-left: none; /* override for boxes */
}

/* 6. Global Map Marker Animations */
@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  80%, 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ── Cookie Banner ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-dark);
  color: var(--white);
  padding: var(--space-4) 0;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.cookie-banner-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--gray-300);
}
.cookie-banner-text a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cookie-banner-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-banner .btn {
  white-space: nowrap;
}

/* ==========================================================================
   40. Karachem × KARACHEM FEATHER LAYER
   Readability tweaks for the light, transparent brand panels. Brand palette
   unchanged — only transparent derivatives (see :root feather tokens).
   ========================================================================== */

/* Soften body copy on the feathered light panels (headings stay --text). */
.panel--blue p, .panel--blue .muted,
.panel--orange p, .panel--orange .muted,
.perform-data p, .perform-data .muted,
.split-box--gray p, .split-box--gray .muted,
.cta-band--blue p { color: var(--text-muted); }

/* Thin brand top-rule on the feathered panels — the orange/blue "line" that
   anchors each tint block. Raised specificity so it beats the .content-stage
   de-box rule (`border:0`). */
.content-stage .panel--orange, .content-stage .split-box--gray,
.panel--orange, .split-box--gray { border-top: 3px solid var(--orange); }
.content-stage .panel--blue, .content-stage .perform-data,
.panel--blue, .perform-data { border-top: 3px solid var(--blue); }

/* ==========================================================================
   60. Karachem IDENTITY PASS — deep-blue headline ink, blue links, white-on-blue
   primary action, navy dark bands (via --surface-dark token). Structure,
   photography, fonts (Archivo/Hanken), and all copy untouched.
   Appended last so it wins the cascade; on-dark class rules (higher
   specificity) still paint their headings white.
   ========================================================================== */

/* Headline ink — BLACK. User rule: letters are never colored; color lives
   in accents (dashes, rules, buttons, links), not in type. Element selector
   only: every .hero.on-dark / .cta-band / footer rule outranks it, so photo
   surfaces keep white type. */
h1, h2, h3, h4, h5, h6 { color: var(--black); }

/* Wash panels + light CTA band: keep the same black ink. */
.panel--blue h2, .panel--blue h3,
.panel--orange h2, .panel--orange h3,
.perform-data h2, .perform-data h3,
.split-box--gray h2, .split-box--gray h3,
.section--orange h2, .section--orange h3,
.cta-band--blue h2 { color: var(--black); }
.tile-row--home .tile--data h3,
.tile-row--home .tile--data.tile--dark h3 { color: var(--black); }

/* Data numerals: black ink everywhere on light surfaces. */
.stat-num { color: var(--black); }
.perform-data .stat-num, .panel--blue .stat-num,
.panel--orange .stat-num, .split-box--gray .stat-num { color: var(--black); }

/* Raw text links: Karachem links are blue, not orange. Component links
   (.btn-link, breadcrumb, footer, nav) keep their own colors. */
a { color: var(--blue); }
a:hover { color: var(--blue-d); }

/* Primary action — solid brand blue with WHITE text (was dark-on-blue),
   deepening on hover. !important needed to beat the corporate-pass hovers. */
.btn-primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--blue-d) !important;
  border-color: var(--blue-d) !important;
  color: var(--white) !important;
}
.btn-secondary:hover {
  background-color: var(--blue-d) !important;
  border-color: var(--blue-d) !important;
}

/* Spec tables: light-blue header band (Karachem data style). The orange-wash
   detail variant keeps its own higher-specificity header. */
table.spec thead th { background: var(--blue-wash); }

/* High-contrast theme parity: headings back to black on white. */

/* ==========================================================================
   61. LIGHT CANVAS PASS — Karachem keeps the whole page light: white canvas,
   pale blue/orange tint panels, navy TYPE. No solid dark bands anywhere.
   Every former charcoal/navy fill (footer, stat strip, hero find-tab,
   badges, cookie bar) is re-skinned to a light surface below. Photo scrims
   are untouched — dark gradients over photography stay for legibility.
   ========================================================================== */

::selection { background: var(--blue-wash); color: var(--text); }

/* ── Footer → light Karachem footer: pale cool band, muted links, orange
   brand rail on the top edge (same rail as the tint panels + TDS) */
.site-footer {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-top: 3px solid var(--orange);
}
.footer-grid { border-bottom: 1px solid var(--border); }
.footer-grid h4 { color: var(--text); }
.footer-grid > * + *::before { background: var(--border); }
.footer-brand p { color: var(--text-muted); }
.site-footer nav a { color: var(--text-muted); }
.site-footer nav a:hover { color: var(--black); }
.footer-contact address,
.footer-contact address a { color: var(--text-muted); }
.footer-contact address a:hover { color: var(--black); }
.social a { background: var(--blue-wash); color: var(--navy); }
.social a:hover { background: var(--orange); z-index: 10; color: var(--white); }
.footer-bottom { border-top: 1px solid var(--border); color: var(--text-muted); }
.footer-legal { border-top: 1px solid var(--border); }
.footer-legal a { color: var(--text-muted); }
.footer-legal a::after { color: var(--blue); }
.footer-legal a:hover { color: var(--black); }
.footer-legal a:hover::after { color: var(--orange); }
.footer-grid a.is-soon,
.footer-grid a.is-soon:hover { color: var(--text-muted); opacity: 0.7; }
.site-footer :focus-visible { box-shadow: var(--ring); }

/* ── Stat band → pale blue data strip, navy numerals ── */
.section--stats,
.stat-band { background: var(--blue-wash); }
.section--stats .stat-num { color: var(--black); }
.section--stats .stat-num span { color: var(--orange-d); }
.section--stats .stat-label { color: var(--text-muted); }
.section--stats .section-head h2 { color: var(--black); }
.section--stats .eyebrow { color: var(--text-muted); }
.section--stats .eyebrow::before { background: var(--orange); z-index: 10; }
.stat-band .stats > div { border-top: 1px solid rgba(12, 61, 122, 0.30); }
@media (min-width: 1025px) {
  .stat-band .stats > div + div::before { background: rgba(12, 61, 122, 0.18); }
}

/* ── Hero find-tabs → light strip pair (pale blue | white) ── */
.find-tab--dark { background: var(--blue-wash); color: var(--text); }
.find-tab--dark:hover { background: var(--blue-wash); color: var(--blue-d); }
.find-tabs--hero .find-tab--dark { border-right: 1px solid rgba(12, 61, 122, 0.18); }
.find-tab--light { background: var(--page-bg); color: var(--text); }
.find-tab--light:hover { background: var(--surface-muted); color: var(--blue-d); }

/* ── Small dark atoms → light chips ── */
.soon-badge { background: var(--blue-wash); color: var(--text-muted); }
.tile--data.tile--dark { background: var(--page-bg); border-top-color: var(--border); }

/* ── Cookie banner → light sheet ── */
.cookie-banner {
  background: var(--page-bg);
  color: var(--text);
  border-top: var(--rule);
  box-shadow: 0 -10px 30px rgba(12, 45, 90, 0.10);
}
.cookie-banner-text { color: var(--text-muted); }
.cookie-banner-text a { color: var(--blue); }

/* ── Interactive tint: hovers wash pale blue instead of gray (Karachem cue) ── */
.prow:hover,
.product-row:hover,
.nav-panel-links a:hover,
.link-rows a:hover,
.search-group li a:hover,
.download-list a:hover { background: #EAF3FB; }

/* Pressable wipe reads as a light blue sweep on light cards; photo tiles
   keep the original dark drape. */
.tile::after, .card::after, .feature-card::after, .find-tab::after,
.prow::after, .product-row::after { background: rgba(15, 87, 190, 0.07); }
.group-tile::after, .tile--lg::after { background: rgba(17, 17, 17, 0.09); }
.find-tab--dark::after { background: rgba(15, 87, 190, 0.07); }

/* Spec-table header label: black ink on the pale blue band */
table.spec thead th { color: var(--black); border-bottom-color: var(--rule-color); }

/* Contact info card sits on the pale blue panel now — dark ink, not white */
.contact-info.panel--blue dt { color: var(--text-muted); opacity: 1; }
.contact-info.panel--blue dd { color: var(--text); }
.contact-info.panel--blue a:not(.btn) { color: var(--blue); }
.contact-info.panel--blue a:not(.btn):hover { color: var(--blue-d); }

/* Tags on the pale blue panels were still white (§58 wrote them for a
   saturated fill) — neutral ink reads on the wash */
.panel--blue .tag,
.perform-data .tag { color: var(--text-muted); }

/* ── Karachem signature hero: white info panel floating on a bright photo.
   Headline flips from white-on-scrim to navy-on-white; the panel gets the
   thin orange top rule that anchors every tint block on the site. Reset the
   old inner padding (it was stage spacing) and use margins instead so the
   panel hugs its content. ── */
.hero.on-dark .hero-inner {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 4px solid var(--orange);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 48px);
  max-width: 720px;
}
.hero--home .hero-inner { margin-block: clamp(56px, 7vw, 110px) clamp(110px, 13vw, 170px); }
.hero--compact .hero-inner { margin-block: clamp(48px, 6vw, 88px); }
.hero.on-dark .hero-inner h1 { color: var(--black); }
.hero.on-dark .hero-inner .lead { color: var(--text-muted); }
.hero.on-dark .hero-inner .eyebrow { color: var(--text-muted); letter-spacing: 0.18em; }
.hero.on-dark .hero-inner :focus-visible { box-shadow: var(--ring); }
/* Buttons inside the white panel drop their on-dark (white) treatment */
.hero.on-dark .hero-inner .btn-secondary {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}
@media (max-width: 560px) {
  .hero.on-dark .hero-inner { padding: 24px 20px; }
  .hero--home .hero-inner { margin-block: 40px 72px; }
}
/* ≤700px the docked find-tabs go static (see §20); as a flex ROW item they
   were shrinking into an icon-sliver beside the hero copy. Stack the hero
   vertically so the strip spans full width below the panel. */
@media (max-width: 700px) {
  .hero { flex-direction: column; }
  .hero--home { justify-content: center; }
  .hero--compact { justify-content: flex-end; }
  .hero .find-tabs--hero { width: 100%; }
}

/* ==========================================================================
   62. NEUTRAL LABELS — no colored letters anywhere. Every tracked uppercase
   label (eyebrows, tags, kickers) reads in neutral ink; the ORANGE DASH and
   rules carry the brand color instead. Photo-overlay labels stay white.
   Functional links/buttons keep blue — affordance, not decoration.
   ========================================================================== */
.eyebrow,
.section--orange .eyebrow,
.feature-body .eyebrow,
.tile--data .tile-eyebrow,
.cta-band .eyebrow,
.cta-band--blue .eyebrow,
.search-group-label,
.compare-slot-label,
.contact-info dt,
.tag,
.news-soon-badge { color: var(--text-muted); }
/* dash accents stay orange */
.eyebrow::before { background: var(--orange); z-index: 10; }

/* ==========================================================================
   63. BOX SYSTEM & MOTION — Karachem professional pass.
   One card language: white box, hairline frame, colored category rail on the
   top edge, orange rail + lift on hover. Plus restrained signature motion:
   slow Ken Burns on hero photos, eyebrow dash draw-in on scroll reveal,
   framed circular carousel controls, data-table row highlight.
   ========================================================================== */

/* Category rails — the corporate border reset (§CORPORATE, !important) was
   flattening them to gray; restore with matching importance. */
.product-card[data-category="acrylics"]  { border-top: 4px solid var(--blue) !important; }
.product-card[data-category="alkyds"]    { border-top: 4px solid var(--orange) !important; }
.product-card[data-category="additives"] { border-top: 4px solid var(--gray-600) !important; }
.tile--data[data-category="acrylics"]  { border-top: 3px solid var(--blue) !important; }
.tile--data[data-category="alkyds"]    { border-top: 3px solid var(--orange) !important; }
.tile--data[data-category="additives"] { border-top: 3px solid var(--gray-600) !important; }
/* hover: every boxed card answers with the orange action rail */
.product-card:hover,
.tile--data:hover,
.value-card:hover { border-top-color: var(--orange) !important; }
.value-card:hover::before { background: var(--orange); z-index: 10; }

/* Ken Burns — hero photos settle from a gentle zoom (GPU transform only).
   Ends at 1.04, not 1: the §68 cursor parallax shifts the photo a few px,
   and the residual overscan keeps edges from ever showing. */
@keyframes hero-kb { from { transform: scale(1.08); } to { transform: scale(1.04); } }
.hero .hero-media img { /* animation: hero-kb 12s var(--ease-custom) both; disabled to stop zooming */ }

/* Eyebrow dash draws in when its section reveals (visible by default, so
   no-JS visitors always see it) */
@keyframes dash-in { from { transform: scaleX(0); } }
.eyebrow::before { transform-origin: left; }
html[dir="rtl"] .eyebrow::before { transform-origin: right; }
.reveal.is-visible .eyebrow::before,
.cascade.is-visible .eyebrow::before { animation: dash-in 700ms var(--ease-custom) 150ms both; }

/* Carousel controls — framed squares that fill blue on hover */
.carousel-btn {
  width: 52px; height: 52px;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  background: var(--page-bg);
  color: var(--blue);
  transition: background var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro), opacity var(--transition);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Newsroom placeholder — pale blue panel instead of a bare ruled box */
.news-soon {
  border: 0;
  border-top: 3px solid var(--blue);
  background: var(--blue-wash);
}

/* Data tables — quiet row highlight while scanning */
table.spec tbody tr:hover td,
table.spec tbody tr:hover th[scope="row"] { background: #EAF3FB; }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-media img { animation: none; }
  .reveal.is-visible .eyebrow::before,
  .cascade.is-visible .eyebrow::before { animation: none; }
}

/* ==========================================================================
   64. EDITORIAL SCALE & BRAND MOTIF PASS — the big-visual layer.
   Bigger, lighter display type (Karachem editorial scale); kicker rows with a
   trailing hairline; the brand hexagon artwork (images/brand/, previously
   unused) returns as quiet watermarks on the pale bands; scroll-linked photo
   drift as progressive enhancement; glassy condensed header; soft page fade.
   Letters stay black/neutral; every fill stays light.
   ========================================================================== */

/* — page enters with a soft fade — */
@keyframes page-in { from { opacity: 0; } }
body { animation: page-in 360ms ease-out both; }

/* — editorial display scale — */
.section-head h2 {
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.028em;
}
/* Panel width follows the viewport — the photo (and its subject) must stay
   visible beside the box, never buried under it. ≤860px the photo is a
   backdrop only, so the panel may go full width there. */
.hero.on-dark .hero-inner { max-width: min(760px, 56vw); }
@media (max-width: 860px) {
  .hero.on-dark .hero-inner { max-width: none; }
}
.hero:not(.hero--compact) .hero-inner h1 { font-size: clamp(2.6rem, 4.6vw, 5.2rem); }

/* big thin data numerals — Archivo Light, the Karachem number style */
.stat-num { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.04em; }
.section--stats .stat-num { font-size: clamp(3.4rem, 6vw, 6.2rem); }
.tile-stat { font-weight: 300; }
.value-num { font-weight: 300; }
.prow-num { font-weight: 300; }

/* — kicker rows: eyebrow + trailing hairline across the section head — */
.section-head:not(.center) .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}
.section-head:not(.center) .eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(43, 74, 112, 0.22);   /* reads on white AND the pale washes */
}

/* — brand hexagon watermarks on the pale bands (decor, pointer-safe) — */
.section--stats,
.stat-band {
  background-image: url("../images/brand/hex-outline.svg");
  background-repeat: no-repeat;
  background-position: calc(100% + 150px) center;
  background-size: clamp(380px, 42vw, 580px);
}
.cta-band--blue {
  background-image: url("../images/brand/hex-cluster.svg");
  background-repeat: no-repeat;
  background-position: calc(100% + 130px) center;
  background-size: 430px;
}
.news-soon {
  background-image: url("../images/brand/hex-outline.svg");
  background-repeat: no-repeat;
  background-position: calc(100% + 170px) center;
  background-size: 430px;
}
.site-footer {
  background-image: url("../images/brand/lattice-light.svg");
  background-repeat: no-repeat;
  background-position: right -80px top -60px;
  background-size: 900px;
}
html[dir="rtl"] .section--stats,
html[dir="rtl"] .stat-band { background-position: -150px center; }
html[dir="rtl"] .cta-band--blue { background-position: -130px center; }
html[dir="rtl"] .news-soon { background-position: -170px center; }
html[dir="rtl"] .site-footer { background-position: left -80px top -60px; }

/* — scroll-linked photo drift (Chrome 115+; others keep hover zoom) — */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .content-stage .media img,
    .teaser-media .media img {
      scale: 1.12;
      animation: media-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes media-drift {
  from { transform: translateY(-3.5%); }
  to   { transform: translateY(3.5%); }
}

/* — glassy condensed header — */
/* The blur must live on a ::before layer, never on .site-header itself:
   backdrop-filter on the header makes it the containing block for its
   position:fixed descendants (mobile drawer, mobile nav panel), which
   collapses the full-screen menu into the header box and freezes the page. */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.86);
}
.site-header.scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* — hero panel: slower, heavier rise than the generic reveal — */
.hero .hero-inner.reveal { transform: translateY(36px); transition-duration: 900ms; }
.hero .hero-inner.reveal.is-visible { transform: none; }

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

/* ==========================================================================
   65. FINISH PASS — anti-spam field, branded scrollbar, print sheet,
   interaction polish. No new colors; letters stay black/neutral.
   ========================================================================== */

/* Honeypot form field — off-screen for humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Branded scrollbar — quiet steel-blue thumb on white */
html { scrollbar-color: #A9BDD1 #FFFFFF; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #FFFFFF; }
::-webkit-scrollbar-thumb {
  background: #A9BDD1;
  border-radius: 6px;
  border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:hover { background: #7E9CBB; }

/* Buttons: crisper action feel — slight letter-spacing + smooth arrow */
.btn { letter-spacing: 0.015em; }
.btn svg { transition: transform var(--dur-micro) var(--ease-custom); }
.btn:hover svg { transform: translateX(3px); }

/* Form fields: thicker focused underline reads intentional */
.field input:focus, .field textarea:focus {
  border-bottom-color: var(--blue);
  box-shadow: none;
}

/* ==========================================================================
   66. STAGE PASS — photographic grade, printed keylines, hero choreography,
   floating back-to-top. Big-picture polish; palette and type rules intact.
   ========================================================================== */

/* Photographic grade — one consistent, slightly rich look for every photo */
.media img,
.hero-media img,
.tile-media img { filter: saturate(1.05) contrast(1.03); }

/* Printed keyline — thin white inner frame on full-bleed photography
   (classic corporate print cue; sits under captions and drape wipes) */
.content-stage .perform-media::before,
.content-stage .split-box--media::before,
.group-tile .tile-media::before,
.tile--lg .tile-media::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  z-index: 2;
  pointer-events: none;
}

/* Hero choreography — headline words rise first, then the lead, then the
   actions. Animation only fires on .is-visible, so no-JS visitors see
   everything immediately. */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
.hero .hero-inner.is-visible .lead {
  animation: rise-in 700ms var(--ease-custom) 420ms both;
}
.hero .hero-inner.is-visible .hero-actions {
  animation: rise-in 700ms var(--ease-custom) 620ms both;
}

/* Floating back-to-top (injected by js/script.js) */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  width: 48px;
  height: 48px;
  border-radius: 0;
  border: 1px solid var(--gray-300);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(12, 45, 90, 0.14);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-micro), transform var(--dur-micro),
              background var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.to-top svg { width: 20px; height: 20px; }
html[dir="rtl"] .to-top { right: auto; left: 22px; }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-inner.is-visible .lead,
  .hero .hero-inner.is-visible .hero-actions { animation: none; }
  .to-top { transition: none; }
}

/* ==========================================================================
   67. MOTION QUALITY PASS — one professional motion language.
   Removes the cheap effects: the translucent film that swept across cards,
   the jump-and-shadow card lift, the black button flash, the slow word
   stagger. Every interactive surface now gives ONE calm response: a slow
   image zoom or a color/rail change, on the shared brand ease. Plus
   deliberate image placement (object-position) for the key photography.
   ========================================================================== */

/* tightened motion scale — snappier words, calmer reveals */
:root {
  --dur-word: 480ms;
  --word-step: 0.055s;
}
.reveal { transform: translateY(18px); transition-duration: 800ms;
  transition-timing-function: var(--ease-custom); }
.cascade > * { transform: translateY(14px); }
.reveal-words .word { transform: translateY(0.65em); }
.reveal-words.is-visible .word { transform: translateY(0); }

/* 1. Retire the drape/film wipes everywhere */
.tile::after, .card::after, .feature-card::after, .find-tab::after,
.prow::after, .product-row::after, .group-tile::after,
.drapes { display: none !important; }

/* 2. Cards never jump — no lift, no drop shadow. The response is the slow
   image zoom, the orange rail (§63) and a quiet frame deepen. */
.tile:hover, .feature-card:hover, .product-card:hover,
.value-card:hover, .section-head--box:hover,
.tile-row--home .tile--data:hover, .tile-row--home .tile--lg:hover {
  transform: none !important;
  box-shadow: none !important;
}
.feature-card:hover, .tile--data:hover, .product-card:hover, .value-card:hover {
  border-left-color: #C2CFDC !important;
  border-right-color: #C2CFDC !important;
  border-bottom-color: #C2CFDC !important;
}

/* one shared image response: slow 900ms zoom, small scale */
.media img, .tile-media img {
  transition: transform 900ms var(--ease-custom), filter 900ms var(--ease-custom);
}
.feature-card:hover .media img,
.tile:hover .media img,
.product-card:hover .media img,
.tile--lg:hover .tile-media img,
.group-tile:hover .tile-media img,
.teaser:hover .media img,
.group-band:hover .teaser-media .media img,
.carousel-slide .news-card:hover .media img {
  transform: scale(1.035) !important;
}

/* 3. Buttons: no black flash — a single confident step on the brand ease */
.btn { transition: background-color var(--dur-hover) var(--ease-custom),
                   color var(--dur-hover) var(--ease-custom),
                   border-color var(--dur-hover) var(--ease-custom); }
.btn:hover {
  background-color: var(--blue-d) !important;
  border-color: var(--blue-d) !important;
  color: var(--white) !important;
}
.btn-orange-outline:hover {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: var(--white) !important;
}
.btn-download:hover {
  background-color: var(--page-bg) !important;
  border-color: var(--blue) !important;
  color: var(--blue-d) !important;
}

/* 4. Hero panel: soft-focus settle (blur -> sharp while it rises) */
.hero .hero-inner.reveal { filter: blur(5px); transition-property: opacity, transform, filter; }
.hero .hero-inner.reveal.is-visible { filter: blur(0); }

/* 5. Deliberate image placement — subjects framed, not defaulted */
.hero-media img { object-position: center 38%; }
img[src*="hero-additives"] { object-position: 80% 30%; } /* tiles: dropper sits upper-right */
.tile--lg .tile-media img { object-position: center 42%; }
.group-tile .tile-media img { object-position: center 45%; }

/* HERO framing — per-photo, chosen from contact-sheet analysis so each
   subject stays visible in the open area right of the white panel.
   Scoped to .hero-media: tiles/cards keep their own crops. */
.hero-media img[src*="hero-home"]           { object-position: 88% 30%; } /* working chemist */
.hero-media img[src*="about-hero"]          { object-position: 82% 30%; } /* plant structure */
/* (old header crop for hero-acrylics removed — §71b owns header framing now) */
.media img[src*="hero-acrylics"] { object-position: center !important; } /* Box crop */
.hero-media img[src*="hero-additives"]      { object-position: 45% 30%; } /* dropper + droplet */
.hero-media img[src*="hero-alkyd"]          { object-position: 40% 32%; } /* resin pour + bucket */
.hero-media img[src*="hero-contact"]        { object-position: 35% 32%; } /* team at the desk */
.hero-media img[src*="hero-products-lab"]   { object-position: 75% 40%; } /* sunlit glassware */
.hero-media img[src*="hero-sustainability"] { object-position: 92% 38%; } /* big wind turbine */
.hero-media img[src*="photo-paint-wall"]    { object-position: 85% 40%; } /* drum store + signage */
/* Force the container to match the photo's 1:1 aspect ratio so nothing is cropped */
#decorative .perform-media { aspect-ratio: 1 / 1; height: auto; }
.media img[src*="interior-decorative"]      { object-position: right bottom; } /* keep roller head and hand in view */
.nav-panel-visual img[src*="interior-decorative"] { object-position: right 15%; } /* menu: 16:9 crop focusing on roller head */

/* group-tile scrim: anchor only the label strip — the photo stays clean
   (old gradient grayed out the middle 50% of light images) */
.group-tile .tile-media::after {
  background: linear-gradient(180deg,
    rgba(13, 13, 13, 0) 0%,
    rgba(13, 13, 13, 0) 55%,
    rgba(13, 13, 13, 0.38) 78%,
    rgba(13, 13, 13, 0.78) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-inner.reveal { filter: none; }
  .media img, .tile-media img { transition: none; }
}

/* ==========================================================================
   68. OPENING MOMENT — the entry choreography.
   A hexagon line-art (the logo motif) draws itself over the hero photo and
   floats; the photo answers the cursor with a damped micro-parallax
   (js/script.js); the white panel's orange rule sweeps in as it lands.
   Everything degrades gracefully: no JS → static, reduced-motion → still.
   ========================================================================== */

/* — hero logo line-art: the LEFT HALF of the Karachem mark (flanking bar +
   hex half) drawn in white keylines. Home hero only (js/script.js).
   svg.hero-hex (0,1,1) — must outrank `.hero-media svg` (§8), which paints
   media SVGs full-bleed with width/height 100%. — */
svg.hero-hex {
  position: absolute;
  top: 50%;
  right: clamp(3%, 7vw, 11%);
  left: auto;
  width: auto;
  height: min(56vmin, 500px);
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  object-fit: initial;
  filter: drop-shadow(0 1px 6px rgba(10, 22, 40, 0.35));
}
svg.hero-hex path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hex-draw 1800ms var(--ease-custom) 500ms forwards;
}
svg.hero-hex .lm-line-bar { stroke-width: 8; }
svg.hero-hex .lm-line-hex { stroke-width: 8; animation-delay: 950ms; }
@keyframes hex-draw { to { stroke-dashoffset: 0; } }
svg.hero-hex { animation: hex-float 11s ease-in-out 3s infinite; }
@keyframes hex-float {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 12px)); }
}
html[dir="rtl"] svg.hero-hex { right: auto; left: clamp(3%, 7vw, 11%); }
@media (max-width: 860px) { svg.hero-hex { display: none; } }

/* — panel's orange rule draws in as the panel lands — */
.hero.on-dark .hero-inner { border-top: 0; }
.hero.on-dark .hero-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange); z-index: 10;
  transform-origin: left;
}
html[dir="rtl"] .hero.on-dark .hero-inner::before { transform-origin: right; }
.hero.on-dark .hero-inner.is-visible::before {
  animation: bar-in 700ms var(--ease-custom) 250ms both;
}
@keyframes bar-in { from { transform: scaleX(0); } }

/* — parallax host: the photo layer gets translated by JS — */
.hero .hero-media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  svg.hero-hex, svg.hero-hex path { animation: none; }
  svg.hero-hex path { stroke-dashoffset: 0; }
  .hero.on-dark .hero-inner.is-visible::before { animation: none; }
}

/* Print: clean paper output — hide chrome, keep content ink-black */
@media print {
  .utility-bar, .site-header, .find-tabs, .nav-panel, .search-overlay,
  .cookie-banner, .carousel-nav, .site-footer .social, .to-top,
  .footer-legal, .btn, .breadcrumb { display: none !important; }
  body { animation: none; color: #000; }
  .hero, .hero-media, .hero-media img { min-height: 0 !important; }
  .hero-media { position: static; }
  .hero-media img { display: none; }
  .hero.on-dark .hero-inner {
    background: #fff; border-top: 2pt solid #000;
    margin: 0; padding: 12pt 0; max-width: none;
  }
  .hero.on-dark .hero-inner h1, .section-head h2, h2, h3 { color: #000 !important; }
  .section { padding-block: 16pt; }
  .section--stats, .stat-band, .cta-band--blue, .news-soon,
  .site-footer { background: #fff !important; background-image: none !important; }
  a { color: #000; text-decoration: underline; }
}


/* ==========================================================================
   69. SPLIT HERO STAGE — make the photo subject actually visible.
   The heroes were full-bleed photos with the white panel floating on top.
   Problem: on wide viewports object-fit:cover shows the photo's FULL width,
   so object-position can no longer steer the subject — and the key subjects
   (the chemist's hands on home, the dropper, the resin pour) sit in the
   CENTER of their source photos, exactly where the white panel covers them.
   Fix: the stage splits. A pale blue wash owns the left, the photo owns the
   right ~60%, and the white panel floats across the seam. The subject is
   framed inside the open photo zone at every width; on phones the photo
   becomes its own band above the panel instead of hiding behind it.
   ========================================================================== */

.hero--home,
.hero--compact { background: #EEF5FB; }

/* photo owns the right side of the stage — pushed left so the photo is
   bigger and the diagonal seam sits further toward the copy */
.hero--home .hero-media,
.hero--compact .hero-media { left: 0; width: 100%; }

/* home photo: center the chemist's hands (they sit mid-frame in the source) */
.hero--home .hero-media img[src*="hero-home"] { object-position: 50% 45%; }

/* the dark legibility scrims are obsolete — no text sits on the photo now.
   Instead, a wash-colored DIAGONAL wedge cuts across the photo's inner edge
   (the slant echoes the hexagon logo motif) with a thin orange seam on the
   cut. Painted on the ::after overlay so the entrance wipe and the Ken Burns
   zoom underneath stay untouched. */
/* Seam = a SOLID wash wedge skewed to the diagonal, carrying a crisp orange
   border on its inner edge. A transformed solid border is antialiased by the
   compositor (sharp at any DPI — no gradient banding), and being opaque it
   also hides the photo's clip edge, so the faint vertical "animation line"
   disappears. The wash colour matches the hero background, so the wedge's
   own left/outer edge is invisible; only the orange diagonal reads. */
/* (the old wedge disable lived here — the DESIGN PASS block at the end of
   this file now owns .hero-media::after and re-enables the seam ≥861px) */

/* SOLID SHEET. One flat white panel with the orange top rule — no blur, no
   glass, no shadow. Flatter and calmer (BASF-light register), cheaper to
   composite on mobile GPUs, and the photograph keeps a crisp edge. */
.hero--home.on-dark .hero-inner,
.hero--compact.on-dark .hero-inner {
background: var(--surface);
-webkit-backdrop-filter: none;   /* override the §61 blur(6px) layer */
backdrop-filter: none;
border: 0;
border-radius: 0;
border-top: 3px solid var(--orange);
padding: clamp(24px, 3vw, 40px);
max-width: min(460px, 37vw);
margin-inline-start: 0;
}
.hero--home.on-dark .hero-inner::before,
.hero--compact.on-dark .hero-inner::before { content: none; }
.hero--home .hero-inner h1 {
  font-size: clamp(2.9rem, 4.6vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.025em;
}
.hero--compact .hero-inner h1 {
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.hero--home .hero-inner .lead,
.hero--compact .hero-inner .lead {
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: var(--space-2);
}

/* ≤700px: the hero already stacks vertically (§61). The photo becomes its
   own full-width band on top; the panel laps over its bottom edge. */
@media (max-width: 700px) {
  .hero--home .hero-media,
  .hero--compact .hero-media {
    position: relative;
    left: 0;
    width: 100%;
    order: -1;
  }
  .hero--home .hero-media { height: clamp(230px, 56vw, 340px); border-bottom: 3px solid var(--orange); }
  .hero--compact .hero-media { height: clamp(180px, 44vw, 260px); border-bottom: 3px solid var(--orange); }
  .hero--home .hero-media::after,
  .hero--compact .hero-media::after { display: none; }
  .hero--home, .hero--compact { min-height: 0; justify-content: flex-start; }
  .hero--home.on-dark .hero-inner,
  .hero--compact.on-dark .hero-inner { max-width: none; }
  .hero--home .hero-inner { margin-top: 28px; }
  .hero--compact .hero-inner { margin-top: 24px; }
}

/* RTL: mirror the stage — photo left, copy right (wedge mirroring lives in
   the DESIGN PASS block at the end of this file) */
html[dir="rtl"] .hero--home .hero-media,
html[dir="rtl"] .hero--compact .hero-media { left: 0; right: 0; width: 100%; }
@media (max-width: 700px) {
  html[dir="rtl"] .hero--home .hero-media,
  html[dir="rtl"] .hero--compact .hero-media { right: auto; }
}


/* data numerals read in columns — lock them to tabular figures */
.stat-num, .tile-stat { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   PAGE HEADER IDENTITY — breadcrumb lives ON the hero sheet, and product
   family pages carry their chemistry color (same mapping as the portfolio
   rows: acrylics=blue, alkyds=orange, additives=gray). One system, no new
   colors.
   ========================================================================== */

/* breadcrumb inside the hero panel: quiet wayfinding line above the eyebrow */
.hero .hero-inner .breadcrumb {
  border-top: 0;
  padding-top: 0;
  margin-bottom: var(--space-4);
  font-size: 0.85rem;
}
.hero .hero-inner .breadcrumb ol { padding: 0; margin: 0; }
.hero .hero-inner .breadcrumb a { color: var(--text-muted); }
.hero .hero-inner .breadcrumb a:hover { color: var(--orange-d); }
.hero .hero-inner .breadcrumb [aria-current="page"] { color: var(--text); }

/* chemistry-family accents: panel rule + eyebrow tick + mobile photo seam */
.hero--family-acrylics.on-dark .hero-inner { border-top-color: var(--blue); }
.hero--family-acrylics .hero-inner .eyebrow::before { background: var(--blue); }
.hero--family-additives.on-dark .hero-inner { border-top-color: var(--gray-600); }
.hero--family-additives .hero-inner .eyebrow::before { background: var(--gray-600); }
/* alkyds keep the brand orange — the accent IS the alkyd color in the
   portfolio mapping, so no override needed */
@media (max-width: 700px) {
  .hero--family-acrylics .hero-media { border-bottom-color: var(--blue); }
  .hero--family-additives .hero-media { border-bottom-color: var(--gray-600); }
}

/* type polish: balanced headlines, no orphan-heavy leads */
.hero .hero-inner h1 { text-wrap: balance; }
.hero .hero-inner .lead { text-wrap: pretty; }

/* ==========================================================================
   MOTION SYSTEM — Phase 1 (see MOTION-PLAN.md)
   Everything here is gated behind html.js-motion (set by script.js only when
   JS runs AND prefers-reduced-motion is off), so static/no-JS/reduced-motion
   visitors see the finished page instantly.
   ========================================================================== */

/* — hero entrance: panel children rise in sequence (h1 keeps its own
     word-by-word reveal, so it is excluded from the child stagger) — */
html.js-motion .hero-inner.reveal > :not(h1) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-motion .hero-inner.reveal.is-visible > :not(h1) {
  opacity: 1;
  transform: none;
}
html.js-motion .hero-inner.reveal.is-visible > :nth-child(1) { transition-delay: 60ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(2) { transition-delay: 140ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(3) { transition-delay: 220ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(4) { transition-delay: 320ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(5) { transition-delay: 420ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(6) { transition-delay: 520ms; }
html.js-motion .hero-inner.reveal.is-visible > :nth-child(7) { transition-delay: 620ms; }

/* — button fill sweep: the hover color slides in from the inline-start edge
     instead of snapping. ::after so the .cta-band ::before arrow keeps its
     job. Colors are the buttons' existing hover fills — nothing new. — */
/* cta-band buttons are excluded: their ::before hairline sits OUTSIDE the
   button box (overflow:hidden would clip it) and they own custom colors */
html.js-motion .btn:not(.cta-band *) {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
html.js-motion .btn:not(.cta-band *)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-motion .btn:not(.cta-band *):hover::after,
html.js-motion .btn:not(.cta-band *):focus-visible::after { transform: translateX(0); }
html.js-motion .btn-primary:not(.cta-band *)::after { background: var(--blue-d); }
html.js-motion .btn-primary:not(.cta-band *):hover { background: var(--blue); }
html.js-motion .btn-secondary:not(.cta-band *)::after { background: var(--blue); }
html.js-motion .btn-secondary:not(.cta-band *):hover { background: transparent; }
html[dir="rtl"].js-motion .btn:not(.cta-band *)::after { transform: translateX(101%); }
html[dir="rtl"].js-motion .btn:not(.cta-band *):hover::after,
html[dir="rtl"].js-motion .btn:not(.cta-band *):focus-visible::after { transform: translateX(0); }

/* — card rule-draw: a 2px accent line draws across the card's top edge on
     hover; family-colored where the card carries data-category. ::before is
     free on these roots (the tint wipe owns ::after). — */
html.js-motion :is(.feature-card, .group-tile, .product-card)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 4;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
html.js-motion :is(.feature-card, .group-tile, .product-card):hover::before {
  transform: scaleX(1);
}
html.js-motion .feature-card[data-category="acrylics"]::before { background: var(--blue); }
html.js-motion .feature-card[data-category="additives"]::before { background: var(--gray-600); }
html[dir="rtl"].js-motion :is(.feature-card, .group-tile, .product-card)::before {
  transform-origin: right;
}

/* — PRELOADER: hexagon mark on a clean sheet, page wipes in. The .kc-intro
     class is set by a tiny inline <head> script (session-once, skipped for
     reduced motion). Belt-and-braces: if script.js never runs, the overlay
     auto-clears via a CSS animation after 2.6s so the page is never stuck. — */
html.kc-intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--page-bg, #fff);
  transition: transform 650ms cubic-bezier(0.7, 0, 0.3, 1);
  animation: kc-auto-clear 0s linear 2.6s forwards;
}
html.kc-intro.kc-intro-leave::before { transform: translateY(-101%); }
@keyframes kc-auto-clear { to { visibility: hidden; pointer-events: none; } }
.kc-intro-mark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
  display: grid;
  justify-items: center;
  gap: 18px;
  opacity: 0;
}
.kc-intro-mark img { height: 84px; width: auto; transform: scale(0.92); }
.kc-intro-bar {
  display: block;
  width: 84px; height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.kc-intro-mark.play {
  opacity: 1;
  transition: opacity 450ms ease;
}
.kc-intro-mark.play img {
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kc-intro-mark.play .kc-intro-bar {
  transform: scaleX(1);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 350ms;
}
html.kc-intro-leave .kc-intro-mark {
  opacity: 0;
  transform: translate(-50%, -58%);
  transition: opacity 350ms ease, transform 350ms ease;
}

/* — HERO LATTICE: molecular hexagon field on the wash, behind the photo and
     panel (canvas injected by script.js; desktop only) — */
.hero-lattice {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* — FOOTER LOGO ASSEMBLY: mark settles in, orange rule draws beneath — */
html.js-motion .footer-brand .logo-mark {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-motion .site-footer.assembled .footer-brand .logo-mark {
  opacity: 1;
  transform: none;
}
html.js-motion .footer-brand { position: relative; }
html.js-motion .footer-brand::after {
  content: "";
  position: absolute;
  top: 58px;
  left: 0;
  width: 64px; height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}
html.js-motion .site-footer.assembled .footer-brand::after { transform: scaleX(1); }
html[dir="rtl"].js-motion .footer-brand::after { left: auto; right: 0; transform-origin: right; }

/* — PINNED LOGO SCENE (home, desktop): the emotional band gains scroll
     runway; its content sticks mid-viewport while script.js scrubs the logo
     ring draw with scroll progress and stages the copy in. Mobile, no-JS and
     reduced-motion keep today's one-shot build (§39). — */
@media (min-width: 1024px) {
  html.js-motion .pin-stage { min-height: 170vh; }
  html.js-motion .pin-stage > .container {
    position: sticky;
    top: calc(50vh - 310px);
  }
  /* the ring is scroll-driven here — kill its timed keyframes */
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-ring {
    animation: none;
    opacity: 1;
  }
  /* §39's wall-clock build is fully retired inside the pin: bars, hexes and
     the float all key off the ps-* stage classes that script.js toggles from
     scroll progress, so the scene can never outrun or lag the pin. */
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-bar-left,
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-bar-right,
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-hex-left,
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-hex-right,
  html.js-motion .pin-stage .emotional-logo.is-visible .lm-logo {
    animation: none;
  }
  html.js-motion .pin-stage .lm-bar,
  html.js-motion .pin-stage .lm-hex {
    transition: opacity 700ms var(--ease-logo), transform 700ms var(--ease-logo);
  }
  html.js-motion .pin-stage.ps-bars .emotional-logo .lm-bar-left,
  html.js-motion .pin-stage.ps-bars .emotional-logo .lm-bar-right {
    opacity: 1; transform: translateX(0);
  }
  html.js-motion .pin-stage.ps-hex1 .emotional-logo .lm-hex-left,
  html.js-motion .pin-stage.ps-hex2 .emotional-logo .lm-hex-right {
    opacity: 1; transform: translate(0, 0);
  }
  html.js-motion .pin-stage.ps-done .emotional-logo .lm-logo {
    animation: lm-float 9s ease-in-out 600ms infinite;
  }
  html.js-motion .pin-stage .emotional-copy > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js-motion .pin-stage.ps-copy .emotional-copy > * { opacity: 1; transform: none; }
  html.js-motion .pin-stage.ps-copy .emotional-copy > :nth-child(2) { transition-delay: 90ms; }
  html.js-motion .pin-stage.ps-copy .emotional-copy > :nth-child(3) { transition-delay: 180ms; }
  html.js-motion .pin-stage.ps-copy .emotional-copy > :nth-child(4) { transition-delay: 270ms; }
  /* Hold the h2 word cascade + underline sweep in their pre-reveal state
     until the copy is actually shown — otherwise they play out invisibly
     under the opacity:0 container and the entrance arrives spent. */
  html.js-motion .pin-stage:not(.ps-copy) .emotional-copy .reveal-words.is-visible .word {
    opacity: 0;
    transform: translateY(0.65em);
    transition: none;
  }
  html.js-motion .pin-stage:not(.ps-copy) .emotional-copy .underline-reveal.is-visible::after {
    transform: scaleX(0);
    transition: none;
  }
}

/* — HERO PARALLAX (desktop): the photo wrapper drifts at ~1/10 scroll speed.
     The img is oversized upward so the travel never exposes a gap; the
     scroll-driven media-drift animation lives on the img, the parallax on
     the wrapper — different elements, no transform collision. — */
@media (min-width: 769px) {
  html.js-motion .hero--home .hero-media img,
  html.js-motion .hero--compact .hero-media img {
    /* NOTE: top % resolves against the wrapper's height (margin % would
       resolve against width and open a gap at the hero's bottom edge) */
    position: relative;
    top: -12%;
    height: 112%;
  }
}

/* ==========================================================================
   DESIGN PASS 2026-07 — approved bundle A+B+C (ideas list in chat).
   Identity intact: light surfaces, navy ink, orange accent, family colors.
   ========================================================================== */

/* (G2 hexagon ticks reverted 2026-07-12 — the original orange line ticks
   from §23 are back everywhere: eyebrows, list markers, footer) */

/* sheet-consistency: every dropped panel opens with the brand top rule */
.search-panel { border-top: 3px solid var(--orange); }
.language-panel { border-top: 3px solid var(--orange); }

/* G4 — headlines commit, leads stop ragged-wrapping */
.section-head h2 { text-wrap: balance; }
.section-head .lead, .section .muted { text-wrap: pretty; }
.section-head .lead { max-width: 65ch; }

/* G5 — Arabic type: purpose-made Arabic UI faces before generic fallback */
html[dir="rtl"] body,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button {
  font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
}

/* H2 — stat band: hairline dividers between the numbers (data-band feel) */
@media (min-width: 769px) {
  .stat-band .stats > div + div {
    border-inline-start: 1px solid var(--gray-300);
    padding-inline-start: var(--space-6);
  }
}

/* P1 — products gateway tiles carry their chemistry color at rest */
.group-tile[href="/acrylics"]     { border-top: 3px solid var(--blue); }
.group-tile[href="/alkyd-resins"] { border-top: 3px solid var(--orange); }
.group-tile[href="/additives"]    { border-top: 3px solid var(--gray-600); }

/* P2/F2 — portfolio ledger: row number + hover arrow in the family color */
.prow[data-category="acrylics"] .prow-num  { color: var(--blue); }
.prow[data-category="alkyds"] .prow-num    { color: var(--orange-d); }
.prow[data-category="additives"] .prow-num { color: var(--gray-600); }
.prow[data-category="acrylics"] .row-arrow  { color: var(--blue); }
.prow[data-category="additives"] .row-arrow { color: var(--gray-600); }

/* F1 — family pages: every eyebrow tick on the page carries the family color
   (graceful: browsers without :has() keep the orange tick) */
main:has(.hero--family-acrylics) .eyebrow::before  { background: var(--blue); }
main:has(.hero--family-additives) .eyebrow::before { background: var(--gray-600); }

/* C1 — compare tool: rows where grades differ get a soft wash; identical
   rows stay quiet. Sticky row headers keep the tint too. */
.cmp-comparing tr.is-diff td,
.cmp-comparing tr.is-diff th[scope="row"] { background: var(--orange-wash2); }

/* K1 — contact: form panel gets the brand top rule; the info card reads as
   a facts sheet with hairline dividers */
.contact-form-panel { border-top: 3px solid var(--orange); }
.contact-info > * + * {
  border-top: 1px solid rgba(15, 87, 190, 0.14);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

/* L1 — legal pages: document header block, TDS-sheet aesthetic */
.legal-doc .legal-meta {
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--orange);
  padding: var(--space-4) var(--space-5);
}

/* S1 — pull-quote: one statement per page set large and light */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 34ch;
}

/* (D1 key-spec strip removed 2026-07-21 at user request — its .spec-strip /
   .ss-item / .ss-value / .ss-label styles were deleted with it.) */

/* D3 — grade pages: slim action bar after the hero scrolls away */
.grade-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;                       /* under nav backdrop (90) and header (100) */
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px clamp(16px, 4vw, 40px);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--gray-300);
  box-shadow: 0 -8px 24px rgba(12, 45, 90, 0.08);
  transform: translateY(110%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.grade-bar.show { transform: translateY(0); }
.grade-bar .gb-code {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grade-bar .btn { padding: 0.65rem 1.1rem; font-size: 0.88rem; }
@media (prefers-reduced-motion: reduce) {
  .grade-bar { transition: none; }
}

/* (G3 diagonal wedge reverted 2026-07-12 — headers back to the plain
   full-bleed photo + solid sheet design. The legacy scrim stays retired.) */
.hero--home .hero-media::after,
.hero--compact .hero-media::after { display: none; }

/* grade-page spec chips (injected by js/script.js §10 from product data) */
.hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
}
.hero-chips li {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-chips li:not(:last-child)::after {
  content: "\00B7";
  margin-inline-start: var(--space-4);
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0;
}

/* ==========================================================================
   70. SIGNATURE PASS — the "walk in and say wow" layer.
   Cinema without noise: cross-page transitions, a living hexagon atmosphere
   behind the heroes, a one-time light sweep across the hero photo, a
   diagonal entrance wipe that matches the seam, scroll-driven photo drift,
   display-scale data numerals, a giant brand watermark in the footer, and
   branded scroll/button physics. Everything is GPU-only (transform/opacity),
   progressive (@supports / @media guards), and honours reduced motion.
   ========================================================================== */

/* ── A. Cross-document page transitions (Chromium 126+; others no-op) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 240ms var(--ease-custom) both vt-leave; }
::view-transition-new(root) { animation: 340ms var(--ease-custom) 40ms both vt-enter; }
@keyframes vt-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(12px); } }

/* ── C. One-time light sweep across the hero photo after the entrance.
   Sheen rides z1 above the image; the wash wedge rides z2 above the sheen,
   so the sweep reads on the photograph only. ── */
.hero--home .hero-media::before,
.hero--compact .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(75deg, transparent 32%, rgba(255, 255, 255, 0.32) 46%, transparent 60%);
  transform: translateX(-130%);
  animation: hero-sheen 1500ms var(--ease-custom) 1500ms forwards;
}
@keyframes hero-sheen { to { transform: translateX(130%); } }
.hero--home .hero-media::after,
.hero--compact .hero-media::after { z-index: 2; }

/* ── D. Entrance wipe goes DIAGONAL — same angle family as the seam ── */
[data-hero].hero-armed .hero-media {
  clip-path: polygon(0 0, 0 0, -18% 100%, 0 100%);
}
[data-hero].hero-armed.initialized .hero-media {
  /* rest with the left edge pushed OFF the media box (negative x) so no
     straight vertical clip line coincides with the seam — the opaque wedge
     covers this zone anyway, this is belt-and-braces */
  clip-path: polygon(-14% 0, 118% 0, 100% 100%, -18% 100%);
  transition: clip-path var(--dur-hero) var(--ease-custom);
}

/* ── E. Scroll-driven photo drift (CSS scroll timelines; silent fallback) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .split-box--media .media img,
    .perform-media .media img {
      animation: photo-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes photo-drift {
  from { transform: scale(1.12) translateY(-3.2%); }
  to   { transform: scale(1.12) translateY(3.2%); }
}

/* ── F. Display-scale data: the stat band reads like a Karachem annual report ── */
.section--stats .stat-num,
.stat-band .stat-num {
  font-size: clamp(3.4rem, 6.4vw, 5.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}
/* section headlines: a touch more presence across the site */
.section-head h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); letter-spacing: -0.022em; }
.emotional-copy h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); letter-spacing: -0.022em; }

/* ── H. Branded scroll + button physics ── */
html { scrollbar-color: #A9C2DE #EEF3F9; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EEF3F9; }
::-webkit-scrollbar-thumb { background: #A9C2DE; border-radius: 6px; border: 2px solid #EEF3F9; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.btn { transition: transform 200ms var(--ease-custom), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(15, 87, 190, 0.28); }

/* carousel cards answer hover with a slow photo zoom */
.feature-card .media { overflow: hidden; }
.feature-card .media img { transition: transform 900ms var(--ease-custom); }
.feature-card:hover .media img { transform: scale(1.05); }

/* ── Guards: reduced motion, high contrast, print ── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero--home .hero-media::before, .hero--compact .hero-media::before { animation: none; opacity: 0; }
  [data-hero].hero-armed .hero-media,
  [data-hero].hero-armed.initialized .hero-media { clip-path: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .feature-card:hover .media img { transform: none; }
}

/* ==========================================================================
   71. Karachem INTERACTION PASS — boxes, menus, unveils.
   No decorative background line-art (removed by request). Quality lives in
   how surfaces RESPOND instead: one shared motion language for every boxed
   card (lift + navy-tinted shadow + arrow slide), scroll-unveiled editorial
   photography, a glass header, and a rebuilt menu system — dropdown mega
   panel that falls from the header on a navy glass backdrop, staggered rows,
   orange rails; mobile drawer links cascade in.
   ========================================================================== */

/* ── A. One motion language for every boxed surface ── */
.tile--data, .product-card, .card, .value-card,
.tile--lg, .group-tile, .feature-card, .news-soon {
  transition: transform 340ms var(--ease-custom),
              box-shadow 340ms var(--ease-custom),
              border-color 340ms var(--ease-custom),
              background-color 340ms var(--ease-custom);
}
.tile--data:hover, .product-card:hover, .card:hover,
.value-card:hover, .tile--lg:hover, .group-tile:hover, .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(12, 45, 90, 0.13);
}

/* arrows answer the hover — slide toward the destination */
.tile-arrow { display: inline-block; transition: transform 300ms var(--ease-custom), color 300ms ease; }
.tile:hover .tile-arrow,
.tile--data:hover .tile-arrow { transform: translateX(6px); color: var(--orange-d); }
html[dir="rtl"] .tile:hover .tile-arrow,
html[dir="rtl"] .tile--data:hover .tile-arrow { transform: translateX(-6px); }

/* ── B. Editorial photos unveil on scroll (JS-gated so no-JS never hides) ── */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal :is(.split-box--media, .perform-media) .media img {
    transition: clip-path 1000ms var(--ease-custom) 120ms;
  }
  .reveal:not(.is-visible) :is(.split-box--media, .perform-media) .media img {
    clip-path: inset(0 100% 0 0);
  }
}

/* ── C. Glass header once the page scrolls ── */
/* blur stays on ::before — see the containing-block note in §"glassy
   condensed header" above; backdrop-filter here would break the fixed
   mobile menu */
.site-header { transition: background-color 300ms ease, box-shadow 300ms ease; }
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(12, 45, 90, 0.08);
}
.site-header.scrolled::before {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── D. Mega panel: falls from the header instead of sliding sideways ── */
.nav-panel-backdrop {
  background: rgba(10, 22, 40, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.nav-panel {
  transform: translateY(-16px);
  opacity: 0;
  border-bottom: 3px solid var(--orange);
  /* !important: the corporate flatten pass (§CORPORATE) nukes box-shadow on
     .nav-panel with its own !important — match it for the floating sheet */
  box-shadow: 0 32px 64px rgba(12, 45, 90, 0.18) !important;
  transition: transform var(--dur-panel) var(--ease-custom),
              opacity var(--dur-panel) var(--ease-custom),
              visibility 0s linear var(--dur-panel);
}
.nav-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0s, 0s, 0s;
}
html[dir="rtl"] .nav-panel { transform: translateY(-16px); }
html[dir="rtl"] .nav-panel.is-open { transform: translateY(0); }

/* rows rise in rather than sliding sideways */
.nav-panel.is-open .nav-panel-links li { transform: translateY(10px); }
html[dir="rtl"] .nav-panel.is-open .nav-panel-links li { transform: translateY(10px); }

/* link rows: orange rail answers the hover (Karachem rail language) */
.nav-panel-links a { border-left: 3px solid transparent; }
.nav-panel-links a:hover { border-left-color: var(--orange); }
.nav-panel-links a.is-soon:hover { border-left-color: transparent; }
html[dir="rtl"] .nav-panel-links a { border-left: 0; border-right: 3px solid transparent; }
html[dir="rtl"] .nav-panel-links a:hover { border-right-color: var(--orange); }
html[dir="rtl"] .nav-panel-links a.is-soon:hover { border-right-color: transparent; }

/* the panel's photo breathes on hover */
.nav-panel-visual { overflow: hidden; }
.nav-panel-visual img { transition: transform 900ms var(--ease-custom); }
.nav-panel-visual:hover img { transform: scale(1.05); }

/* ── E. Mobile drawer: links cascade in as the sheet drops ── */
@media (max-width: 860px) {
  .primary-nav.open > a:not(.btn) {
    opacity: 0;
    transform: translateY(8px);
    animation: npl-in 420ms var(--ease-custom) forwards;
  }
  .primary-nav.open > a:nth-child(1) { animation-delay: 50ms; }
  .primary-nav.open > a:nth-child(2) { animation-delay: 90ms; }
  .primary-nav.open > a:nth-child(3) { animation-delay: 130ms; }
  .primary-nav.open > a:nth-child(4) { animation-delay: 170ms; }
  .primary-nav.open > a:nth-child(5) { animation-delay: 210ms; }
  .primary-nav.open > a:nth-child(6) { animation-delay: 250ms; }
}

/* ── Guards ── */
@media (prefers-reduced-motion: reduce) {
  .tile--data:hover, .product-card:hover, .card:hover,
  .value-card:hover, .tile--lg:hover, .group-tile:hover, .feature-card:hover { transform: none; }
  .tile:hover .tile-arrow, .tile--data:hover .tile-arrow { transform: none; }
  .nav-panel { transition: opacity 1ms linear; transform: none; }
  .nav-panel.is-open .nav-panel-links li,
  .primary-nav.open > a:not(.btn) { animation: none; opacity: 1; transform: none; }
  .nav-panel-visual:hover img { transform: none; }
  .site-header, .site-header.scrolled { transition: none; }
}


/* ==========================================================================
   72. TDS DOWNLOAD DIALOG — compact Karachem card. White sheet with the orange
   top rule, navy glass backdrop, language rows that answer with an orange
   rail + a sliding download arrow. Rows cascade in as the dialog lands.
   ========================================================================== */
.tds-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-custom), visibility 0s 240ms;
}
.tds-modal-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-custom); }
.tds-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 22, 40, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.tds-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--page-bg);
  border-top: 3px solid var(--orange);
  box-shadow: 0 32px 80px rgba(12, 45, 90, 0.28);
  padding: clamp(28px, 4vw, 44px);
  transform: translateY(18px);
  transition: transform 340ms var(--ease-custom);
}
.tds-modal-overlay.is-open .tds-modal-panel { transform: translateY(0); }

.tds-modal-header { margin-bottom: clamp(20px, 3vw, 32px); padding-right: 40px; }
.tds-modal-header .eyebrow { margin-bottom: var(--space-3); }
.tds-modal-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--black);
}
.tds-modal-subtitle { margin: 0; font-size: 1rem; color: var(--text-muted); line-height: 1.55; }

.tds-modal-links { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.tds-lang-btn {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  color: var(--black);
  transition: background 200ms var(--ease-custom),
              border-color 200ms var(--ease-custom),
              padding-left 200ms var(--ease-custom);
}
.tds-lang-btn > :not(.tds-lang-arrow) { transition: transform 200ms var(--ease-custom); }
.tds-lang-btn:hover > :not(.tds-lang-arrow) { transform: translateX(8px); }
.tds-lang-btn:hover { background: #EAF3FB; border-left-color: var(--orange); color: var(--black); }
.tds-lang-code {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; color: var(--gray-600);
  min-width: 2.4ch; text-align: center;
}
.tds-lang-btn:hover .tds-lang-code { color: var(--orange-d); }
.tds-lang-label { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.tds-lang-arrow {
  width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--blue);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 200ms var(--ease-custom), transform 200ms var(--ease-custom);
}
.tds-lang-btn:hover .tds-lang-arrow { opacity: 1; transform: none; }

/* rows cascade in as the dialog lands (uses the shared npl-in keyframes) */
.tds-modal-overlay.is-open .tds-lang-btn {
  opacity: 0; transform: translateY(8px);
  animation: npl-in 420ms var(--ease-custom) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}

.tds-modal-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: inline-flex; padding: 8px; border: 0; background: transparent;
  color: var(--gray-600); cursor: pointer;
  transition: color 200ms ease, transform 200ms var(--ease-custom);
}
.tds-modal-close svg { width: 20px; height: 20px; }
.tds-modal-close:hover { color: var(--orange-d); background: transparent; transform: rotate(90deg); }

/* RTL mirror */
html[dir="rtl"] .tds-lang-btn { border-left: 0; border-right: 3px solid transparent; }
html[dir="rtl"] .tds-lang-btn:hover {
  border-right-color: var(--orange);
  padding-left: var(--space-2); padding-right: var(--space-4);
}
html[dir="rtl"] .tds-lang-arrow { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .tds-modal-close { right: auto; left: var(--space-4); }
html[dir="rtl"] .tds-modal-header { padding-right: 0; padding-left: 40px; }

@media (prefers-reduced-motion: reduce) {
  .tds-modal-overlay, .tds-modal-panel { transition: opacity 1ms linear; transform: none; }
  .tds-modal-overlay.is-open .tds-lang-btn { animation: none; opacity: 1; transform: none; }
  .tds-modal-close:hover { transform: none; }
}

/* ==========================================================================
   73. LANGUAGE PICKER — same design language as the mega menus.
   A full-width panel that drops from the header on a navy glass backdrop,
   orange bottom rule, floating navy shadow, editorial left-aligned heading,
   and menu-style rows (orange left rail + pale wash on hover, staggered
   entrance). All the i18n JS behaviour (apply, focus trap, RTL, TR font
   swap) is untouched; this is visual only.
   ========================================================================== */
.language-backdrop {
  background: rgba(10, 22, 40, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* full-width drop panel, exactly like .nav-panel */
.language-panel {
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 32px 64px rgba(12, 45, 90, 0.18);
  transform: translateY(-16px);
}
.language-overlay.is-open .language-panel { transform: translateY(0); }

/* editorial heading — eyebrow + big light title, like .nav-panel-title */
.language-panel-head { align-items: flex-start; margin-bottom: clamp(24px, 3vw, 36px); }
.language-panel-head .eyebrow { margin-bottom: var(--space-3); }
.language-panel-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 300; letter-spacing: -0.025em; line-height: 1.05;
}

/* the options + apply live in a menu-width column, left aligned */
.language-panel-controls { grid-template-columns: 1fr; gap: var(--space-6); max-width: 620px; }

/* rows read like .nav-panel-links: hairline dividers, orange rail on hover */
.language-options { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.language-option {
  min-height: 0; border: 0; border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent; border-radius: 0;
  padding: var(--space-5) var(--space-3);
  transition: background 200ms var(--ease-custom),
              border-color 200ms var(--ease-custom),
              padding-left 200ms var(--ease-custom);
}
.language-option > * { transition: transform 200ms var(--ease-custom); }
.language-option:hover > * { transform: translateX(8px); }
.language-option:hover { background: #EAF3FB; border-left-color: var(--orange); }
.language-option[aria-checked="true"] { border-left-color: var(--orange); background: var(--surface); }
html[dir="rtl"] .language-option { border-left: 0; border-right: 3px solid transparent; }
html[dir="rtl"] .language-option:hover { border-right-color: var(--orange); padding-left: var(--space-3); padding-right: var(--space-4); }
html[dir="rtl"] .language-option[aria-checked="true"] { border-right-color: var(--orange); }

.language-option-name { font-family: var(--font-display); font-weight: 600; }

.language-apply { justify-content: center; align-self: start; }

/* rows rise in as the panel lands (mega-menu stagger) */
.language-overlay.is-open .language-option {
  opacity: 0; transform: translateY(10px);
  animation: npl-in 500ms var(--ease-custom) forwards;
}
.language-overlay.is-open .language-option:nth-child(1) { animation-delay: 160ms; }
.language-overlay.is-open .language-option:nth-child(2) { animation-delay: 210ms; }
.language-overlay.is-open .language-option:nth-child(3) { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
  .language-panel { transform: none; }
  .language-overlay.is-open .language-option { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   74. FOOTER MAIL BUTTON — the lone round icon was a generic pill in an
   otherwise square, rail-driven layout (and redundant with the email link
   above it). Now a proper labelled outline action that fills brand-blue on
   hover with the shared button lift. Overrides the .social circle.
   ========================================================================== */
.social a.footer-mail {
  width: auto; height: auto; border-radius: 0;
  gap: 10px; padding: 12px 18px;
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1;
  transition: transform 200ms var(--ease-custom), border-color 200ms ease,
              background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.social a.footer-mail:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21, 101, 205, 0.24);
}
.social a.footer-mail:active { transform: translateY(0); }
.social a.footer-mail svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .social a.footer-mail:hover, .social a.footer-mail:active { transform: none; }
}

/* ==========================================================================
   75. GROUP-TILE GLASS CARD — split layout overrides. These must win over the
   earlier full-bleed rules (hover wipe §57, photo keyline §67, scrim §67,
   contrast §69), so they live at the end of the cascade.
   ========================================================================== */
/* no dark hover-wipe over the white glass body — the card lifts + zooms instead */
.group-tile::after { content: none; }
/* dead scrim from the old full-bleed layout — no text sits on the photo now */
.group-tile .tile-media::after { content: none; }
/* white keyline: frame the photograph, held clear of the rising glass panel */
.group-tile .tile-media::before {
  inset: 14px 14px 22px;
  border-color: rgba(255, 255, 255, 0.55);
}
/* contrast mode: body is light now, so ink goes dark (was forced white over photo) */

/* ==========================================================================
   76. CARD SYSTEM UNITY — every teaser/value card grid adopts the home
   group-tile look (square, framed photo, light body, kicker, inline link),
   plus a title underline that draws in L->R on card hover.
   ========================================================================== */

/* —— underline that draws in on card hover —— */
/* cards with an inline link: line sits under the link (CTA) */
.gt-arrow, .grid-3 .feature-card .btn-link { position: relative; }
.gt-arrow::before {
  content: ""; position: absolute; left: 0; bottom: -15px;
  width: calc(100% - 26px); height: 3px; background: var(--orange); z-index: 10;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.grid-3 .feature-card .btn-link::before {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 3px; background: var(--orange); z-index: 10;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.group-tile:hover .gt-arrow::before,
.grid-3 .feature-card:hover .btn-link::before { transform: scaleX(1); }
/* value cards have no link -> line under the title */
.grid-3 .value-card h3 { position: relative; overflow: visible; }
.grid-3 .value-card h3::after {
  content: ""; position: absolute; left: 0; bottom: -7px;
  width: 42px; height: 3px; background: var(--orange); z-index: 10;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-custom);
}
.grid-3 .value-card:hover h3::after { transform: scaleX(1); }
html[dir="rtl"] .gt-arrow::before,
html[dir="rtl"] .grid-3 .feature-card .btn-link::before,
html[dir="rtl"] .grid-3 .value-card h3::after { left: auto; right: 0; transform-origin: right; }

/* —— feature-card teaser grids -> home card look —— */
.grid-3 .feature-card {
  display: flex; flex-direction: column;
  border: 0; border-radius: 0; overflow: hidden;
  background: var(--white);
  box-shadow: none;
  text-decoration: none; color: inherit; cursor: pointer;   /* whole card is the link */
}
.grid-3 .feature-card::after { content: none; }          /* no hover wipe */
.grid-3 .feature-card .media {
  position: relative; aspect-ratio: 16 / 11;
  border: 0; border-radius: 0; overflow: hidden;
}
.grid-3 .feature-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.1) saturate(1.12);
  transition: transform var(--dur-hover) var(--ease-custom);
}
.grid-3 .feature-card:hover .media img { transform: scale(1.05); }
.grid-3 .feature-card .media::before {                    /* white photo keyline */
  content: ""; position: absolute; inset: 14px 14px 22px;
  border: 1px solid rgba(255,255,255,0.55); z-index: 2; pointer-events: none;
}
.grid-3 .feature-card .media::after { content: none; }    /* drop old gradient */
.grid-3 .feature-card .feature-body {
  display: flex; flex-direction: column; gap: var(--space-2, 8px);
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.grid-3 .feature-card .feature-body .eyebrow {
  align-self: flex-start; margin: 0 0 2px; padding: 0;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600);
}
.grid-3 .feature-card .feature-body h3 {
  margin: 0; color: var(--ink); font-weight: 700; min-height: 0;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  line-height: 1.2; height: calc(1.2em * 2);
  display: flex; align-items: flex-start;
}
.grid-3 .feature-card .feature-body p {
  margin: 0; color: var(--gray-600); font-size: 1.02rem; line-height: 1.5;
  min-height: 0; height: calc(1.5em * 3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-3 .feature-card .feature-body .btn-link {
  margin-top: auto; align-self: flex-start; width: auto; padding-top: var(--space-2);
  color: var(--blue); font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.grid-3 .feature-card .feature-body .btn-link:hover { color: var(--blue); }

/* —— value cards -> same family (no photo, so keep the number) —— */
.grid-3 .value-card,
.section--gray .grid-3 .value-card {
  border: 0; border-radius: 0;
  background: var(--white);
  box-shadow: none;
  padding: var(--space-7) var(--space-6) var(--space-6);
}
.grid-3 .value-card::before { content: none; }            /* drop old top accent bar */
.grid-3 .value-card h3 { color: var(--ink); font-weight: 700; }
.grid-3 .value-card .eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600);
}
/* Downloads Section */
html {
  scroll-behavior: smooth;
}

.downloads-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 2rem;
}

.d-tab {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--gray-500);
  padding: 0.75rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.d-tab:hover {
  color: var(--gray-900);
}

.d-tab.is-active {
  color: var(--gray-900);
  font-weight: 600;
}

.d-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--orange);
}

.d-panel.is-hidden {
  display: none;
}

.d-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.d-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.d-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--gray-300);
}

.d-card:hover .btn-link {
  color: var(--orange);
}

.d-card:hover .btn-link::before {
  transform: scaleX(1);
}

.d-card-content h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: var(--gray-900);
}

.d-card-content .btn-link {
  color: var(--blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.d-card-thumb {
  flex-shrink: 0;
  margin-left: 1rem;
}
/* Remove lift up and shadow on hover for all cards site-wide */
/* PDF preview canvas stays hidden until pdf.js has actually drawn a page,
   so a failed/slow render never leaves an empty 300x150 default canvas box. */
.pdf-thumb { display: none; }
html {
  scroll-behavior: smooth;
}

.downloads-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 2rem;
}

.d-tab {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--gray-500);
  padding: 0.75rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.d-tab:hover {
  color: var(--gray-900);
}

.d-tab.is-active {
  color: var(--gray-900);
  font-weight: 600;
}

.d-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--orange);
}

.d-panel.is-hidden {
  display: none;
}

.d-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.d-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.d-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--gray-300);
}

.d-card:hover .btn-link {
  color: var(--orange);
}

.d-card:hover .btn-link::before {
  transform: scaleX(1);
}

.d-card-content h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: var(--gray-900);
}

.d-card-content .btn-link {
  color: var(--blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.d-card-thumb {
  flex-shrink: 0;
  margin-left: 1rem;
}

.downloads-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 2rem;
}

.d-tab {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--gray-500);
  padding: 0.75rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.d-tab:hover {
  color: var(--gray-900);
}

.d-tab.is-active {
  color: var(--gray-900);
  font-weight: 600;
}

.d-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--orange);
}

.d-panel.is-hidden {
  display: none;
}

.d-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.d-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.d-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--gray-300);
}

.d-card:hover .btn-link {
  color: var(--orange);
}

.d-card:hover .btn-link::before {
  transform: scaleX(1);
}

.d-card-content h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: var(--gray-900);
}

.d-card-content .btn-link {
  color: var(--blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.d-card-thumb {
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Remove lift up and shadow on hover for all cards site-wide */
.tile:hover, .feature-card:hover, .product-card:hover, .card:hover, .value-card:hover, .tile--lg:hover, .group-tile:hover, .tile--data:hover, .section-head--box:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Trigger orange underline animation on card hover globally */
.feature-card:hover .btn-link::before,
.carousel-slide .feature-card:hover .btn-link::before,
.group-tile:hover .gt-arrow::before,
.product-card:hover .pc-arrow::before {
  transform: scaleX(1) !important;
  background-color: var(--orange) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make feature-card btn-link underline orange and thick like grid-3 */
.feature-card .btn-link::before {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 3px; background: var(--orange); z-index: 10;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-hover) var(--ease-custom);
}



/* Remove white photo outline from all boxes */
.grid-3 .feature-card .media::before,
.group-tile .tile-media::before,
.feature-card .media::before {
  display: none !important;
}

/* ==========================================================================
   MOBILE TOUCH TARGETS — shared rule for small text links that fall below
   the ~44px comfortable tap size on phones (footer nav, legal row, breadcrumb,
   utility bar, compare toggle). Padding grows the hit area; visual identity
   (font, color, spacing rhythm) stays as designed.
   ========================================================================== */
@media (max-width: 768px) {
  .site-footer nav a,
  .footer-legal a,
  .footer-contact address a,
  .breadcrumb a,
  .utility-bar .util-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* footer columns keep their rhythm despite the taller link boxes */
  .site-footer nav ul { gap: 0; }
  .footer-legal nav { gap: var(--space-2) var(--space-5); }
  .breadcrumb li { display: inline-flex; align-items: center; }
  .cmp-toggle { min-height: 44px; }
  .cmp-toggle input { width: 18px; height: 18px; }
}


/* ==========================================================================
   71. PAGE HEADER — SPLIT STAGE (2026-07-21).
   The solid sheet stopped covering the photograph. Copy owns an open
   ink-on-wash column on the left; the photo owns the right of the stage
   full-height, uncovered, with the brand seam on its inner edge (family
   pages carry their chemistry colour on that seam). No overlay ever sits
   on the image, so the centre-framed subjects stay fully visible.
   ≤860px keeps the §61 stacked band (photo on top, copy below).
   ========================================================================== */
@media (min-width: 861px) {
  .hero--compact { align-items: center; }
  /* photo owns exactly HALF the stage so its seam continues straight into
     the find-tabs divider below (they misaligned at 56%) */
  .hero--compact .hero-media {
    left: auto;
    right: 0;
    width: 50%;
    border-inline-start: 3px solid var(--orange);
  }
  html[dir="rtl"] .hero--compact .hero-media { right: auto; left: 0; width: 50%; }
  /* subjects sit centre-frame in the source photography — keep them there */
  .hero--compact .hero-media img { object-position: 50% 50%; }
  /* family pages: the chemistry colour rides the seam, not a sheet rule */
  .hero--family-acrylics .hero-media  { border-inline-start-color: var(--blue); }
  .hero--family-additives .hero-media { border-inline-start-color: var(--gray-600); }

  /* the copy column — open on the wash, the white sheet is retired */
  .hero--compact.on-dark .hero-inner {
    background: transparent;
    border-top: 0;
    padding: 0;
    max-width: min(520px, calc(50vw - 112px));
    margin-block: clamp(48px, 6vw, 88px);
  }
  .hero--compact .hero-inner h1 {
    font-size: clamp(2.4rem, 3.3vw, 3.4rem);
    text-wrap: balance;
  }
  .hero--compact .hero-inner .lead { max-width: 44ch; }
}

/* 701–860px: the split is too tight — stack like §61's ≤700 band, scoped to
   the compact hero only so nothing else at this width changes. */
@media (min-width: 701px) and (max-width: 860px) {
  .hero--compact { min-height: 0; justify-content: flex-start; }
  .hero--compact .hero-media {
    position: relative;
    left: 0;
    width: 100%;
    order: -1;
    height: clamp(200px, 30vw, 300px);
    border-bottom: 3px solid var(--orange);
  }
  html[dir="rtl"] .hero--compact .hero-media { right: auto; }
  .hero--compact { display: flex; flex-direction: column; }
  .hero--compact.on-dark .hero-inner { max-width: none; }
  .hero--compact .hero-inner { margin-top: 24px; }
  .hero--family-acrylics .hero-media  { border-bottom-color: var(--blue); }
  .hero--family-additives .hero-media { border-bottom-color: var(--gray-600); }
}

/* — §71b. PER-PHOTO FOCAL POINTS (verified against the actual sources).
     Keyed to the image file, not the page, so product pages reusing a
     family hero inherit the same framing; applies to the split panel AND
     the stacked mobile band (whose 4:1 crop needs them even more). — */
/* about-hero is PORTRAIT: the plant's platforms, stairs and lit detail sit
   in the lower half — the upper half is empty sky */
.hero--compact .hero-media img[src*="about-hero"]          { object-position: 50% 72%; }
/* beaker + gloved hand sit right-of-centre; blurred bottles left are filler */
.hero--compact .hero-media img[src*="hero-acrylics"]       { object-position: 62% 50%; }
/* dissolver can + colour swirl sit slightly below centre */
.hero--compact .hero-media img[src*="hero-additives"]      { object-position: 50% 55%; }
/* faces sit above the frame's midline */
.hero--compact .hero-media img[src*="hero-contact"]        { object-position: 50% 42%; }
/* the product-bottle shelves (the story) fill the left of the frame */
.hero--compact .hero-media img[src*="hero-products-lab"]   { object-position: 45% 50%; }
/* turbines + sunlit field: trim the empty sky above */
.hero--compact .hero-media img[src*="hero-sustainability"] { object-position: 50% 60%; }

/* ==========================================================================
   72. PRODUCT CARDS (2026-07-21) — the portfolio hosts render cards now,
   not ledger rows (user request). Karachem card grammar: flat white
   surface, hairline frame, 3px family-colour top rule (same code as the
   products gateway tiles), pale-blue hover wash, no shadow, no lift.
   The old §47 .prow rules are dormant — nothing renders them anymore.
   ========================================================================== */
[data-product-rows] {
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--orange);
  padding: clamp(20px, 2.4vw, 30px);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-micro);
}
.pcard[data-category="acrylics"]  { border-top-color: var(--blue); }
.pcard[data-category="alkyds"]    { border-top-color: var(--orange); }
.pcard[data-category="additives"] { border-top-color: var(--gray-600); }
.pcard:hover,
.pcard:focus-visible { background: #EAF3FB; }

.pcard-kicker {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pcard-cat {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-600);
}
.pcard-code {
  margin: 0 0 0.35rem; font-weight: 600;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -0.015em;
  line-height: 1.15;
}
.pcard-type { margin: 0 0 var(--space-4); color: var(--gray-600); font-size: 0.98rem; }
.pcard-chips {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--space-4); row-gap: var(--space-2);
}
/* chips carry the .tag grammar: small blue square marker, no separators */
.pcard-chips li {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-600);
  padding-inline-start: 0.85rem;
}
.pcard-chips li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem; height: 0.4rem;
  background: var(--blue);
}
/* footer pins to the bottom so cards in one row share their baseline */
.pcard-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.pcard-cta { font-size: 0.85rem; font-weight: 600; color: var(--blue); }
.pcard-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 0;
  border: 1px solid var(--gray-300);
  font-size: 0.95rem; line-height: 1; color: var(--blue);
  transition: background var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro), transform var(--dur-micro);
}
.pcard:hover .pcard-arrow {
  background: var(--blue); border-color: var(--blue); color: var(--white);
  transform: translateX(3px);
}

/* RTL: mirror the chevron and its hover travel */
html[dir="rtl"] .pcard-arrow { transform: scaleX(-1); }
html[dir="rtl"] .pcard:hover .pcard-arrow { transform: scaleX(-1) translateX(-3px); }

/* Arabic: tracked uppercase labels don't apply */
html[lang="ar"] .pcard-cat,
html[lang="ar"] .pcard-chips li,
html[lang="ar"] .pcard-cta { letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-arrow { transition: none; }
  .pcard:hover .pcard-arrow { transform: none; }
  html[dir="rtl"] .pcard:hover .pcard-arrow { transform: scaleX(-1); }
}

/* ==========================================================================
   73. FLOATING-CONTROL CHOREOGRAPHY (2026-07-21) — the back-to-top button
   must never sit ON the grade action bar. When the bar is up, the button
   lifts above it (72px clears the bar's 59px + breathing room); it rides
   the same easing the bar slides with, so they move as one system.
   No :has() support = no lift, which is just today's overlap, not breakage.
   ========================================================================== */
.to-top {
  transition: opacity var(--dur-micro), transform var(--dur-micro),
              background var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro),
              bottom 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
body:has(.grade-bar.show) .to-top {
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}