/*
Theme Name: Santa Minerals Theme
Theme URI: https://santaminerals.com
Description: B2B functional mineral ingredients website: product data, technical resources and enquiry entry points.
Version: 4.5.0
Author: ZeroY
*/

/* ==========================================================================
   Site styles.

   Tokens live in assets/css/tokens.css; the visual language is DESIGN.md
   (technical clarity, material intelligence, quiet confidence) carried by an
   editorial composition: full-width photographs, wide measures, warm surfaces
   and one idea per band. Nothing here states a fact about a product — facts
   come from WordPress and ACF at render time.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--mineral-700); text-underline-offset: 2px; }
a:hover { color: var(--mineral-800); }

::selection { background: var(--mineral-100); color: var(--ink-950); }

:focus-visible { outline: 2px solid var(--copper-600); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.018em;
  color: var(--ink-950);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.3em; }
li { margin-bottom: var(--space-1); }
blockquote { margin: 0 0 var(--space-4); padding-left: var(--space-5); border-left: 2px solid var(--slate-300); color: var(--slate-700); }
code, pre { font-family: var(--font-mono); font-size: 0.9375rem; }
hr { border: 0; border-top: 1px solid var(--slate-300); margin: var(--space-6) 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100px; left: var(--space-4); z-index: 60;
  background: var(--white); border: 1px solid var(--slate-300);
  border-radius: var(--radius-btn); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* --- Layout -------------------------------------------------------------- */

.site-container { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.site-main { display: block; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
.section--alt { background: var(--slate-100); }
.section--tint { background: var(--sand-50); }
.section--plain { background: var(--paper-2); }
.section--dark { background: var(--ink-950); color: var(--mineral-100); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); }
.section--dark .lede, .section--dark p { color: rgba(238, 241, 240, 0.82); }
.section--dark .eyebrow { color: var(--mineral-100); }
.section--flush { padding: 0; }

.section__head { margin-bottom: var(--space-8); }
.section__head .h2, .section__head .h3 { margin-bottom: 0; }
.section__head .lede { margin: 0; }
.section__head > .eyebrow:last-child { margin-bottom: 0; }
.section__head--wide { max-width: none; }
.section__head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8); align-items: end;
}
/* The heading keeps a readable line length of its own. The cap sits on the
   heading, where ch resolves against the heading's own size; on the wrapper it
   resolved against the small body font and wrapped a two-word title over five
   lines. */
.section__head--split .section__head-lead { max-width: none; }
.section__head--split .h2, .section__head--split .h3 { max-width: 30ch; }
.section__head--split .section__head-aside { max-width: var(--measure); }
.section__head-action { margin: var(--space-4) 0 0; }
.section--dark .section__head .eyebrow { color: var(--mineral-100); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--tight { gap: var(--space-4); }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--space-7); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--space-4); }

/* A band is one full-width statement: a heading and its text on one surface,
   with room around it, so the page reads as a sequence of clear movements. */
.band { background: var(--ink-950); color: var(--mineral-100); padding: var(--section-y) 0; }
.band .h2, .band h2 { color: var(--white); }
.band .lede { color: rgba(238, 241, 240, 0.82); }
.band__inner { max-width: var(--layout-narrow); }
.band__inner--wide { max-width: var(--measure); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .section__head--split .section__head-lead { max-width: none; }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4, .split, .split--even { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--space-5); }
  .section { padding: var(--section-y-tight) 0; }
}

/* --- Type helpers -------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mineral-700);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.eyebrow--light { color: var(--mineral-100); }
.eyebrow--muted { color: var(--slate-500); }
.display { font-size: var(--text-display); }
.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }
/* A heading that runs onto a second line splits it evenly rather than leaving
   one long line and a one-word stub. */
.display, .h1, .h2, .h3, h1, h2, h3 { text-wrap: balance; }
.lede { font-size: var(--text-lede); color: var(--slate-700); max-width: var(--measure); line-height: 1.62; }
.meta { font-size: var(--text-small); color: var(--slate-500); }
.mono, .is-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-h3); margin-top: var(--space-7); }
.prose img { border-radius: var(--radius-media); }
.prose > p, .prose > ul, .prose > ol { font-size: 1.0625rem; }

/* A link that reads as a direction rather than a sentence: one arrow, one
   short label, the underline only on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  color: var(--mineral-800); border-bottom: 0;
}
.link-arrow::after {
  content: ""; width: 16px; height: 8px; flex: none;
  background: currentColor; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--transition-fast);
}
.link-arrow:hover { color: var(--ink-950); }
.link-arrow:hover::after { transform: translateX(3px); }
.section--dark .link-arrow, .cta-quote .link-arrow { color: var(--white); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 45;
  background: var(--paper-2);
  border-bottom: var(--hairline);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}
/* The WordPress admin bar is fixed to the top of the viewport for a signed-in
   editor, and it sits above everything (z-index 99999), so the sticky bar has to
   start below it — otherwise the toolbar covers the lockup as soon as the page
   scrolls. Core removes the bar from the flow entirely below 600px and lets it
   scroll away with the page, so the offset returns to zero there. A visitor
   never carries the admin-bar body class, so the public page is unchanged. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .site-header { top: 0; } }
/* An in-page jump (the skip link, a footnoted section) would otherwise land
   under the sticky bar. */
html { scroll-padding-top: 7.5rem; }
body.admin-bar { scroll-padding-top: 9.5rem; }
@media screen and (max-width: 600px) { body.admin-bar { scroll-padding-top: 7.5rem; } }
.site-header[data-scrolled="true"] { box-shadow: 0 10px 30px -24px rgba(16, 38, 35, 0.5); }
.site-header__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem;
  letter-spacing: -0.02em; color: var(--ink-950); text-decoration: none;
}
.brand:hover { color: var(--mineral-800); }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--mineral-800); }
.brand__name { display: grid; gap: 1px; }
.brand__word { line-height: 1.15; }
/* The supplied logo is a transparent PNG, 1774 × 887: a mark of rings on the
   left, "SANTA MINERALS" stacked in two lines beside it, and a tagline line
   under both. Measured, its ink runs x 148–1623 and y 208–664, with the tagline
   sitting below y 690 — so the bar shows that box: the mark and the wordmark
   whole, the empty margin around them cut away, and the tagline line trimmed,
   because at bar size it lands under four pixels tall and would read as a grey
   smear rather than as words. Every offset is a percentage of the box, so the
   crop holds wherever the box is placed and at whatever size it is given. The bar
   gives it 164 × 51 px on a wide screen and steps it down on narrow ones, so the
   mark stays readable without the lockup pushing the actions off the row. */
.brand.brand--logo {
  display: inline-flex; align-items: center; flex: none;
  width: auto; aspect-ratio: auto; overflow: visible;
}
/* The crop box holds the cut of the logo; the tagline sits beside it, outside
   the crop, and stays part of the same link home. */
.brand__crop {
  position: relative; display: block; flex: none; overflow: hidden;
  width: 164px; aspect-ratio: 1475 / 456;
}
.brand.brand--logo .brand__crop img {
  position: absolute; left: -10.03%; top: -45.61%; width: 120.27%;
  height: auto; max-width: none;
}
/* A wide lockup is most of a phone's width at the bar's own size, so it steps
   down with the viewport instead of pushing the actions off the row. */
