/* ZHONGHE — ningboware.com
 *
 * Celadon catalogue. The factory is in Cixi, where the Yue kilns at Shanglin Lake fired
 * celadon (越窑青瓷) for a thousand years, so the palette is porcelain and glaze: a cool
 * porcelain ground, one celadon family for everything interactive, a deep kiln ink for
 * text, and brass (the premium finish ZHONGHE supplies) as the single warm note, kept for
 * the "send us a photo" route. The one bold element is the celadon face plate in the home
 * hero; everything else is set like a product catalogue: quiet labels, exact data,
 * generous space, few boxes.
 *
 * Type: Wix Madefor Display (headings) and Wix Madefor Text (everything else), subset from
 * the OFL originals with every OpenType feature kept. Latin, Latin Extended, Cyrillic and
 * Vietnamese load on demand through unicode-range; Chinese, Japanese, Korean, Thai and
 * Arabic pages fall through to tuned system stacks (see "Scripts" below).
 *
 * To change the brand colour, edit the --glaze-* and --plate-* tokens only.
 */

@font-face {
  font-family: "Madefor Text";
  src: url("/assets/fonts/madefor-text-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Madefor Text";
  src: url("/assets/fonts/madefor-text-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Madefor Text";
  src: url("/assets/fonts/madefor-text-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Madefor Text";
  src: url("/assets/fonts/madefor-text-vietnamese.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Madefor Display";
  src: url("/assets/fonts/madefor-display-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Madefor Display";
  src: url("/assets/fonts/madefor-display-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Madefor Display";
  src: url("/assets/fonts/madefor-display-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Madefor Display";
  src: url("/assets/fonts/madefor-display-vietnamese.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Porcelain, glaze, kiln */
  --porcelain: #f2f5f3;
  --paper: #ffffff;
  --glaze-50: #e8f0ec;
  --glaze-100: #d7e4dd;
  --glaze-200: #c4d7cd;
  --glaze-300: #a8c3b7;
  --glaze-500: #5e8a7d;
  --glaze-600: #3d7064;
  --glaze-700: #2e5d53;
  --glaze-800: #234a41;
  --glaze-900: #14302a;
  --kiln: #0f1e1a;

  /* Ink */
  --ink: #16211e;
  --ink-2: #33413d;
  --muted: #56645f;
  --quiet: #6e7c77;
  --line: #d7e0db;
  --line-strong: #b5c4bc;

  /* Brass: the photo-match route, nowhere else */
  --brass: #8c6a34;
  --brass-light: #c9a46a;

  /* Iron red, the other classic porcelain glaze: form errors only */
  --iron: #a23b2a;

  /* The hero face plate */
  --plate-0: #f7faf8;
  --plate-1: #dde9e3;
  --plate-2: #c7dad0;
  --plate-3: #adc6ba;
  --plate-rim: rgba(46, 93, 83, 0.2);
  --plate-nozzle: #7a9e91;

  /* On dark grounds */
  --on-dark: #f2f5f3;
  --on-dark-2: rgba(242, 245, 243, 0.74);
  --on-dark-3: rgba(242, 245, 243, 0.56);
  --on-dark-line: rgba(242, 245, 243, 0.13);

  --font-text: "Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Madefor Display", "Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --container: 1320px;
  --wide: 1320px;
  --narrow: 800px;
  --header: 76px;
  --section: clamp(64px, 8vw, 120px);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-float: 0 22px 48px -26px rgba(15, 30, 26, 0.34);
}

/* ---------- Scripts ----------
 * Madefor stays first so model codes, numbers and Latin words keep the brand face; the
 * script's own system font takes everything Madefor does not cover. Tracking goes to zero
 * (negative tracking breaks Han, Hangul, Thai and joined Arabic), and the leading opens up
 * for scripts with tall marks. */

html:lang(zh) {
  --font-text: "Madefor Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-display: "Madefor Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}

html:lang(ja) {
  --font-text: "Madefor Text", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
  --font-display: "Madefor Display", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
}

html:lang(ko) {
  --font-text: "Madefor Text", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Madefor Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

html:lang(th) {
  --font-text: "Madefor Text", "Noto Sans Thai", Thonburi, "Leelawadee UI", Tahoma, sans-serif;
  --font-display: "Madefor Display", "Noto Sans Thai", Thonburi, "Leelawadee UI", Tahoma, sans-serif;
}

html:lang(ar) {
  --font-text: "Madefor Text", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Madefor Display", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 20px);
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

strong,
b {
  font-weight: 620;
}

address {
  font-style: normal;
}

::selection {
  background: var(--glaze-200);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--glaze-700);
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.container.narrow > * {
  max-width: var(--narrow);
}

.icon {
  flex: none;
  width: 18px;
  height: 18px;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 470;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.35rem, 1.35rem + 3.3vw, 4.1rem);
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1.07;
  letter-spacing: -0.024em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 540;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--glaze-700);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: 0.004em;
}

.model-code {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 620;
  letter-spacing: 0.035em;
  font-feature-settings: "case" 1;
}

/* Long single words in German, Russian, Dutch or Turkish must never widen a phone screen. */
:lang(de) :is(h1, h2, h3),
:lang(ru) :is(h1, h2, h3),
:lang(nl) :is(h1, h2, h3),
:lang(pl) :is(h1, h2, h3),
:lang(tr) :is(h1, h2, h3),
:lang(fr) :is(h1, h2, h3),
:lang(es) :is(h1, h2, h3),
:lang(it) :is(h1, h2, h3),
:lang(pt) :is(h1, h2, h3),
:lang(id) :is(h1, h2, h3),
:lang(vi) :is(h1, h2, h3) {
  hyphens: auto;
}

.direct-answer,
.crumbs,
.chip,
.phrase,
.eyebrow {
  overflow-wrap: break-word;
}

:lang(zh) :is(h1, h2, h3, h4, .eyebrow, .model-descriptor),
:lang(ja) :is(h1, h2, h3, h4, .eyebrow, .model-descriptor),
:lang(ko) :is(h1, h2, h3, h4, .eyebrow, .model-descriptor),
:lang(th) :is(h1, h2, h3, h4, .eyebrow, .model-descriptor),
:lang(ar) :is(h1, h2, h3, h4, .eyebrow, .model-descriptor) {
  letter-spacing: 0;
}

:lang(zh) :is(h1, h2),
:lang(ja) :is(h1, h2),
:lang(ko) :is(h1, h2) {
  font-weight: 560;
  line-height: 1.22;
}

/* Han and kana set visibly larger than Latin at the same size. */
:lang(zh) h1,
:lang(ja) h1,
:lang(ko) h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.6rem);
}

/* Japanese headings break between phrases (bunsetsu), not inside a word. */
:lang(ja) :is(h1, h2, h3) {
  word-break: auto-phrase;
}

:lang(zh) body,
:lang(ja) body {
  line-height: 1.8;
  line-break: strict;
}

:lang(ko) body {
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:lang(th) body {
  line-height: 1.85;
}

:lang(th) :is(h1, h2, h3) {
  line-height: 1.3;
}

:lang(ar) body {
  line-height: 1.85;
}

:lang(ar) :is(h1, h2, h3) {
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Buttons and links ---------- */

.button,
.header-rfq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--glaze-700);
  border-radius: 999px;
  background: var(--glaze-700);
  color: #fff;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.004em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    transform 180ms var(--ease);
}

.button:hover,
.header-rfq:hover {
  background: var(--glaze-800);
  border-color: var(--glaze-800);
}

.button:active,
.header-rfq:active {
  transform: translateY(1px);
}

/* Only the mail and camera icons say something a label does not; the arrows and the
   decorative factory/beaker icons stay out of buttons. */
.button .icon:not(.icon-mail, .icon-camera, .icon-search) {
  display: none;
}

.button-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button-secondary:hover {
  background: var(--paper);
  border-color: var(--ink-2);
  color: var(--ink);
}

.button-light {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--glaze-900);
}

.button-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--glaze-900);
}

.button-ghost {
  background: transparent;
  border-color: rgba(242, 245, 243, 0.36);
  color: var(--on-dark);
}

.button-ghost:hover {
  background: rgba(242, 245, 243, 0.08);
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.text-link,
.model-rfq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--glaze-700);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--glaze-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

.text-link:hover,
.model-rfq:hover {
  color: var(--glaze-800);
  text-decoration-color: currentColor;
}

.text-link .icon,
.model-rfq .icon {
  display: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(242, 245, 243, 0.86);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.is-scrolled .site-header {
  border-bottom-color: var(--line);
  background: rgba(242, 245, 243, 0.94);
}

.header-inner {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  height: var(--header);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: max-content;
  color: var(--ink);
}

/* The company logo (calligraphic mark + 中禾), drawn from /assets/brand/zhonghe-logo-*.svg
   with currentColor: black (the ink of the headings) here, as the owner chose on
   2026-09-27, and porcelain on the dark footer. */
.brand-logo {
  flex: none;
  display: block;
  width: auto;
  height: 58px;
  color: var(--ink);
  overflow: visible;
}

.brand-text {
  display: block;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--line-strong);
}

.brand-text small {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 520;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 11px;
  bottom: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease);
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--glaze-700);
}

.site-nav a[aria-current="page"]::after {
  height: 2px;
}

.header-rfq {
  min-height: 42px;
  padding: 0 20px;
  font-size: 14px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  height: 1.5px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 240ms var(--ease), opacity 200ms var(--ease);
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ---------- Sections ---------- */

.section {
  --section-bg: var(--porcelain);
  padding-block: var(--section);
}

.section-muted {
  --section-bg: var(--glaze-50);
  background: var(--glaze-50);
}

/* Two plain sections in a row share one gap; the section intro's own rule separates them. */
.section:not(.section-muted, .factory-intro-section) + .section:not(.section-muted, .factory-intro-section) {
  padding-top: 0;
}

.section-intro {
  max-width: 780px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-intro p:not(.eyebrow) {
  max-width: 62ch;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
}

.section-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.two-column,
.category-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.two-column.align-start,
.category-support {
  align-items: start;
}

.two-column.reversed {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.stack {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.section-intro:not(:has(p)) {
  margin-bottom: 24px;
}

:is(.two-column, .split) > div > p {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
}

:is(.two-column, .split) > div > p + p {
  margin-top: 16px;
}

/* ---------- Home hero ---------- */

.hero {
  position: relative;
  overflow: clip;
}

.hero-inner {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 72px) clamp(40px, 4vw, 56px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero .eyebrow {
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(2.75rem, 1.1rem + 5.1vw, 5.5rem);
  font-weight: 440;
  line-height: 0.98;
  letter-spacing: -0.036em;
}

.hero-lede {
  max-width: 31em;
  margin-top: 30px;
  color: var(--ink-2);
  font-size: clamp(17px, 0.5vw + 14px, 20px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero-photo-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

.hero-photo-hint .icon {
  margin-top: 2px;
  color: var(--brass);
}

.hero-photo-hint > span {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms var(--ease);
}

.hero-photo-hint strong {
  color: var(--ink);
  font-weight: 620;
}

.hero-photo-hint:hover > span {
  text-decoration-color: var(--brass);
}

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(700px, 100%);
  aspect-ratio: 1;
  justify-self: end;
  margin-inline-end: calc(-1 * clamp(0px, 5vw, 96px));
}

.hero-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-plate-stop-0 {
  stop-color: var(--plate-0);
}

.hero-plate-stop-1 {
  stop-color: var(--plate-1);
}

.hero-plate-stop-2 {
  stop-color: var(--plate-2);
}

.hero-plate-stop-3 {
  stop-color: var(--plate-3);
}

.hero-plate-rim {
  fill: none;
  stroke: var(--plate-rim);
  stroke-width: 1.4;
}

.hero-plate-rim-inner {
  stroke-dasharray: 1.5 7;
  stroke-linecap: round;
}

.hero-plate-ring {
  fill: none;
  stroke: var(--plate-nozzle);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.46;
}

.hero-stage-image {
  position: relative;
  display: block;
  width: 74%;
  aspect-ratio: 1;
}

.hero-stage-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.hero-stage-caption {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  bottom: 3%;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.hero-stage-caption p {
  display: grid;
  gap: 2px;
}

.hero-stage-caption .model-code {
  color: var(--ink);
  font-size: 22px;
}

.hero-stage-caption p span:not(.model-code) {
  color: var(--muted);
  font-size: 13.5px;
}

.hero-stage-caption .text-link {
  font-size: 13.5px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-plate-ring {
    animation: nozzles-open 1100ms var(--ease) both;
    animation-delay: calc(160ms + var(--ring, 0) * 150ms);
  }

  .hero-plate-rim {
    animation: rim-in 900ms var(--ease) both;
  }
}

@keyframes nozzles-open {
  from {
    opacity: 0;
    stroke-width: 0;
  }

  to {
    opacity: 0.46;
    stroke-width: 7;
  }
}

@keyframes rim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------- Factory nameplate (home fact strip) ---------- */

.fact-strip {
  border-block: 1px solid var(--line);
}

.fact-strip-inner {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fact-strip-inner > div {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 12px;
  padding: 26px 22px 30px;
  border-inline-start: 1px solid var(--line);
}

.fact-strip-inner > div:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fact-strip strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 1vw + 14px, 30px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.018em;
  white-space: nowrap;
}

.fact-strip span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* ---------- Category plates ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 48px 28px;
}

.category-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.category-image {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 5 / 4;
  padding: 9%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 520ms var(--ease);
}

.category-card:hover .category-image img {
  transform: scale(1.04);
}

.category-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.category-body .eyebrow {
  margin: 0;
  font-size: 13px;
}

.category-body h3 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.016em;
}

.category-body h3 a:hover {
  color: var(--glaze-700);
}

.category-body p:not(.eyebrow) {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.category-body .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 6px;
}

.home-page .category-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.home-page .category-card {
  grid-column: span 4;
}

.home-page .category-card:nth-child(n + 4) {
  grid-column: span 3;
}

.home-page .category-card:nth-child(n + 4) .category-image {
  aspect-ratio: 1;
}

.home-page .category-card:nth-child(n + 4) h3 {
  font-size: 20px;
}

/* ---------- Product specimens ---------- */

.catalog-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
  gap: 40px 20px;
}

.featured-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.catalog-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.catalog-product-image {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1;
  padding: 11%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper);
}

.catalog-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 460ms var(--ease);
}

.catalog-product-card:hover .catalog-product-image img {
  transform: scale(1.05);
}

.catalog-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 2px 0;
}

.catalog-product-body h3 {
  font-size: 16px;
  line-height: 1.2;
}

.catalog-product-body h3 a:hover {
  color: var(--glaze-700);
}

.catalog-product-descriptor {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.catalog-product-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.catalog-product-foot .chip-quiet {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-rfq {
  flex: none;
  font-size: 13.5px;
}

/* ---------- Tags ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease);
}

a.chip:hover {
  border-color: var(--glaze-500);
  color: var(--glaze-700);
}

span.chip:not(.chip-quiet) {
  border-color: transparent;
  background: var(--glaze-100);
  color: var(--ink-2);
}

.section-muted span.chip:not(.chip-quiet) {
  background: var(--paper);
}

.chip.chip-quiet {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* ---------- Photo match ---------- */

.photo-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
}

/* A camera viewfinder: four brass corner brackets around the camera glyph. */
.photo-match-badge {
  --corner: 20px;
  --weight: 2px;
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  color: var(--brass);
  background:
    linear-gradient(currentColor 0 0) left top / var(--corner) var(--weight),
    linear-gradient(currentColor 0 0) left top / var(--weight) var(--corner),
    linear-gradient(currentColor 0 0) right top / var(--corner) var(--weight),
    linear-gradient(currentColor 0 0) right top / var(--weight) var(--corner),
    linear-gradient(currentColor 0 0) left bottom / var(--corner) var(--weight),
    linear-gradient(currentColor 0 0) left bottom / var(--weight) var(--corner),
    linear-gradient(currentColor 0 0) right bottom / var(--corner) var(--weight),
    linear-gradient(currentColor 0 0) right bottom / var(--weight) var(--corner);
  background-repeat: no-repeat;
}

.photo-match-badge .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.4;
}

.photo-match .eyebrow {
  margin-bottom: 12px;
  color: var(--brass);
}

.photo-match h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem);
}