@media (max-width: 900px) { .brand__crop { width: 144px; } }
@media (max-width: 720px) { .brand__crop { width: 124px; } }
.nav { margin-left: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  color: var(--slate-700); text-decoration: none; font-size: 0.9375rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink-950); border-bottom-color: var(--mineral-600); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.header-inquiry { display: inline-flex; align-items: center; gap: var(--space-2); }
.header-inquiry__mark { display: inline-flex; }
.header-inquiry__label { white-space: nowrap; }

@media (max-width: 1040px) {
  .nav { order: 3; width: 100%; margin-left: 0; }
  .header-actions { margin-left: auto; }
  .nav__list { gap: var(--space-4); }
}
@media (max-width: 720px) {
  .header-inquiry__mark { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn--primary { background: var(--mineral-800); color: var(--white); }
.btn--primary:hover { background: var(--ink-950); color: var(--white); }
.btn--secondary { background: transparent; border-color: var(--slate-300); color: var(--ink-950); }
.btn--secondary:hover { border-color: var(--mineral-700); color: var(--mineral-800); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--slate-700); padding: 0 var(--space-3); }
.btn--ghost:hover { background: var(--white); border-color: var(--slate-300); color: var(--ink-950); }
.btn--light { background: var(--white); color: var(--ink-950); }
.btn--light:hover { background: var(--mineral-100); color: var(--ink-950); }
.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.btn--outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); }
.btn--small { min-height: 40px; padding: 0 var(--space-4); font-size: 0.875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* A button that points somewhere, drawn with the same arrow as a .link-arrow. */
.btn--arrow::after {
  content: ""; width: 15px; height: 8px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--transition-fast);
}
.btn--arrow:hover::after { transform: translateX(3px); }

.text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--mineral-600); }
.text-link:hover { color: var(--mineral-800); border-bottom-color: var(--mineral-800); }

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--paper); }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8); align-items: center; padding: var(--space-9) 0;
}
.hero__title { font-size: var(--text-display); margin-bottom: var(--space-5); max-width: 20ch; }
.hero__lede { font-size: var(--text-lede); color: var(--slate-700); max-width: var(--measure); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

/* The page hero: how every interior page opens. */
.hero--page {
  border-bottom: var(--hairline);
  background: var(--paper-2);
}
.hero--page .hero__inner { display: block; padding: clamp(2rem, 3.4vw, 3.25rem) 0 clamp(2rem, 3.2vw, 2.75rem); }
.hero--page .hero__title { font-size: var(--text-h1); max-width: 24ch; margin-bottom: var(--space-5); }
.hero--page .hero__lede { max-width: var(--measure); }
.hero__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: var(--space-8) 0 0; padding-top: var(--space-5);
  border-top: var(--hairline);
}
.hero__fact-label {
  margin: 0 0 var(--space-1); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--slate-500);
}
.hero__fact-value { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--ink-950); }
.hero__aside {
  background: var(--white); border: var(--hairline);
  border-radius: var(--radius-card); padding: var(--space-5);
}
.hero__aside-title {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--slate-500); margin: 0 0 var(--space-4); font-weight: 600;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-7) 0; gap: var(--space-6); }
  .hero__title { max-width: none; }
}

/* --- Cards --------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column; background: var(--white);
  border: var(--hairline); border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { border-color: var(--slate-200); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.card__media {
  background: var(--slate-100); overflow: hidden; flex: none;
  border-bottom: var(--hairline);
}
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 420ms cubic-bezier(.2,.6,.2,1); }
.card__media .image-slot { border: 0; border-radius: 0; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.card__title { font-size: 1.1875rem; margin: 0; line-height: 1.25; letter-spacing: -0.015em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--mineral-800); text-decoration: underline; }
.card__brief { margin: 0; font-size: 0.9375rem; color: var(--slate-700); line-height: 1.62; }
.card__meta { margin: 0; font-size: var(--text-small); color: var(--slate-500); }
.card__meta--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.card__type { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; color: var(--mineral-700); }
.card__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--slate-300); flex: none; }
.card__footer { margin-top: auto; padding-top: var(--space-3); }
.card__identity { display: grid; gap: 2px; margin: 0; font-size: var(--text-small); color: var(--slate-500); }
.card__identity span { display: block; }

/* An editorial card: photograph, then a dated line, then the resource itself. */
.card--editorial .card__body { gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.card--editorial .card__title { font-size: 1.25rem; }
.card--editorial .card__footer { border-top: var(--hairline); }
.card--editorial .link-arrow { font-size: 0.875rem; }

/* A product card in a listing: identity, one line, its classifications. It is
   read left to right in a grid of 249 of them, so it carries no photograph. */
.card--product .card__body { gap: var(--space-3); }
.card--product .card__brief { color: var(--slate-700); }
.card--product .tag-list { margin-top: var(--space-1); }
.card--product .card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; }

/* --- Tags and chips ----------------------------------------------------- */

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.tag-list li { margin: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 1px solid var(--slate-300); border-radius: var(--radius-tag);
  background: var(--white); color: var(--slate-700);
  font-size: 0.8125rem; line-height: 1.5; text-decoration: none;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--slate-500); flex: none; }
.tag--mineral::before { background: var(--blue-600); }
.tag--form::before { background: var(--cat-specialty); }
.tag--application::before { background: var(--cat-salts); }
.tag--category::before { background: var(--mineral-600); }
a.tag:hover { border-color: var(--mineral-600); color: var(--mineral-800); }
.tag--state { border-color: transparent; }
.tag--state::before { display: none; }
.tag--available { background: var(--mineral-100); color: var(--mineral-800); }
.tag--request { background: var(--amber-tint); color: var(--copper-600); }
.tag--review { background: var(--blue-tint); color: var(--blue-600); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--slate-300);
  border-radius: var(--radius-tag); background: var(--white);
  color: var(--slate-700); font-size: 0.875rem; text-decoration: none;
}
a.chip:hover, .chip[aria-current="true"] { background: var(--mineral-100); border-color: var(--mineral-600); color: var(--mineral-800); }

/* --- Data: tables and key/value rows ------------------------------------ */

.table-scroll { overflow-x: auto; }
.spec-table {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--slate-300); font-size: 0.9375rem;
}
.spec-table caption { caption-side: top; text-align: left; padding: 0 0 var(--space-3); font-size: var(--text-small); color: var(--slate-500); }
.spec-table th, .spec-table td { padding: 14px var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--slate-300); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 40%; font-weight: 500; color: var(--slate-700); background: var(--slate-100); }
.spec-table td { color: var(--ink-950); }
.spec-table--mono td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spec-table .value-missing { color: var(--slate-500); font-family: var(--font-mono); letter-spacing: 0.04em; }
.spec-table th[scope="rowgroup"] {
  width: auto; background: var(--white); font-size: var(--text-small);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500);
  border-bottom: 1px solid var(--slate-300);
}

.key-value {
  display: grid; grid-template-columns: minmax(130px, 36%) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4); margin: 0;
}
.key-value dt { color: var(--slate-700); font-size: 0.9375rem; }
.key-value dd { margin: 0; color: var(--ink-950); font-size: 0.9375rem; }

/* --- States and notices -------------------------------------------------- */

.notice {
  background: var(--white); border: 1px solid var(--slate-300);
  border-left-width: 3px; border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
}
.notice__label {
  display: block; font-size: var(--text-small); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--slate-500); margin-bottom: var(--space-1);
}
.notice p:last-child { margin-bottom: 0; }
.notice--ok { border-left-color: var(--mineral-600); }
.notice--info { border-left-color: var(--blue-600); }
.notice--request { border-left-color: var(--amber-500); }
.notice--limit { border-left-color: var(--red-600); }

/* --- Steps and process lists -------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.steps--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps li { margin: 0; }
.step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4);
  background: var(--white); border: 1px solid var(--slate-300);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
}
.step__index { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--copper-600); padding-top: 3px; }
.step__title { font-size: 1rem; margin: 0 0 var(--space-1); }
.step__text { margin: 0; font-size: 0.9375rem; color: var(--slate-700); }

/* --- Documents ----------------------------------------------------------- */

.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--slate-300); }
.doc-list li { margin: 0; }
.doc-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--slate-300);
}
.doc-item__name { font-weight: 500; color: var(--ink-950); min-width: 140px; }
.doc-item__meta { font-size: var(--text-small); color: var(--slate-500); }
.doc-item__action { margin-left: auto; }

/* --- Tiles, portfolio and category cards --------------------------------- */

/* A tile: one photograph, the name over it, one line of description and the
   number of records behind it. The photograph is the entry slot photograph, so
   replacing the placeholder with a real image of the same ratio needs no markup
   change (see components/group-tile.php). */
.tile { position: relative; display: flex; }
.tile > .tile__link, .tile > div.tile__link {
  position: relative; display: block; width: 100%;
  border-radius: var(--radius-media); overflow: hidden;
  background: var(--ink-950); text-decoration: none; color: var(--white);
}
.tile__media { display: block; }
.tile__media .image-slot { border: 0; border-radius: 0; background: var(--slate-100); }
.tile__media .image-slot__img { transition: transform 620ms cubic-bezier(.2, .6, .2, 1); }
.tile:hover .image-slot__img { transform: scale(1.045); }
.tile__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 38, 35, 0) 30%, rgba(16, 38, 35, 0.30) 55%, rgba(16, 38, 35, 0.88) 100%);
}
.tile__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: var(--space-2); padding: var(--space-5);
}
.tile__name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--white);
}
.tile__name::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--cat-chelates); margin-bottom: var(--space-3);
}
.tile.category-card--salts .tile__name::before { background: var(--cat-salts); }
.tile.category-card--complexes .tile__name::before { background: var(--cat-complexes); }
.tile.category-card--specialty .tile__name::before { background: var(--cat-specialty); }
.tile__text { display: block; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 32ch; }
.tile__meta { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }
.tile__link:focus-visible { outline: 2px solid var(--copper-600); outline-offset: 3px; }

.category-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--white); border: var(--hairline);
  border-top: 3px solid var(--cat-chelates); border-radius: var(--radius-card);
  padding: var(--space-5);
}
.category-card--salts { border-top-color: var(--cat-salts); }
.category-card--complexes { border-top-color: var(--cat-complexes); }
.category-card--specialty { border-top-color: var(--cat-specialty); }
.category-card__title { font-size: 1.125rem; margin: 0; }
.category-card__title a { color: inherit; text-decoration: none; }
.category-card__title a:hover { color: var(--mineral-800); text-decoration: underline; }
.category-card__text { margin: 0; font-size: 0.9375rem; color: var(--slate-700); }
.category-card__meta { margin: auto 0 0; font-family: var(--font-mono); font-size: var(--text-small); color: var(--slate-500); }

.fact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fact-list li { margin: 0; }
.fact {
  display: grid; gap: var(--space-2); align-content: start;
  background: var(--white); border: var(--hairline);
  border-radius: var(--radius-card); padding: var(--space-5);
}
.fact__label { margin: 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--slate-500); }
.fact__value { margin: 0; font-size: 0.9375rem; color: var(--slate-700); }
.fact--strong .fact__value, .fact-list--figures .fact__value {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; color: var(--ink-950); line-height: 1.2;
}

/* --- Disclosure (FAQ) ---------------------------------------------------- */

.disclosure { background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-card); }
.disclosure + .disclosure { margin-top: var(--space-3); }
.disclosure summary {
  display: flex; justify-content: space-between; gap: var(--space-4);
  cursor: pointer; padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading); font-weight: 600; color: var(--ink-950);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; font-family: var(--font-mono); color: var(--slate-500); }
.disclosure[open] summary::after { content: "\2013"; }
.disclosure__body { padding: 0 var(--space-5) var(--space-5); color: var(--slate-700); }
.disclosure__body > *:last-child { margin-bottom: 0; }

/* --- Call to action ------------------------------------------------------ */

/* The closing band. Placed straight on the page it runs edge to edge; placed
   inside a container it keeps its own corners. */
.cta-quote {
  position: relative; overflow: hidden;
  background: var(--ink-900); color: var(--mineral-100);
  padding: var(--section-y) 0;
}
.cta-quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 85% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 85% 10%, #000 0%, transparent 70%);
}
.cta-quote__inner {
  position: relative; z-index: 1;
  max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8); align-items: end;
}
.cta-quote__lead { max-width: 42ch; }
.cta-quote__title { color: var(--white); font-size: var(--text-h2); margin: 0 0 var(--space-4); }
.cta-quote__text { margin: 0; color: rgba(238, 241, 240, 0.84); font-size: var(--text-lede); line-height: 1.6; }
.cta-quote__note { margin: var(--space-4) 0 0; font-size: var(--text-small); color: rgba(238, 241, 240, 0.62); }
.cta-quote__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.site-container > .cta-quote { border-radius: var(--radius-media); padding: var(--section-y-tight) 0; }

@media (max-width: 860px) {
  .cta-quote__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta-quote__actions { justify-content: flex-start; }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--sand-50); border-top: var(--hairline);
  padding: var(--section-y-tight) 0 var(--space-6);
}
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
  gap: var(--space-8) var(--space-9); align-items: start;
}
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.footer-brand__name {
  margin: 0 0 var(--space-3); font-family: var(--font-heading); font-weight: 700;
  font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink-950);
}
.footer-brand__text { max-width: 44ch; margin: 0 0 var(--space-5); font-size: 0.9375rem; color: var(--slate-700); line-height: 1.65; }
.footer-brand__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.875rem; color: var(--slate-700); }
.footer-contact li { margin: 0; }
.footer-block__title {
  margin: 0 0 var(--space-4); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--slate-500); font-weight: 600;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; }
.footer-list li { margin: 0; }
.footer-list a { color: var(--slate-900); text-decoration: none; }
.footer-list a:hover { color: var(--mineral-800); text-decoration: underline; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline);
  font-size: var(--text-small); color: var(--slate-500);
}
.footer-legal p { margin: 0; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: var(--slate-700); }
.footer-legal a:hover { color: var(--mineral-800); }
.footer-note { max-width: 84ch; margin: var(--space-5) 0 0; font-size: var(--text-small); color: var(--slate-500); }
.footer-disclaimer { max-width: 84ch; margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--slate-500); }