.photo-match-body > p {
  max-width: 64ch;
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 17px;
}

.photo-match-body a:not(.button, .text-link) {
  color: var(--glaze-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--glaze-300);
  text-underline-offset: 3px;
}

.photo-match-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 28px;
}

.photo-match-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
  border-radius: var(--r-lg);
}

.photo-match-compact .photo-match-badge {
  --corner: 12px;
  --weight: 1.5px;
  width: 56px;
  height: 56px;
}

.photo-match-compact .photo-match-badge .icon {
  width: 24px;
  height: 24px;
}

.photo-match-compact h2 {
  font-size: 21px;
  line-height: 1.25;
}

.photo-match-compact .photo-match-body > p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

.photo-match-compact .photo-match-actions {
  margin-top: 20px;
}

/* ---------- Factory ---------- */

.factory-intro-layout,
.factory-principles-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.factory-scale-note {
  max-width: 62ch;
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--glaze-50);
  color: var(--ink-2);
  font-size: 15px;
}

.section-muted .factory-scale-note {
  background: var(--paper);
}

.factory-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.factory-proof-wrap {
  margin-top: clamp(56px, 7vw, 96px);
}

.factory-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.factory-proof-grid article {
  min-width: 0;
  padding: 28px 28px 0;
  border-inline-start: 1px solid var(--line);
}