.back-to-top { margin-left: auto; }
.back-to-top__button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  appearance: none; background: none; border: 0; padding: 6px 0; margin: 0;
  font: inherit; font-size: var(--text-small); color: var(--slate-700); cursor: pointer;
}
.back-to-top__button:hover { color: var(--mineral-800); }
.back-to-top__button[hidden] { display: none; }

@media (max-width: 980px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .back-to-top { margin-left: 0; }
}

/* --- Archive heads, filters and listings -------------------------------- */

.archive-head { background: var(--paper-2); border-bottom: var(--hairline); padding: clamp(2rem, 3.4vw, 3.25rem) 0 var(--space-6); }
.archive-head__title { margin-bottom: var(--space-5); max-width: 24ch; }
.archive-head__lede { max-width: var(--measure); color: var(--slate-700); margin-bottom: 0; font-size: var(--text-lede); }
.archive-head .hero__facts { margin-top: var(--space-7); }

.filter-bar {
  display: grid; gap: var(--space-4);
  border-top: var(--hairline); border-bottom: var(--hairline);
  padding: var(--space-5) 0; margin-bottom: var(--space-7);
}
.filter-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.filter-group__label { margin: 0; padding-top: 6px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--slate-500); }
.filter-group .chips { margin-bottom: 0; }

.empty-state { background: var(--white); border: 1px dashed var(--slate-300); border-radius: var(--radius-card); padding: var(--space-7) var(--space-6); color: var(--slate-700); }
.empty-state p:last-child { margin-bottom: 0; }

.pagination { margin-top: var(--space-6); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pagination .page-numbers {
  display: inline-block; padding: 6px 12px; background: var(--white);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  color: var(--slate-700); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--mineral-800); border-color: var(--mineral-800); color: var(--white); }

@media (max-width: 720px) {
  .filter-group { grid-template-columns: minmax(0, 1fr); }
  .filter-group__label { padding-top: 0; }
}

/* --- Product layouts ----------------------------------------------------- */

.product-header { border-bottom: 1px solid var(--slate-300); padding: var(--space-7) 0 var(--space-6); }
.product-header__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.product-header__title { font-size: var(--text-h1); margin-bottom: var(--space-4); }
.product-header__brief { max-width: var(--measure); font-size: 1.0625rem; color: var(--slate-700); }
.product-header__figure { background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-card); overflow: hidden; }
.product-header__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-header__placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--slate-100); color: var(--slate-500); font-size: var(--text-small); }

/* The two actions a product page exists for: adding the product to an inquiry,
   and asking for it as a sample. They are the largest controls on the site and
   the only place the pair appears together, so a visitor can find them without
   reading anything else. On a narrow screen they stack full width, which is the
   easiest thing to hit with a thumb. */
.product-header__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}
.product-header__actions .btn {
  min-height: 58px; padding: 0 var(--space-7);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
  border-width: 1.5px;
}
.product-header__actions .btn--action { background: var(--white); border-color: var(--mineral-700); color: var(--mineral-800); }
.product-header__actions .btn--action:hover { background: var(--mineral-100); border-color: var(--ink-950); color: var(--ink-950); }
.product-header__actions .btn--action::before { font-size: 1.375rem; font-weight: 600; }
.product-header__actions .btn--action[aria-pressed="true"] { background: var(--mineral-800); border-color: var(--mineral-800); color: var(--white); }
.product-header__actions .btn--primary { box-shadow: var(--shadow-soft); }
.product-header__actions .btn--primary:hover { box-shadow: var(--shadow-lift); }

@media (max-width: 620px) {
  .product-header__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .product-header__actions .btn { width: 100%; }
}

.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--space-7); align-items: start; }
.product-layout__aside { display: grid; gap: var(--space-5); position: sticky; top: var(--space-5); }
.panel { background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-card); padding: var(--space-5); }
.panel__title { font-size: 1rem; margin: 0 0 var(--space-4); }
.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.panel__list li { margin: 0; }
.panel__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 0.9375rem; }
.panel__links li { margin: 0; }

@media (max-width: 1000px) {
  .product-header__grid, .product-layout { grid-template-columns: minmax(0, 1fr); }
  .product-layout__aside { position: static; }
}

/* --- Section titles, search and generic cards --------------------------- */

.section-title { font-size: var(--text-h2); margin: var(--space-7) 0 var(--space-5); }
.section-title--h3 { font-size: var(--text-h3); }
.section-title:first-child { margin-top: 0; }

.search-block { margin-top: var(--space-5); max-width: 520px; }
.search-form { display: flex; gap: var(--space-2); }
.search-form label { flex: 1; display: flex; }
.search-form .search-field {
  width: 100%; min-height: 46px; padding: 0 var(--space-4);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit;
}
.search-form .search-submit {
  min-height: 46px; padding: 0 var(--space-5); cursor: pointer;
  border: 1px solid var(--mineral-800); border-radius: var(--radius-btn);
  background: var(--mineral-800); color: var(--white); font: inherit; font-weight: 500;
}
.search-form .search-submit:hover { background: var(--ink-950); border-color: var(--ink-950); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.breadcrumbs { font-size: var(--text-small); color: var(--slate-500); margin: 0 0 var(--space-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; gap: 6px; margin: 0; }
.breadcrumbs a { color: var(--slate-700); text-decoration: none; }
.breadcrumbs a:hover { color: var(--mineral-800); text-decoration: underline; }
.footer-block { min-width: 0; }

/* --- Forms --------------------------------------------------------------- */

.form { display: grid; gap: var(--space-5); max-width: 920px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.field { display: grid; gap: var(--space-2); align-content: start; }
.field--full { grid-column: 1 / -1; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field__label { padding: 0; font-size: 0.9375rem; font-weight: 500; color: var(--slate-700); }
.field__required { color: var(--copper-600); }
.field__hint { margin: 0; font-size: var(--text-small); color: var(--slate-500); }
.field input[type="text"],
.field input[type="search"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%; min-height: 48px; padding: 10px var(--space-4);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit;
}
.field textarea { min-height: 150px; resize: vertical; }
.field__options { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.field__check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.9375rem; color: var(--slate-700); }
.field__check input { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); grid-column: 1 / -1; }
.form__actions .meta { margin: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Primary navigation with its mega panels ----------------------------- */

.site-header__bar { border-top: var(--hairline); background: var(--paper-2); }
.site-header__bar-inner { display: flex; align-items: center; gap: var(--space-6); }
.site-header__bar .nav { flex: 1 1 auto; min-width: 0; width: auto; margin-left: 0; }

.nav__list { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: 6px 0; }
.nav__disclosure { display: block; }
.nav__link-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 1.0625rem; font-weight: 500; color: var(--slate-900);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__link-item:hover,
.nav__link-item[aria-current="page"] { color: var(--ink-950); border-bottom-color: var(--mineral-600); }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 0; margin: 0; font: inherit; font-size: 1.0625rem; font-weight: 500;
  color: var(--slate-900); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__chevron { display: inline-flex; color: currentColor; opacity: 0.6; transition: transform var(--transition-fast); }
.nav__disclosure[data-state="open"] .nav__chevron { transform: rotate(180deg); }
.nav__trigger:hover,
.nav__trigger[data-current="true"],
.nav__disclosure[data-state="open"] .nav__trigger {
  color: var(--ink-950);
  border-bottom-color: var(--mineral-600);
}
@media (max-width: 1040px) {
  .nav__list { gap: var(--space-3) var(--space-5); }
}

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--white);
  border-top: 1px solid var(--slate-300);
  border-bottom: 1px solid var(--slate-300);
  box-shadow: 0 16px 30px rgba(16, 38, 35, 0.08);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.mega__inner { display: grid; gap: var(--space-5); max-width: var(--layout-max); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-5); }
.mega__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
.mega__cards { display: grid; gap: var(--space-2); align-content: start; }
.mega__card {
  display: grid; gap: 2px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--slate-300); border-left: 3px solid var(--cat-chelates);
  border-radius: var(--radius-card); text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.mega__card:hover { background: var(--mineral-100); border-color: var(--mineral-600); }
.mega__card-title { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-heading); font-weight: 600; color: var(--ink-950); }
.mega__card-note { font-size: var(--text-small); color: var(--slate-500); }
.mega__top--plain { grid-template-columns: minmax(0, 1fr); }
.mega__note { margin: 0; font-size: var(--text-small); color: var(--slate-500); }
.mega__search { display: flex; gap: var(--space-2); max-width: 480px; }
.mega__search input[type="search"] {
  flex: 1; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit;
}
.mega__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) var(--space-6); align-content: start; }
.mega__title { margin: 0 0 var(--space-3); font-size: var(--text-small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500); }
.mega__title-link { color: inherit; text-decoration: none; }
.mega__title-link:hover { color: var(--mineral-800); text-decoration: underline; }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mega__list li { margin: 0; }
.mega__list a { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.9375rem; color: var(--slate-900); text-decoration: none; }
.mega__list a:hover { color: var(--mineral-800); text-decoration: underline; }
.mega__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate-500); }
.mega__footer { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--slate-300); }

/* --- Inquiry list ------------------------------------------------------- */

/* The inquiry list is the header's second control and it is not the primary
   action, so it is set apart by a tinted surface and a green rule rather than
   by size. Holding something in the list turns it solid, which is the one state
   a visitor needs to be able to read at a glance. */
.header-inquiry,
.header-inquiry.btn--ghost {
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--mineral-50);
  border-color: var(--mineral-600);
  color: var(--mineral-800);
  font-weight: 500;
}
.header-inquiry:hover,
.header-inquiry.btn--ghost:hover {
  background: var(--mineral-800);
  border-color: var(--mineral-800);
  color: var(--white);
}
.header-inquiry .badge { background: var(--copper-600); color: var(--white); }
.header-inquiry:has([data-inquiry-count-wrap]:not([hidden])) {
  background: var(--mineral-800);
  border-color: var(--mineral-800);
  color: var(--white);
}
.header-inquiry:has([data-inquiry-count-wrap]:not([hidden])):hover {
  background: var(--ink-950);
  border-color: var(--ink-950);
}
.header-inquiry:has([data-inquiry-count-wrap]:not([hidden])) .badge {
  background: var(--white);
  color: var(--mineral-800);
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--mineral-800); color: var(--white);
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1;
}
.cart__rows { display: grid; }
.cart-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--slate-300);
}
.cart-row:first-child { border-top: 1px solid var(--slate-300); }
.cart-row__title { margin: 0; font-family: var(--font-heading); font-weight: 600; color: var(--ink-950); }
.cart-row__title a { color: inherit; text-decoration: none; }
.cart-row__title a:hover { text-decoration: underline; }
.cart-row__code { margin: 0; }
.cart-row__code:empty { display: none; }
.cart-row__quantity input {
  width: 96px; min-height: 42px; padding: 8px var(--space-3);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); font: inherit; color: var(--ink-950);
}
.cart__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.cart__status { margin: var(--space-4) 0 0; }
.cart__status[data-state="added"],
.cart__status[data-state="removed"],
.cart__status[data-state="cleared"] { color: var(--mineral-800); }
.cart__status[data-state="error"] { color: var(--red-600); }
.form__summary { margin: 0; }

@media (max-width: 760px) {
  .cart-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cart-row__quantity { max-width: 140px; }
}

/* --- Product filter and search suggestions ------------------------------- */

.filter {
  margin-bottom: var(--space-6); padding: var(--space-5) 0;
  border-top: 1px solid var(--slate-300); border-bottom: 1px solid var(--slate-300);
}
.filter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.filter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.filter__actions .meta { margin: 0; }
.filter-item { display: block; }
.filter-item > .card { height: 100%; }

.suggest { display: grid; gap: var(--space-3); max-width: 640px; }
.suggest__field { display: flex; gap: var(--space-2); }
.suggest__field input[type="search"] {
  flex: 1; min-height: 46px; padding: 0 var(--space-4);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit;
}
.suggest__list {
  max-height: 320px; overflow-y: auto; background: var(--white);
  border: 1px solid var(--slate-300); border-radius: var(--radius-card);
}
.suggest__option {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 0; border-bottom: 1px solid var(--slate-100); background: none;
  font: inherit; text-align: left; color: var(--slate-900); cursor: pointer;
}
.suggest__option:last-of-type { border-bottom: 0; }
.suggest__option:hover,
.suggest__option[data-active="true"],
.suggest__option[aria-selected="true"] { background: var(--mineral-100); }
.suggest__hint { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate-500); }
.suggest__empty { margin: 0; padding: var(--space-4); color: var(--slate-700); }
.suggest__note { margin: 0; }

/* --- Product filter and search suggestions ------------------------------- */

.filter {
  margin-bottom: var(--space-6); padding: var(--space-5) 0;
  border-top: 1px solid var(--slate-300); border-bottom: 1px solid var(--slate-300);
}
.filter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.filter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.filter__actions .meta { margin: 0; }
.filter-item { display: block; }
.filter-item > .card { height: 100%; }

.suggest { display: grid; gap: var(--space-3); max-width: 640px; }
.suggest__field { display: flex; gap: var(--space-2); }
.suggest__field input[type="search"] {
  flex: 1; min-height: 46px; padding: 0 var(--space-4);
  border: 1px solid var(--slate-300); border-radius: var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit;
}
.suggest__list {
  max-height: 320px; overflow-y: auto; background: var(--white);
  border: 1px solid var(--slate-300); border-radius: var(--radius-card);
}
.suggest__option {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 0; border-bottom: 1px solid var(--slate-100); background: none;
  font: inherit; text-align: left; color: var(--slate-900); cursor: pointer;
}
.suggest__option:last-of-type { border-bottom: 0; }
.suggest__option:hover,
.suggest__option[data-active="true"],
.suggest__option[aria-selected="true"] { background: var(--mineral-100); }
.suggest__hint { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate-500); }
.suggest__empty { margin: 0; padding: var(--space-4); color: var(--slate-700); }
.suggest__note { margin: 0; }

/* --- Inquiry actions ----------------------------------------------------- */