.factory-proof-grid article:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.factory-proof-grid h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.factory-proof-grid p {
  font-size: 15px;
  line-height: 1.6;
}

.factory-visual-panel {
  display: grid;
  gap: 16px;
}

.factory-main-photo,
.factory-mini-photos figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.factory-main-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.factory-main-photo figcaption {
  display: grid;
  gap: 4px;
  padding: 18px 22px 22px;
}

.factory-main-photo strong {
  color: var(--ink);
  font-weight: 600;
}

.factory-main-photo span,
.factory-mini-photos figcaption {
  color: var(--muted);
  font-size: 14px;
}

.factory-mini-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.factory-mini-photos img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  padding: 12px;
}

.factory-mini-photos figcaption {
  padding: 0 16px 16px;
  color: var(--ink-2);
  font-weight: 500;
}

.document-support-list,
.factory-principles {
  display: grid;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--line);
}

.document-support-list {
  border-top: 1px solid var(--line);
}

.document-support-list span,
.checklist span {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
}

.document-support-list .icon,
.checklist .icon {
  margin-top: 1px;
  color: var(--glaze-700);
}

.factory-principles {
  border-top: 1px solid var(--line);
}

.factory-principles article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.factory-principles h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.factory-principles p {
  font-size: 15.5px;
}

/* ---------- Process (a real sequence, so it is numbered) ---------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
}

.process-grid li {
  position: relative;
  min-width: 0;
  padding-top: 34px;
  border-top: 1px solid var(--line-strong);
}

.process-step {
  position: absolute;
  top: -16px;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--glaze-700);
  border-radius: 50%;
  background: var(--section-bg, var(--porcelain));
  color: var(--glaze-700);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.process-grid h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.process-grid p {
  font-size: 15px;
  line-height: 1.6;
}

/* Inside a two-column split the same steps run down a vertical line. */
.split .process-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 6px 0 0;
}

.split .process-grid li {
  margin-inline-start: 16px;
  padding: 0 0 34px 44px;
  border-top: 0;
  border-inline-start: 1px solid var(--line-strong);
}

.split .process-grid li:last-child {
  padding-bottom: 0;
  border-inline-start-color: transparent;
}

.split .process-step {
  top: -4px;
  inset-inline-start: -16px;
}

.split .process-grid h3 {
  margin-top: 0;
}

/* ---------- Answers, panels, tables ---------- */