.card__actions { display: grid; gap: var(--space-3); }
.btn--action { background: var(--white); border-color: var(--mineral-600); color: var(--mineral-800); font-weight: 500; }
.btn--action:hover { background: var(--mineral-100); border-color: var(--mineral-800); color: var(--mineral-800); }
.btn--action[aria-pressed="true"] { background: var(--mineral-800); border-color: var(--mineral-800); color: var(--white); }
.btn--action[aria-pressed="true"]:hover { background: var(--ink-950); border-color: var(--ink-950); color: var(--white); }
.btn--block { width: 100%; }
.inquiry-add::before { content: "+"; font-family: var(--font-mono); font-size: 1.0625rem; line-height: 1; }
.inquiry-add[aria-pressed="true"]::before { content: "\2713"; }

/* --- Header search ------------------------------------------------------- */

.header-search { margin-left: auto; min-width: 0; }
.suggest--header { gap: var(--space-2); max-width: none; position: relative; }
.suggest--header .suggest__field { gap: 0; }
.suggest--header input[type="search"] {
  width: 300px; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--slate-300); border-right: 0;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  background: var(--white); color: var(--ink-950); font: inherit; font-size: 1.0625rem;
}
.suggest--header .suggest__submit {
  min-height: 44px; width: 48px; padding: 0; flex: none;
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}
.suggest--header .suggest__submit svg { width: 20px; height: 20px; }
.suggest--header .suggest__list {
  position: absolute; left: 0; top: calc(100% + 6px); width: 340px; z-index: 50;
  max-height: 60vh; box-shadow: 0 16px 30px rgba(16, 38, 35, 0.12);
}

@media (max-width: 1100px) {
  .header-search { order: 4; width: 100%; margin-left: 0; }
  .suggest--header input[type="search"] { width: 100%; }
  .suggest--header .suggest__list { width: 100%; }
}

/* The search field takes the free space in the header row, so the actions sit
   right beside it instead of floating in the middle. */
.site-header__inner .header-actions { margin-left: var(--space-4); }

/* The header is the one control strip every visitor reads; it carries a size up
   on the rest of the small buttons so the bar stays legible. */
.site-header .btn--small { min-height: 44px; font-size: 0.9375rem; }
.header-inquiry__label { font-weight: 500; }

/* ==========================================================================
   Home — the reference page. It carries the section rhythm, the image-slot
   component and the motion vocabulary (DESIGN.md 11) that the other pages
   follow; everything below is additive to the blocks above it.
   ========================================================================== */

/* --- Image slots --------------------------------------------------------- */

.image-slot {
  position: relative; margin: 0; overflow: hidden;
  background: var(--slate-100);
  border: var(--hairline); border-radius: var(--radius-media);
}
.image-slot__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(.2, .6, .2, 1); }
.image-slot__spec {
  position: absolute; inset: auto 0 0 0; padding: 6px 12px;
  background: rgba(16, 38, 35, 0.82); color: var(--white);
  font-size: 0.75rem; letter-spacing: 0.02em;
}
.card__media .image-slot { border: 0; border-radius: 0; }
.card:hover .image-slot__img { transform: scale(1.02); }

/* The material figure that sits beside a statement: taller than wide, with the
   slot caption kept so the photograph can be ordered against it. */
.figure-block { margin: 0; }
.figure-block .image-slot { box-shadow: var(--shadow-soft); }

/* --- Motion -------------------------------------------------------------- */

@keyframes sm-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* The hidden state is applied by the site script, so a page without JavaScript
   shows everything, and the reduced-motion rule at the top of this file
   collapses every duration below. */
html.sm-motion [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 260ms cubic-bezier(.2, .6, .2, 1), transform 260ms cubic-bezier(.2, .6, .2, 1);
}
html.sm-motion [data-reveal].is-revealed { opacity: 1; transform: none; }

.home-hero__copy > * { animation: sm-rise 340ms cubic-bezier(.2, .6, .2, 1) both; }
.home-hero__copy > *:nth-child(2) { animation-delay: 60ms; }
.home-hero__copy > *:nth-child(3) { animation-delay: 120ms; }
.home-hero__copy > *:nth-child(4) { animation-delay: 180ms; }
.home-hero__copy > *:nth-child(5) { animation-delay: 240ms; }
.home-hero__media { animation: sm-rise 380ms 140ms cubic-bezier(.2, .6, .2, 1) both; }
.home-stats > * { animation: sm-rise 300ms cubic-bezier(.2, .6, .2, 1) both; }
.home-stats > *:nth-child(2) { animation-delay: 60ms; }
.home-stats > *:nth-child(3) { animation-delay: 120ms; }
.home-stats > *:nth-child(4) { animation-delay: 180ms; }

/* A card that sits in a revealing wrapper still fills the wrapper. */
.grid > [data-reveal] { display: flex; flex-direction: column; }
.grid > [data-reveal] > * { flex: 1; }

/* --- Hero and the counted numbers ---------------------------------------- */

.home-hero .hero__inner { padding-bottom: var(--space-8); }
.home-hero__media .image-slot { background: var(--white); }
.home-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; border-top: 1px solid var(--slate-300);
}
.home-stat { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: 1px solid var(--slate-300); }
.home-stat:last-child { border-right: 0; }
.home-stat__label {
  margin: 0 0 var(--space-1); font-size: var(--text-small); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500);
}
.home-stat__value {
  margin: 0; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; color: var(--ink-950);
}

/* --- Why, on the dark anchor --------------------------------------------- */

.home-why__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); align-items: start; }
.home-why .section__head { margin-bottom: var(--space-6); }
.home-why__facts { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-6); }
.home-why .fact { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); }
.home-why .fact__label { color: rgba(238, 241, 240, 0.65); }
.home-why .fact__value { color: var(--white); }
.home-why__more { margin: 0; }
.home-why__media .image-slot { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }

/* --- Portfolio cards, applications and closing links --------------------- */

.category-card--media { padding: 0; overflow: hidden; }
.category-card__media { display: block; border-bottom: 1px solid var(--slate-300); }
.category-card__media .image-slot { border: 0; border-radius: 0; }
.category-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.category-card__body .category-card__meta { margin-top: auto; }
.category-card--media:hover .image-slot__img { transform: scale(1.02); }

.chip-count { margin-left: 6px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate-500); }
.home-more { margin: var(--space-6) 0 0; }
.home-card:hover .image-slot__img { transform: scale(1.02); }
.home-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--paper);
  border: 1px solid var(--slate-300); border-radius: var(--radius-card);
  color: var(--mineral-800);
}

/* --- Home on narrow screens --------------------------------------------- */

@media (max-width: 1000px) {
  .home-why__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .home-why__media { max-width: 520px; }
}

@media (max-width: 980px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stat { padding-right: var(--space-4); }
  .home-stat:nth-child(2n) { border-right: 0; }
}

@media (max-width: 620px) {
  .home-stats { grid-template-columns: minmax(0, 1fr); }
  .home-stat { padding: var(--space-4) 0; border-right: 0; border-bottom: 1px solid var(--slate-300); }
  .home-stat:last-child { border-bottom: 0; }
}

/* --- Home: industry direction ------------------------------------------- */

.home-trend__note { max-width: var(--measure); margin: var(--space-6) 0 0; font-size: var(--text-small); color: var(--slate-500); }
.home-trend .card:hover { border-color: var(--slate-300); }

/* ==========================================================================
   Editorial blocks.

   The composition the pages share: a photograph with the headline over it, a
   statement beside a material figure, image-backed tiles for the classification
   entries, three ways into the catalogue, and dated cards for the resources.
   Every block is content-agnostic — it renders whatever WordPress hands it.
   ========================================================================== */

/* --- Home hero: a photograph with the headline over it ------------------- */

/* The banner is held pale, not dark: the words on it are ink. Three layers are
   kept apart — the photograph, the pale field over it, and the type — so no two
   of them ever share a tone. */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--sand-50); color: var(--ink-950);
  border-bottom: var(--hairline);
}
.home-hero__media { position: absolute; inset: 0; z-index: 0; animation: none; }
.home-hero__media .image-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 0; background: var(--sand-50);
}
.home-hero__media .image-slot__img {
  width: 100%; height: 100%; object-fit: cover;
  /* Contrast is lifted, brightness is not: a macro of powder loses its crystal
     edges when it is simply pushed up, and the powder is the subject. */
  filter: contrast(1.16) saturate(1.06) brightness(1.02);
}
/* The veil is a warm paper white rather than a dark green wash. It holds the
   left, where the words sit, and the top and the foot, where the label and the
   counted figures sit; across the middle of the picture it falls away, so the
   powder keeps its own edges and its own colour. The photograph behind this
   banner is already light — what made the hero dark was the veil, not the
   picture. */
.home-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(250, 249, 245, 0.44) 0%,
      rgba(250, 249, 245, 0.34) 34%,
      rgba(250, 249, 245, 0.16) 56%,
      rgba(250, 249, 245, 0.04) 76%,
      rgba(250, 249, 245, 0) 100%),
    linear-gradient(180deg,
      rgba(250, 249, 245, 0.34) 0%,
      rgba(250, 249, 245, 0.03) 20%,
      rgba(250, 249, 245, 0.04) 64%,
      rgba(250, 249, 245, 0.34) 100%);
}

@media (max-width: 760px) {
  /* On a narrow screen the words run the full width of the banner and the
     counted figures stack below them, so the field is held pale throughout. */
  .home-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(250, 249, 245, 0.32) 0%,
        rgba(250, 249, 245, 0.38) 30%,
        rgba(250, 249, 245, 0.34) 68%,
        rgba(250, 249, 245, 0.44) 100%),
      linear-gradient(96deg,
        rgba(250, 249, 245, 0.30) 0%,
        rgba(250, 249, 245, 0.14) 62%,
        rgba(250, 249, 245, 0.02) 100%);
  }
}
.home-hero > .site-container { position: relative; z-index: 2; }
.home-hero__copy { max-width: 42rem; padding: clamp(3.5rem, 10vw, 8.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
/* The homepage headline is the owner's brand tagline, set as a lockup: the
   capitals and the light tracking belong to the tagline, and the size sits at
   the floor of the display range so the 43 characters hold two or three lines
   inside the copy column and the two buttons stay on the first screen. */
.home-hero__copy .hero__title {
  color: var(--ink-950); max-width: 26ch;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.home-hero__copy .hero__lede { color: var(--slate-700); }
.home-hero .eyebrow { color: var(--mineral-700); }
.home-hero .btn--secondary { border-color: rgba(16, 38, 35, 0.28); color: var(--ink-950); background: rgba(255, 255, 255, 0.55); }
.home-hero .btn--secondary:hover { border-color: var(--mineral-800); background: var(--white); color: var(--mineral-800); }
.home-hero .home-stats { border-top-color: rgba(16, 38, 35, 0.18); }
.home-hero .home-stat { border-right: 0; padding: var(--space-4) var(--space-5) var(--space-5) 0; }

/* A banner is a wide crop. It fills the hero and is trimmed from the sides by
   at most a few percent at common widths, so nothing important is lost. */
.image-slot--banner .image-slot__img { object-position: center 50%; }
.home-hero .home-stat__label { color: var(--slate-500); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); }
.home-hero .home-stat__value { color: var(--ink-950); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; }
@media (max-width: 620px) {
  .home-hero .home-stat { border-bottom-color: rgba(16, 38, 35, 0.14); }
}

/* --- A statement beside a material figure -------------------------------- */

.feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.feature--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature--media-first .feature__media { order: -1; }
/* A statement block that carries no figure: the body holds the section alone,
   full width and at a readable measure. */
.feature--text { grid-template-columns: minmax(0, 1fr); }
.feature--text .feature__body { max-width: 68ch; }
.feature__body { display: grid; gap: var(--space-5); align-content: center; }
.feature__body > .section__head { margin-bottom: 0; }
.feature__media { margin: 0; }
.feature .fact-list { grid-template-columns: minmax(0, 1fr); }
.feature .home-more, .feature .section__head-action { margin: 0; }
.feature .prose > *:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .feature, .feature--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .feature--media-first .feature__media { order: 0; }
  .feature__media { max-width: 560px; }
}

/* --- Tiles for the classification entries -------------------------------- */

.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .tile-grid, .tile-grid--3, .tile-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tile-grid, .tile-grid--3, .tile-grid--5 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Trade-show photographs on the home page ----------------------------- */

/* The mosaic follows the number of photographs the site holds: four is two
   rows of two, five sets two wider frames above three, six is two rows of
   three, and any other count wraps in a row of its own. With none supplied
   the section draws five slots, so the layout is on screen — and the size to
   supply is stated on each slot — before the photographs arrive. */

.show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.show-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.show-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.show-grid--five > .show-photo--feature { grid-column: span 3; }
.show-grid--five > .show-photo--support { grid-column: span 2; }
.show-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.show-photo { display: flex; flex-direction: column; gap: var(--space-2); }
.show-photo .image-slot { border: var(--hairline); border-radius: var(--radius-card); background: var(--slate-100); }
.show-photo .image-slot__spec { font-size: 0.6875rem; }
.show-photo__caption { margin: 0; font-family: var(--font-mono); font-size: var(--text-small); color: var(--slate-500); }

@media (max-width: 980px) {
  .show-grid, .show-grid--four, .show-grid--five, .show-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-grid--five > * { grid-column: auto; }
}
@media (max-width: 620px) {
  .show-grid, .show-grid--four, .show-grid--five, .show-grid--six { grid-template-columns: minmax(0, 1fr); }
}

/* --- Three ways into the catalogue --------------------------------------- */

.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.path {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-6); background: var(--white);
  border: var(--hairline); border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base);
}
.path:hover { border-color: var(--slate-200); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.path__label {
  margin: 0; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-600);
}
.path__title { margin: 0; font-size: 1.3125rem; line-height: 1.25; }
.path__text { margin: 0; font-size: 0.9375rem; color: var(--slate-700); line-height: 1.62; }
.path__link { margin: var(--space-2) 0 0; }
.section--dark .path, .section--alt .path, .section--tint .path { background: var(--white); }
@media (max-width: 980px) { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .path-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Closing links under a block ----------------------------------------- */

.home-more { margin: var(--space-7) 0 0; }
.section__head-action + .home-more { margin-top: var(--space-4); }
.block-note {
  max-width: var(--measure); margin: var(--space-7) 0 0;
  padding-top: var(--space-5); border-top: var(--hairline);
  font-size: var(--text-small); color: var(--slate-500);
}
.block-note--stack { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
.section--dark .block-note { border-top-color: rgba(255, 255, 255, 0.2); color: rgba(238, 241, 240, 0.72); }
.block-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* --- Facts on a dark surface --------------------------------------------- */

.fact-list--stack { grid-template-columns: minmax(0, 1fr); }
.fact--plain { background: transparent; border: 0; border-top: 1px solid var(--slate-300); border-radius: 0; padding: var(--space-5) 0 0; }
.fact--plain .fact__value { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ink-950); }
.section--dark .fact--plain, .home-why .fact--plain { background: transparent; border-top-color: rgba(255, 255, 255, 0.24); border-left: 0; border-right: 0; border-bottom: 0; }
.section--dark .fact--plain .fact__value { color: var(--white); }
.section--dark .fact--plain .fact__label { color: rgba(238, 241, 240, 0.66); }

/* --- A row of counted figures in a band ---------------------------------- */

.figure-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; }
.figure-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figure { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: 2px solid var(--mineral-700); }
.section--dark .figure { border-top-color: var(--mineral-500); }
.figure__value { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.05; color: var(--ink-950); }
.figure__label { margin: 0; font-size: 0.8125rem; color: var(--slate-500); }
.section--dark .figure__value { color: var(--white); }
.section--dark .figure__label { color: rgba(238, 241, 240, 0.7); }
@media (max-width: 860px) { .figure-row, .figure-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figure-row, .figure-row--3 { grid-template-columns: minmax(0, 1fr); } }