.answer-block {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.answer-block strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.answer-block p {
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
}

.answer-block + .table-wrap,
.answer-block + .chip-row,
.answer-block + .answer-block {
  margin-top: 24px;
}

.rfq-panel {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.rfq-panel h2,
.rfq-panel h3 {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.25;
}

.rfq-panel h3:not(:first-child) {
  margin-top: 26px;
}

.rfq-panel ul {
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.rfq-panel li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

.rfq-panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 10px;
  height: 1.5px;
  background: var(--glaze-500);
}

.rfq-panel li strong {
  color: var(--ink);
  font-weight: 620;
}

.rfq-panel p {
  color: var(--ink-2);
  font-size: 15.5px;
}

.rfq-panel p + p {
  margin-top: 12px;
}

.rfq-panel p + .button,
.rfq-panel .chip-row + p {
  margin-top: 20px;
}

.rfq-panel a:not(.button, .chip) {
  color: var(--glaze-700);
  font-weight: 600;
}

.image-panel {
  overflow: hidden;
  padding: clamp(12px, 1.6vw, 20px);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.image-panel img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
  overflow-wrap: break-word;
}

th:first-child,
td:first-child {
  min-width: 8.5em;
}

th {
  background: #f7faf8;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

td {
  color: var(--ink-2);
  line-height: 1.55;
}

td:first-child {
  color: var(--ink);
  font-weight: 580;
}

tbody tr:last-child td {
  border-bottom: 0;
}

caption {
  caption-side: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 560;
  text-align: start;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  display: block;
  padding: 24px 48px 24px 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.008em;
  cursor: pointer;
  list-style: none;
  transition: color 160ms var(--ease);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  top: calc(24px + 0.67em);
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--glaze-700);
  transition: transform 260ms var(--ease);
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0deg);
}

.faq-list summary:hover {
  color: var(--glaze-700);
}

.faq-list details p {
  max-width: 68ch;
  padding: 0 48px 26px 0;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
}

/* ---------- Closing band ---------- */

.cta-band {
  position: relative;
  overflow: clip;
  padding-block: clamp(72px, 9vw, 132px);
  background: var(--glaze-900);
  color: var(--on-dark);
}

/* The hero's nozzle rings again, drawn once as a background image and cut by the edge. */
.cta-band::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: calc(-1 * clamp(160px, 18vw, 300px));
  width: clamp(520px, 56vw, 860px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23a8c3b7' stroke-linecap='round'%3E%3Ccircle cx='400' cy='400' r='396' stroke-width='1.2' opacity='.5'/%3E%3Ccircle cx='400' cy='400' r='374' stroke-width='1.2' opacity='.3'/%3E%3Ccircle cx='400' cy='400' r='258' stroke-width='6' stroke-dasharray='0.001 27.018'/%3E%3Ccircle cx='400' cy='400' r='296' stroke-width='6' stroke-dasharray='0.001 27.351' transform='rotate(2.65 400 400)'/%3E%3Ccircle cx='400' cy='400' r='334' stroke-width='6' stroke-dasharray='0.001 27.612'/%3E%3Ccircle cx='400' cy='400' r='222' stroke-width='1.2' stroke-dasharray='1.5 7' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}

.cta-band-inner {
  position: relative;
  z-index: 1;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 5vw, 72px);
}

.cta-band .eyebrow {
  color: var(--glaze-300);
}

.cta-band h2 {
  max-width: 21ch;
  color: var(--on-dark);
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.cta-band p:not(.eyebrow) {
  max-width: 56ch;
  margin-top: 20px;
  color: var(--on-dark-2);
  font-size: 17.5px;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-band :focus-visible {
  outline-color: var(--on-dark);
}

/* ---------- Page heroes ---------- */

.page-hero,
.catalog-page-hero {
  padding-block: clamp(48px, 6vw, 96px) clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-hero-inner,
.catalog-page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}

.page-hero-inner > :only-child {
  grid-column: 1 / -1;
  max-width: 900px;
}

.page-hero h1,
.catalog-page-hero h1 {
  font-size: clamp(2.4rem, 1.35rem + 3.6vw, 4.5rem);
}

.page-hero p:not(.eyebrow),
.catalog-page-hero p:not(.eyebrow) {
  max-width: 60ch;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  line-height: 1.6;
}

.page-hero .article-meta span {
  color: var(--muted);
}

.page-hero-image {
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
  border-radius: var(--r-xl);
  background: var(--paper);
}

.page-hero-image img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.catalog-page-hero {
  padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 48px);
  border-bottom: 0;
}

.catalog-page-hero-inner {
  align-items: end;
}

.catalog-hero-panel {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-top: 1px solid var(--line-strong);
}

.catalog-hero-panel div {
  min-width: 0;
  padding: 18px 20px 4px;
  border-inline-start: 1px solid var(--line);
}

.catalog-hero-panel div:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.catalog-hero-panel dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.catalog-hero-panel dd {
  margin: 8px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 460;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.catalog-hero-panel div:not(:nth-child(2)) dd {
  white-space: nowrap;
}

.catalog-hero-panel div:nth-child(2) dd {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ---------- Catalog ---------- */

.catalog-section {
  padding-top: 12px;
}

.catalog-section .container {
  width: min(var(--wide), 100% - 2 * var(--gutter));
}

.catalog-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.catalog-sidebar-inner {
  position: sticky;
  top: calc(var(--header) + 28px);
}

.catalog-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.catalog-nav {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.catalog-nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 160ms var(--ease), padding 200ms var(--ease);
}

.catalog-nav a:hover {
  color: var(--glaze-700);
}

.catalog-nav a[aria-current="page"] {
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--glaze-700);
  color: var(--ink);
  font-weight: 620;
}

.catalog-nav small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.catalog-results {
  min-width: 0;
}

.catalog-heading {
  margin-bottom: 24px;
}

.catalog-heading .eyebrow {
  margin-bottom: 10px;
}

.catalog-heading h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
}

.catalog-heading p:not(.eyebrow) {
  max-width: 70ch;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 16px;
}

.catalog-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}

.catalog-filter label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.catalog-filter label:focus-within {
  border-color: var(--glaze-700);
  box-shadow: 0 0 0 4px rgba(168, 195, 183, 0.45);
}

.catalog-filter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.catalog-filter input::placeholder {
  color: var(--quiet);
}

.catalog-filter-count {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.catalog-filter-count strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.catalog-empty {
  margin-top: 28px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-2);
  text-align: center;
}

.catalog-empty a {
  color: var(--glaze-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.catalog-download {
  margin: 28px 0 0;
}

/* ---------- Model page ---------- */

.product-hero {
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 104px);
}

.product-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.product-media {
  position: sticky;
  top: calc(var(--header) + 24px);
  margin: 0;
}

.product-frame {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1;
  padding: 9%;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--paper);
}

.product-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-media figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 26px;
  color: var(--quiet);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

.crumbs a {
  color: var(--ink-2);
  transition: color 160ms var(--ease);
}

.crumbs a:hover {
  color: var(--glaze-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs > span:last-child {
  color: var(--muted);
}

.product-summary h1 {
  display: grid;
  gap: 16px;
}

.product-summary h1 .model-code {
  justify-self: start;
  color: var(--glaze-700);
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  letter-spacing: 0.07em;
}

.model-descriptor {
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.product-lede {
  max-width: 60ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 36px;
}

.spec-plate {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.spec-plate > div {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
}

.spec-plate .spec-plate-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 18px 22px;
  border-top: 0;
  background: var(--glaze-50);
}

.spec-plate dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.spec-plate dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.spec-plate-head dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.spec-plate-head .model-code {
  color: var(--ink);
  font-size: 22px;
}

.spec-plate-category {
  color: var(--glaze-700);
  font-size: 13.5px;
  font-weight: 600;
}

.spec-plate-compact > div {
  padding: 9px 18px;
}

.spec-plate-compact dd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.spec-plate-compact .spec-plate-head dd {
  display: flex;
}

.spec-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.phrase-block {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.phrase-block h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.phrase-block p,
.phrase-block li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.phrase-block ul {
  margin: 8px 0 0;
  padding-inline-start: 1.2em;
}

.phrase-block li + li {
  margin-top: 4px;
}

.phrase {
  color: var(--ink-2);
  font-weight: 500;
}

.related-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.model-also-listed {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.model-also-listed .eyebrow {
  margin-bottom: 4px;
}

.model-also-listed .chip-row {
  margin-top: 10px;
}

.model-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 28px;
}

.model-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.model-gallery-item .product-frame {
  border-radius: var(--r-lg);
}

.model-gallery-item figcaption {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.model-variant-list {
  margin-top: 36px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.model-variant-list h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.model-variant-list dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.model-variant-list dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.model-variant-list dd {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.model-variant-list .spec-note {
  margin-top: 16px;
}

.related-empty h3 {
  font-size: 19px;
}

/* ---------- Inquiry form ----------
 * One form, two homes: the drawer every "Send RFQ" link opens (lib/html.mjs rfqDrawer) and
 * the /contact/ page. The form itself carries no box, so it sits on the drawer's paper; the
 * contact page frames it. */

.rfq-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}

.rfq-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.rfq-full {
  grid-column: 1 / -1;
}

.rfq-field > label,
.rfq-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.rfq-optional {
  color: var(--quiet);
  font-size: 13px;
  font-weight: 450;
}

/* :where keeps this at one class, so the select rule below can add its arrow and padding. */
.rfq-form :where(input:not([type="checkbox"], [type="file"]), select, textarea) {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--porcelain);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}

.rfq-form textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.55;
}

.rfq-form select {
  appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2356645f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  cursor: pointer;
}

[dir="rtl"] .rfq-form select {
  background-position: left 16px center;
}

.rfq-form input::placeholder,
.rfq-form textarea::placeholder {
  color: var(--quiet);
}

.rfq-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--glaze-700);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(168, 195, 183, 0.45);
}

.rfq-form [aria-invalid="true"] {
  border-color: var(--iron);
}

.rfq-form [aria-invalid="true"]:focus {
  border-color: var(--iron);
  box-shadow: 0 0 0 4px rgba(162, 59, 42, 0.16);
}

.rfq-error {
  margin: 0;
  color: var(--iron);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.4;
}

/* The trap field for form robots: out of sight, out of the tab order, out of the tree. */
.rfq-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Photos: the brass route, as everywhere else on the site. */
.rfq-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--porcelain);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.rfq-drop:hover,
.rfq-drop.is-over {
  border-color: var(--brass);
  background: #faf7f1;
}

.rfq-drop .icon {
  width: 26px;
  height: 26px;
  color: var(--brass);
}

.rfq-drop strong,
.rfq-drop small {
  display: block;
}

.rfq-drop strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.rfq-drop small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* The file input stays focusable (keyboard users open the picker from it); its focus ring
   is drawn on the drop area they can see. */
.rfq-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.rfq-field:has(.rfq-file:focus-visible) .rfq-drop {
  outline: 2px solid var(--glaze-700);
  outline-offset: 3px;
}

.rfq-files {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rfq-files li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 14px;
}

.rfq-files img,
.rfq-file-kind {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--porcelain);
  object-fit: cover;
}

.rfq-file-kind {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rfq-file-name {
  overflow: hidden;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rfq-files button {
  padding: 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rfq-files button:hover {
  color: var(--iron);
}

.rfq-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.rfq-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--glaze-700);
  cursor: pointer;
}

.rfq-consent input[aria-invalid="true"] {
  outline: 2px solid var(--iron);
  outline-offset: 2px;
}

.rfq-consent a,
.rfq-thanks-card p a {
  color: var(--glaze-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rfq-actions {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 4px;
}

.rfq-actions .button {
  min-width: 220px;
}

.rfq-form button[type="submit"][disabled] {
  cursor: progress;
  opacity: 0.72;
}

.rfq-status {
  margin: 0;
  color: var(--glaze-700);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.45;
}

.rfq-status:empty {
  display: none;
}

.rfq-status.is-error {
  color: var(--iron);
}

.rfq-lead {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

.rfq-confidential {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* "Prefer email?" over the address, with Copy beside both. */
.rfq-email {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  margin: 18px 0 26px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--porcelain);
}

[dir="rtl"] .rfq-email {
  padding: 12px 16px 12px 12px;
}

.rfq-email span {
  grid-column: 1;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.rfq-email a {
  grid-column: 1;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rfq-email .rfq-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.rfq-copy {
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}

.rfq-copy:hover {
  border-color: var(--ink-2);
}

/* ---------- The drawer: a sheet from the inline end, a bottom sheet on phones ---------- */

html.rfq-lock {
  overflow: hidden;
}

html.rfq-lock body {
  padding-inline-end: var(--rfq-scrollbar, 0px);
}

.rfq-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.rfq-backdrop,
.rfq-thanks-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 30, 26, 0.46);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.rfq-drawer.is-open .rfq-backdrop,
.rfq-thanks.is-open .rfq-thanks-backdrop {
  opacity: 1;
}

.rfq-sheet {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(100vw, 580px);
  height: 100%;
  background: var(--paper);
  box-shadow: -32px 0 80px -36px rgba(15, 30, 26, 0.5);
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

[dir="rtl"] .rfq-sheet {
  box-shadow: 32px 0 80px -36px rgba(15, 30, 26, 0.5);
  transform: translateX(-100%);
}

.rfq-drawer.is-open .rfq-sheet {
  transform: none;
}

.rfq-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 32px 20px;
  border-bottom: 1px solid var(--line);
}

.rfq-sheet-head .eyebrow {
  margin-bottom: 6px;
}

.rfq-sheet-head h2 {
  font-size: clamp(22px, 1vw + 16px, 27px);
  line-height: 1.2;
}

.rfq-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}

.rfq-close:hover {
  border-color: var(--ink-2);
}

.rfq-sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 32px 40px;
}

.rfq-drawer .rfq-actions {
  justify-items: stretch;
}

/* ---------- Thank-you: the nozzle rings close around a check ---------- */

.rfq-thanks {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}

.rfq-thanks-card {
  position: relative;
  width: min(100%, 460px);
  padding: 34px clamp(24px, 5vw, 40px) 32px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-float);
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 260ms var(--ease), transform 380ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.rfq-thanks.is-open .rfq-thanks-card {
  opacity: 1;
  transform: none;
}

.rfq-thanks-mark {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 18px;
}

.rfq-thanks-disc {
  fill: var(--glaze-50);
}

.rfq-thanks-ring {
  fill: none;
  stroke: var(--glaze-500);
  stroke-width: 4.4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
}

.rfq-thanks-check {
  fill: none;
  stroke: var(--glaze-700);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}

.rfq-thanks.is-open .rfq-thanks-ring {
  animation: rfq-ring 560ms var(--ease) forwards;
  animation-delay: calc(180ms + var(--ring) * 120ms);
}

.rfq-thanks.is-open .rfq-thanks-check {
  animation: rfq-check 520ms 560ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes rfq-ring {
  from {
    opacity: 0;
    transform: scale(0.9) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rfq-check {
  to {
    stroke-dashoffset: 0;
  }
}

.rfq-thanks-card .eyebrow {
  margin-bottom: 8px;
}

.rfq-thanks-card h2 {
  font-size: clamp(24px, 1.2vw + 18px, 30px);
  line-height: 1.2;
}

.rfq-thanks-card p:not(.eyebrow) {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.rfq-thanks-card .button {
  margin-top: 24px;
}

/* ---------- Phone button: appears once the first screen has scrolled away ---------- */

.rfq-fab {
  display: none;
}

/* ---------- Contact page ---------- */

.contact-hero .page-hero-inner {
  align-items: start;
}

.page-hero p.contact-confidential {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.contact-direct {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
}

.contact-direct h2 {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.25;
}

.page-hero .contact-direct p:not(.eyebrow) {
  margin-top: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

.page-hero .contact-direct .contact-direct-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-block: 18px 22px;
}

.contact-direct-email a {
  color: var(--glaze-700);
  font-family: var(--font-display);
  font-size: clamp(20px, 0.8vw + 15px, 24px);
  font-weight: 560;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.contact-direct-facts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.contact-direct-facts div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 12px;
}

.contact-direct-facts dt {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.5;
}

.contact-direct-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.contact-direct-facts a {
  color: var(--ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.contact-form-wrap h2 {
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.6rem);
}

.contact-form-wrap .rfq-lead {
  max-width: 60ch;
  margin: 14px 0 28px;
  font-size: 17px;
}

.contact-form-wrap .rfq-form {
  padding: clamp(22px, 3.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
}

.contact-aside .rfq-panel strong {
  color: var(--ink);
}

/* ---------- Guides, topic pages, localized pages ---------- */

.article-hero {
  padding-block: clamp(40px, 5vw, 84px) clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}

.article-hero h1 {
  max-width: 21ch;
  font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.1rem);
}

.direct-answer {
  max-width: 64ch;
  margin-top: 28px;
  color: var(--ink-2);
  font-size: clamp(18px, 0.4vw + 16px, 20.5px);
  line-height: 1.6;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.article-meta a,
.article-byline a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.article-byline {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.article-hero .hero-actions {
  margin-top: 32px;
}

.topic-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 30px;
  font-size: 13.5px;
}

.topic-langs > span {
  color: var(--muted);
  font-weight: 500;
}

.topic-langs .chip {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.topic-langs .chip:hover {
  color: var(--glaze-700);
  text-decoration-color: currentColor;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}

.article-body {
  min-width: 0;
  max-width: 72ch;
}

.article-body > h2 {
  margin-top: 60px;
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem);
  line-height: 1.15;
}

.article-body > h2:first-child {
  margin-top: 0;
}

.article-body p {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.72;
}

.article-body ul,
.article-body ol {
  margin: 18px 0 0;
  padding-inline-start: 1.3em;
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.7;
}

.article-body li + li {
  margin-top: 10px;
}

.article-body li::marker {
  color: var(--glaze-500);
}

.article-body ol li::marker {
  color: var(--glaze-700);
  font-weight: 650;
}

.article-body a:not(.chip, .button, .text-link) {
  color: var(--glaze-700);
  text-decoration: underline;
  text-decoration-color: var(--glaze-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-body a:not(.chip, .button, .text-link):hover {
  text-decoration-color: currentColor;
}

.article-body .table-wrap {
  margin-top: 26px;
}

.article-body > .table-wrap:first-child,
.article-body > .key-facts:first-child {
  margin-top: 0;
}

.key-facts + .howto-supplies,
.key-facts + .local-terms {
  margin-top: 20px;
}

.howto-supplies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px 32px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.howto-supply h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.article-body .howto-supply ul {
  margin: 0;
}

.article-body .howto-supply li {
  font-size: 15.5px;
}

/* The sidebar: the RFQ and photo panels first, then the contents list, which is the only
   part that stays in view while the reader scrolls (a sticky block taller than the screen
   would hide its own end). */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
  min-width: 0;
}

.article-aside > .article-toc {
  order: 3;
  position: sticky;
  top: calc(var(--header) + 28px);
}

.article-toc {
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--line-strong);
}

.article-toc p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.article-toc a {
  position: relative;
  display: block;
  padding: 6px 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.4;
  transition: color 160ms var(--ease);
}

.article-toc a:hover {
  color: var(--glaze-700);
}

.article-toc a.is-current {
  color: var(--glaze-700);
  font-weight: 620;
}

.article-toc a.is-current::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: -21px;
  width: 2px;
  border-radius: 2px;
  background: var(--glaze-700);
}

.related-guides {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.related-guides + .related-guides {
  margin-top: 32px;
}

.related-guides h3 {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
}

.related-guides {
  columns: 3 190px;
  column-gap: 32px;
}

.related-guides h3 {
  column-span: all;
}

.related-guides .chip,
.phrase-block .chip-row .chip {
  display: flex;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
  break-inside: avoid;
}

.related-guides .chip:hover,
.phrase-block .chip-row .chip:hover {
  color: var(--glaze-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.phrase-block .chip-row {
  display: block;
  margin-top: 10px;
  columns: 2 200px;
  column-gap: 32px;
}

.author-box {
  display: grid;
  gap: 10px;
  margin-top: 56px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.author-box .eyebrow {
  margin: 0;
}

.author-box h3 {
  font-size: 20px;
}

.author-box h3 a:hover {
  color: var(--glaze-700);
}

.article-body .author-box p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.author-box-contact {
  font-weight: 600;
}

.author-box-contact a {
  color: var(--glaze-700);
}

.person-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.person-card .eyebrow {
  margin-bottom: 8px;
}

.person-card h2 {
  margin-bottom: 18px;
  font-size: 21px;
  line-height: 1.25;
}

.person-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.person-card strong {
  color: var(--ink);
  font-weight: 600;
}

.person-card a {
  color: var(--glaze-700);
  font-weight: 600;
}

.local-terms caption {
  background: var(--paper);
}

.topic-models-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

.topic-browse-group {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 14px 32px;
  padding-block: 30px;
  border-top: 1px solid var(--line);
}

.topic-browse-group:last-child {
  border-bottom: 1px solid var(--line);
}

.topic-browse-group h3 {
  font-size: 18px;
  font-weight: 540;
}

.topic-browse-group h3 a:hover {
  color: var(--glaze-700);
}

/* A catalogue index, not a tag cloud: one link per line, flowing in columns. */
.topic-browse-group .chip-row {
  display: block;
  margin: 0;
  columns: 3 210px;
  column-gap: 36px;
}

.topic-browse-group .chip {
  display: flex;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
  break-inside: avoid;
}

.topic-browse-group .chip:hover {
  color: var(--glaze-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Hubs, lists, glossary, news ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 0 44px;
}

.hub-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 0 32px;
  border-top: 1px solid var(--line);
}

.hub-card .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.hub-card h2,
.hub-card h3 {
  font-size: 20px;
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.hub-card h3 a,
.hub-card h2 a {
  transition: color 160ms var(--ease);
}

.hub-card h3 a:hover,
.hub-card h2 a:hover {
  color: var(--glaze-700);
}

.hub-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.hub-card .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 4px;
  font-size: 14.5px;
}

.hub-group {
  margin-top: clamp(56px, 6vw, 88px);
}

.hub-group:first-of-type,
.hub-group:first-child {
  margin-top: 0;
}

.hub-group > h2 {
  margin-bottom: 20px;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
}

.hub-group-intro {
  max-width: 70ch;
  margin: -6px 0 22px;
  color: var(--muted);
  font-size: 16px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 0 44px;
  margin: 0;
}

.glossary-term {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}

.glossary-term dt {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 540;
  line-height: 1.3;
}

.glossary-term dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.glossary-term .text-link {
  margin-top: 10px;
  font-size: 14px;
}

.faq-group {
  margin-top: 64px;
}

.faq-group:first-of-type {
  margin-top: 0;
}

.faq-group > h2 {
  margin-bottom: 18px;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
}

.news-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.news-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px 32px;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
}

.news-card > :not(.news-date) {
  grid-column: 2;
}

.news-card h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  line-height: 1.25;
}

.news-card h2 a:hover {
  color: var(--glaze-700);
}

.news-card p {
  max-width: 72ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}

.news-card .text-link {
  justify-self: start;
  margin-top: 6px;
}

.news-date {
  grid-row: 1 / span 3;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.project-card dl {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
}

.project-card dl > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}

.project-card dt {
  color: var(--muted);
  font-weight: 600;
}

.project-card dd {
  margin: 0;
  color: var(--ink-2);
}

.author-duties {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.author-duties li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}

.author-duties .icon {
  margin-top: 2px;
  color: var(--glaze-700);
}

.author-guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 0 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.author-guide-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--line);
}

.author-guide-list a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 540;
  line-height: 1.35;
}

.author-guide-list a:hover {
  color: var(--glaze-700);
}

.author-guide-list span {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* The HTML site map: many short link lists, flowing in columns. */
.sitemap-groups {
  margin-top: 40px;
  columns: 3 280px;
  column-gap: 44px;
}

.sitemap-group {
  display: inline-block;
  width: 100%;
  margin: 0 0 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}

.sitemap-group h2 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.008em;
}

.sitemap-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-group li {
  margin: 6px 0;
  font-size: 14.5px;
  line-height: 1.45;
}

.sitemap-group a {
  color: var(--ink-2);
}

.sitemap-group a:hover {
  color: var(--glaze-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sitemap-group-compact li {
  display: inline-block;
  margin: 3px 12px 3px 0;
}

/* ---------- 404 ---------- */

.not-found {
  padding-block: clamp(88px, 12vw, 168px);
}

.not-found .eyebrow {
  color: var(--glaze-700);
}

.not-found .lede {
  max-width: 58ch;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 19px;
}

.not-found .hero-actions {
  margin: 32px 0;
}

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

.site-footer {
  background: var(--kiln);
  color: var(--on-dark-2);
}

.footer-grid {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.footer-brand {
  color: var(--on-dark);
}

.footer-brand .brand-logo {
  height: 68px;
  color: var(--on-dark);
}

.footer-brand .brand-text {
  border-inline-start-color: var(--on-dark-line);
}

.footer-brand .brand-text small {
  color: var(--on-dark-3);
  font-size: 13px;
}

.footer-about p {
  max-width: 44ch;
  margin-top: 22px;
  color: var(--on-dark-2);
  font-size: 14.5px;
  line-height: 1.65;
}

.footer-about .market-note {
  margin-top: 14px;
  color: var(--on-dark-3);
  font-size: 13.5px;
}

.site-footer h2 {
  margin-bottom: 18px;
  color: var(--glaze-300);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a,
.footer-contact a {
  color: var(--on-dark);
  font-size: 14.5px;
  line-height: 1.4;
  opacity: 0.88;
  transition: opacity 160ms var(--ease);
}

.footer-links a:hover,
.footer-contact a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact p {
  color: var(--on-dark);
  font-size: 14.5px;
}

.footer-contact p + p {
  margin-top: 8px;
}

.footer-contact address {
  margin-top: 16px;
  color: var(--on-dark-3);
  font-size: 14px;
  line-height: 1.6;
}

.footer-profiles,
.footer-langs,
.footer-bottom {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-3);
  font-size: 13.5px;
}

.footer-profiles,
.footer-langs {
  gap: 8px 18px;
  padding-block: 18px;
}

.footer-profiles a,
.footer-langs a {
  color: var(--on-dark-2);
  transition: color 160ms var(--ease);
}

.footer-profiles a:hover,
.footer-langs a:hover {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-bottom {
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 22px 32px;
  font-size: 13px;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer-bottom a {
  color: var(--on-dark-2);
}

.footer-bottom a:hover {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer :focus-visible {
  outline-color: var(--on-dark);
}

/* ---------- Section intros with a label column ----------
 * On a wide screen a full-width section intro puts its label in the left quarter and the
 * heading beside it, on one rule, like the section dividers of a printed catalogue. */

@media (min-width: 1100px) {
  .container:not(.narrow) > .section-intro:has(> .eyebrow) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line-strong);
  }

  .container:not(.narrow) > .section-intro:has(> .eyebrow) > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    padding-top: 0.5em;
  }

  .container:not(.narrow) > .section-intro:has(> .eyebrow) > :not(.eyebrow) {
    grid-column: 2;
    max-width: 780px;
  }

  .topic-browse .container > .section-intro:has(> .eyebrow) {
    margin-bottom: 8px;
  }

  .topic-browse .topic-browse-group:first-of-type {
    border-top: 0;
  }

  /* FAQ: the heading holds the left third while the questions scroll past it. */
  .faq-section > .container.narrow {
    width: min(var(--container), 100% - 2 * var(--gutter));
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 6vw, 112px);
    align-items: start;
  }

  .faq-section .section-intro {
    position: sticky;
    top: calc(var(--header) + 36px);
    margin-bottom: 0;
  }

  .faq-section .section-intro p:not(.eyebrow) {
    font-size: 16.5px;
  }

  .faq-section > .container.narrow > * {
    max-width: none;
  }

  .container.narrow > .faq-group {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 6vw, 112px);
    align-items: start;
  }

  .faq-group > h2 {
    position: sticky;
    top: calc(var(--header) + 36px);
    margin-bottom: 0;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1240px) {
  .featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .fact-strip-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fact-strip-inner > div:nth-child(3n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .fact-strip-inner > div:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .factory-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-proof-grid article:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .factory-proof-grid article:nth-child(n + 3) {
    margin-top: 28px;
  }

  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 48px;
  }

  .home-page .category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-page .category-card {
    grid-column: span 3;
  }

  .home-page .category-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  .home-page .category-card:nth-child(n + 2) {
    grid-column: span 3;
  }

  .home-page .category-card:nth-child(n + 4) .category-image {
    aspect-ratio: 5 / 4;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  :root {
    --header: 68px;
  }

  /* A backdrop filter makes the header the containing block of the fixed menu. */
  .site-header {
    background: var(--porcelain);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
  }

  .site-nav {
    position: fixed;
    inset: var(--header) 0 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px var(--gutter) 40px;
    border-top: 1px solid var(--line);
    background: var(--porcelain);
    overflow-y: auto;
  }

  .site-nav a {
    flex-shrink: 0;
    min-height: 58px;
    padding: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 480;
    letter-spacing: -0.012em;
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a[aria-current="page"] {
    color: var(--glaze-700);
  }

  body.nav-open .site-nav {
    display: flex;
  }

  .nav-toggle {
    display: block;
    grid-column: 4;
    grid-row: 1;
  }

  .header-rfq {
    grid-column: 3;
    grid-row: 1;
  }

  .header-rfq span {
    display: none;
  }

  .header-rfq {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 28px 16px;
    gap: 8px;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-stage {
    width: min(560px, 100%);
    justify-self: center;
    margin-inline-end: 0;
  }

  .split,
  .two-column,
  .two-column.reversed,
  .category-support,
  .factory-intro-layout,
  .factory-principles-layout,
  .page-hero-inner,
  .catalog-page-hero-inner,
  .product-hero-inner,
  .contact-grid,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero-image {
    max-width: 560px;
  }

  .product-media {
    position: static;
  }

  .product-frame {
    max-width: 560px;
  }

  .catalog-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-sidebar-inner {
    position: static;
  }

  .catalog-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 0;
  }

  .catalog-nav a {
    display: inline-flex;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 14px;
  }

  .catalog-nav a[aria-current="page"] {
    padding-inline-start: 14px;
    border: 1px solid var(--glaze-700);
    background: var(--glaze-700);
    color: #fff;
  }

  .catalog-nav a[aria-current="page"] small {
    color: rgba(255, 255, 255, 0.8);
  }

  .article-aside {
    align-self: start;
  }

  .article-aside > .article-toc {
    position: static;
  }

  .cta-band-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .topic-browse-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-card > :not(.news-date) {
    grid-column: 1;
  }

  .news-date {
    grid-row: auto;
  }

  .photo-match {
    grid-template-columns: minmax(0, 1fr);
  }

  .photo-match-badge {
    width: 72px;
    height: 72px;
    --corner: 14px;
  }

  .photo-match-badge .icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 760px) {
  .home-page .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
  }

  .home-page .category-card,
  .home-page .category-card:nth-child(n + 2),
  .home-page .category-card:nth-child(n + 4) {
    grid-column: span 1;
  }

  .home-page .category-card:first-child {
    grid-column: 1 / -1;
    display: flex;
  }

  .home-page .category-card:nth-child(n + 2) .category-image {
    aspect-ratio: 1;
  }

  .home-page .category-card:nth-child(n + 2) h3 {
    font-size: 18px;
  }

  .home-page .category-card:nth-child(n + 2) p:not(.eyebrow),
  .home-page .category-card:nth-child(n + 2) .eyebrow {
    display: none;
  }

  .process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 6px;
  }

  .process-grid li {
    margin-inline-start: 16px;
    padding: 0 0 32px 40px;
    border-top: 0;
    border-inline-start: 1px solid var(--line-strong);
  }

  .process-grid li:last-child {
    padding-bottom: 0;
    border-inline-start-color: transparent;
  }

  .process-step {
    top: -4px;
    inset-inline-start: -16px;
  }

  .checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-proof-grid article,
  .factory-proof-grid article:nth-child(odd) {
    padding: 22px 0 0;
    border-inline-start: 0;
  }

  .factory-proof-grid article + article {
    margin-top: 22px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .site-header .brand-text {
    display: none;
  }

  .site-header .brand-logo {
    height: 46px;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 1.4rem + 5.6vw, 3.4rem);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 30px;
  }

  .hero-actions .button {
    padding-inline: 14px;
  }

  .hero-stage-caption .model-code {
    font-size: 18px;
  }

  .button {
    height: auto;
    min-height: 50px;
    padding-block: 12px;
    white-space: normal;
    text-align: center;
  }

  .fact-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-strip-inner > div,
  .fact-strip-inner > div:nth-child(3n + 1) {
    padding: 20px 0 22px 16px;
    border-inline-start: 1px solid var(--line);
  }

  .fact-strip-inner > div:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .fact-strip-inner > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .section-intro p:not(.eyebrow) {
    font-size: 17px;
  }

  .catalog-product-grid,
  .featured-grid,
  .related-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  .catalog-product-body {
    padding-top: 12px;
  }

  .catalog-product-descriptor {
    font-size: 13.5px;
  }

  .catalog-product-foot .chip-quiet {
    display: none;
  }

  .catalog-filter {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .catalog-hero-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .catalog-hero-panel div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    padding-bottom: 12px;
  }

  .catalog-hero-panel div:nth-child(3) {
    border-inline-start: 1px solid var(--line);
  }

  .spec-plate > div {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 11px 16px;
  }

  .spec-plate .spec-plate-head {
    padding: 16px;
  }

  .rfq-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .rfq-form .button {
    justify-self: stretch;
  }

  .rfq-sheet,
  [dir="rtl"] .rfq-sheet {
    top: auto;
    bottom: 0;
    inset-inline: 0;
    width: 100%;
    height: 92vh;
    height: min(92dvh, 860px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -24px 60px -24px rgba(15, 30, 26, 0.5);
    transform: translateY(100%);
  }

  .rfq-sheet-head {
    padding: 18px 20px 14px;
  }

  .rfq-sheet-body {
    padding: 18px 20px calc(32px + env(safe-area-inset-bottom));
  }

  .contact-direct-facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .factory-mini-photos {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-list summary {
    padding-block: 20px;
    font-size: 17.5px;
  }

  .faq-list summary::before,
  .faq-list summary::after {
    top: calc(20px + 0.62em);
  }

  .faq-list details p {
    padding-inline-end: 0;
    font-size: 16px;
  }

  .article-body p,
  .article-body ul,
  .article-body ol {
    font-size: 16.5px;
  }

  th,
  td {
    padding: 12px 14px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .sitemap-groups {
    columns: 1;
  }
}

/* ---------- Desktop header widths ----------
 * Nine nav items plus the brand and the RFQ button must stay on one row down to 961px.
 * English fits at 14.5px until 1440px; below that the row tightens step by step. */

@media (min-width: 961px) and (max-width: 1440px) {
  .header-inner {
    gap: 16px;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav a {
    padding: 0 9px;
    font-size: 14px;
  }

  .site-nav a::after {
    inset-inline: 9px;
  }
}

@media (min-width: 961px) and (max-width: 1320px) {
  .site-header .brand-text {
    display: none;
  }
}

@media (min-width: 961px) and (max-width: 1240px) {
  .site-nav a {
    padding: 0 7px;
    font-size: 13.5px;
  }

  .site-nav a::after {
    inset-inline: 7px;
  }

  .header-rfq {
    padding: 0 16px;
  }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .site-nav a {
    padding: 0 5px;
    font-size: 13px;
  }

  .site-nav a::after {
    inset-inline: 5px;
  }

  .header-rfq span {
    display: none;
  }

  .header-rfq {
    min-width: 42px;
    padding: 0 12px;
  }
}

/* Localized headers (Wave 7): translated labels run 20-45% wider than English, so these
   pages tighten sooner and fall back to the icon-only RFQ button up to 1440px. */
@media (min-width: 961px) {
  .site-header-i18n .site-nav a {
    padding: 0 7px;
    font-size: 13.5px;
  }

  .site-header-i18n .site-nav a::after {
    inset-inline: 7px;
  }

  .site-header-i18n .header-rfq {
    padding: 0 16px;
    font-size: 13px;
  }
}

@media (min-width: 961px) and (max-width: 1440px) {
  .site-header-i18n .header-rfq span {
    display: none;
  }

  .site-header-i18n .header-rfq {
    min-width: 42px;
    padding: 0 12px;
  }
}

@media (min-width: 961px) and (max-width: 1240px) {
  .site-header-i18n .site-nav a {
    padding: 0 4px;
    font-size: 12.5px;
  }

  .site-header-i18n .site-nav a::after {
    inset-inline: 4px;
  }
}

/* ---------- Right to left ---------- */

[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .site-nav a::after {
  transform-origin: right center;
}

@media (max-width: 760px) {
  .rfq-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--glaze-700);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 16px 32px -14px rgba(15, 30, 26, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 200ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
  }

  .rfq-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .rfq-lock .rfq-fab {
    opacity: 0;
    visibility: hidden;
  }

  /* Room under the last footer line for the button. */
  .footer-bottom {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rfq-thanks.is-open :is(.rfq-thanks-ring, .rfq-thanks-check) {
    animation-delay: 0s;
  }
}

/* ---------- Print: spec pages are printed for supplier files ---------- */

@media print {
  .site-header,
  .site-footer,
  .rfq-drawer,
  .rfq-thanks,
  .rfq-fab,
  .cta-band,
  .skip-link,
  .photo-match,
  .hero-actions,
  .product-actions,
  .article-aside,
  .catalog-sidebar,
  .catalog-filter,
  .topic-langs {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .section-muted,
  .page-hero,
  .article-hero,
  .product-hero {
    padding-block: 16pt;
    background: none;
  }

  .product-hero-inner,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .product-media {
    position: static;
    max-width: 60mm;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .table-wrap,
  .spec-plate,
  .answer-block,
  .rfq-panel {
    border-color: #999;
    break-inside: avoid;
  }
}