/* --- The front page: the header sits on the banner ----------------------- */

/* On a wide screen the header leaves the flow on the front page, so the
   photograph begins at the very top of the document and the header floats on
   it. Only the surfaces open up: the green actions and the search field keep
   their solid fill, and the moment the page is scrolled the header returns to
   the paper bar it is everywhere else. */
@media (min-width: 1041px) {
  .site-header--over {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: transparent;
  }
  .site-header--over[data-scrolled="true"] {
    background: var(--paper-2);
    border-bottom-color: var(--slate-300);
    box-shadow: 0 10px 30px -24px rgba(16, 38, 35, 0.5);
  }
  /* The banner field is pale, so the header on it is ink, not white. */
  .site-header--over:not([data-scrolled="true"]) .brand,
  .site-header--over:not([data-scrolled="true"]) .brand__word { color: var(--ink-950); }
  .site-header--over:not([data-scrolled="true"]) .brand__mark { color: var(--mineral-800); }
  .site-header--over:not([data-scrolled="true"]) .site-header__bar {
    background: transparent; border-top-color: rgba(16, 38, 35, 0.14);
  }
  .site-header--over:not([data-scrolled="true"]) .nav__link-item,
  .site-header--over:not([data-scrolled="true"]) .nav__trigger { color: var(--slate-700); }
  .site-header--over:not([data-scrolled="true"]) .nav__link-item:hover,
  .site-header--over:not([data-scrolled="true"]) .nav__link-item[aria-current="page"],
  .site-header--over:not([data-scrolled="true"]) .nav__trigger:hover,
  .site-header--over:not([data-scrolled="true"]) .nav__trigger[data-current="true"],
  .site-header--over:not([data-scrolled="true"]) .nav__disclosure[data-state="open"] .nav__trigger { color: var(--ink-950); }
  .site-header--over:not([data-scrolled="true"]) .btn--ghost { color: var(--slate-700); }
  .site-header--over:not([data-scrolled="true"]) .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(16, 38, 35, 0.16);
    color: var(--ink-950);
  }
  /* The banner field is pale, so the inquiry control keeps its own tinted
     surface instead of borrowing the banner's. */
  .site-header--over:not([data-scrolled="true"]) .header-inquiry.btn--ghost {
    background: var(--mineral-50);
    border-color: var(--mineral-600);
    color: var(--mineral-800);
  }
  .site-header--over:not([data-scrolled="true"]) .header-inquiry.btn--ghost:hover {
    background: var(--mineral-800);
    border-color: var(--mineral-800);
    color: var(--white);
  }
  .site-header--over:not([data-scrolled="true"]) .header-inquiry.btn--ghost:has([data-inquiry-count-wrap]:not([hidden])) {
    background: var(--mineral-800);
    border-color: var(--mineral-800);
    color: var(--white);
  }

  /* The words clear the floating header instead of starting under it. */
  .home-hero__copy { padding-top: clamp(9.5rem, 10.5vw, 11rem); }
}

/* --- Regulatory guide blocks --------------------------------------------- */

/* The regulatory guide on a resource page carries its own data blocks: a market
   matrix, a numbered flow, a checklist and a closing request block. They use the
   same tokens as the tables, steps and notices above; these rules add only the
   parts the guide needs and no component covers yet. Everything is scoped to the
   classes the guide content uses, so no other page changes. */

/* A block keeps its own type scale when it sits inside .prose, and a quiet line
   stays quiet. */
.prose .meta, .prose .block-note { font-size: var(--text-small); }
.prose .card__title { font-size: 1.1875rem; margin: 0 0 var(--space-2); }
.prose .step__title { font-size: 1rem; margin: 0 0 var(--space-1); }
.prose .reg-cta h2 { font-size: var(--text-h3); margin: 0 0 var(--space-3); }

/* The market matrix: the same table as .spec-table, with column widths left to
   the content and a row header in each row. It scrolls sideways on a phone. */
.reg-table {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--slate-300); font-size: 0.9375rem;
}
.reg-table th, .reg-table td { padding: 14px var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--slate-300); }
.reg-table tr:last-child th, .reg-table tr:last-child td { border-bottom: 0; }
.reg-table thead th {
  width: auto; background: var(--slate-100); color: var(--slate-700); font-weight: 500;
  font-size: var(--text-small); letter-spacing: 0.06em; text-transform: uppercase;
}
.reg-table tbody th { font-weight: 600; color: var(--ink-950); white-space: nowrap; }
.reg-table--matrix { min-width: 680px; }

/* The regulatory path: six numbered steps read left to right, wrapping on a
   narrow screen. */
.reg-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reg-flow li {
  flex: 1 1 150px; margin: 0; padding: var(--space-4);
  background: var(--white); border: 1px solid var(--slate-300);
  border-top: 2px solid var(--mineral-700); border-radius: var(--radius-card);
}
.reg-flow__index { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--copper-600); }
.reg-flow__label { display: block; margin: 2px 0 0; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--ink-950); }
.reg-flow__text { display: block; margin: 2px 0 0; font-size: var(--text-small); color: var(--slate-700); }

/* A checklist: one empty box per line, two columns on a wide screen. */
.reg-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.reg-checklist li {
  display: flex; gap: var(--space-3); align-items: flex-start; margin: 0;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--slate-200);
  font-size: 0.9375rem; color: var(--ink-950);
}
.reg-checklist li::before {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 5px;
  border: 1.5px solid var(--slate-400); border-radius: 3px;
}

/* The guide's own closing request block. */
.reg-cta {
  margin-top: var(--space-8); padding: var(--space-6);
  background: var(--mineral-50); border: 1px solid var(--slate-300);
  border-radius: var(--radius-card);
}
.reg-cta .btn-row { margin-top: var(--space-5); }
.reg-cta .block-note { margin-top: var(--space-5); max-width: none; }

@media (max-width: 720px) { .reg-checklist { grid-template-columns: minmax(0, 1fr); } }