@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sc-subset.woff2") format("woff2");
}

@layer tokens {
  :root {
    /* Raw palette */
    --ink-950: #0b0f14;
    --ink-900: #111820;
    --graphite-800: #1a2129;
    --graphite-700: #27313b;
    --steel-500: #7f8a98;
    --steel-300: #b9c1ca;
    --steel-200: #d8dde3;
    --paper-50: #f6f7f8;
    --paper-0: #ffffff;
    --copper-700: #8e3f24;
    --copper-600: #a84e2e;
    --copper-500: #c46944;
    --copper-400: #d4774e;
    --data-blue-700: #244d64;
    --data-blue-600: #2f617d;
    --success-600: #2f7d5c;
    --danger-600: #a33a32;

    /* Type */
    --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-display: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --step--1: clamp(0.8125rem, 0.79rem + 0.12vi, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vi, 1.0625rem);
    --step-1: clamp(1.125rem, 1.05rem + 0.35vi, 1.375rem);
    --step-2: clamp(1.5rem, 1.3rem + 0.85vi, 2rem);
    --step-3: clamp(1.875rem, 1.55rem + 1.4vi, 2.75rem);
    --step-4: clamp(2.625rem, 2.1rem + 2.2vi, 3.5rem);
    --step-hero-compact: clamp(2.25rem, 1.8rem + 1.6vi, 3rem);

    /* Text roles: 12px captions, 13px metadata, 15px secondary body, 16px body */
    --text-caption: 0.75rem;
    --text-meta: 0.8125rem;
    --text-body-s: 0.9375rem;
    --text-ui: 0.9375rem;
    --text-body: 1rem;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-body-s: 1.6;
    --leading-body: 1.7;
    --tracking-label: 0.08em;

    /* Space */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: clamp(4.5rem, 7vw, 7.5rem);
    --container: 1240px;
    --gutter: clamp(1rem, 2.2vw, 2rem);

    /* Surfaces */
    --color-bg: var(--paper-0);
    --color-bg-subtle: var(--paper-50);
    --color-bg-dark: var(--ink-950);
    --color-surface: var(--paper-0);
    --color-surface-dark: var(--ink-900);
    --color-text: #1a2129;
    --color-text-muted: #5f6b76;
    --color-text-inverse: #e7eaee;
    --color-text-inverse-muted: #aeb7c2;
    --color-border: var(--steel-200);
    --color-border-dark: rgb(255 255 255 / 16%);
    --color-brand: var(--copper-600);
    --color-brand-hover: var(--copper-700);
    --color-brand-bright: var(--copper-400);
    --color-data: var(--data-blue-600);
    --color-focus: #1f6f8b;
    --focus-ring: 3px solid var(--color-focus);
    --radius-s: 3px;
    --radius-m: 6px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(11 15 20 / 5%), 0 12px 32px rgb(11 15 20 / 6%);
    --shadow-2: 0 18px 50px rgb(11 15 20 / 14%);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 240ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
  }
}

@layer reset, base, layout, components, pages, utilities;

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

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

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd { margin: 0; }

  ul,
  ol { margin: 0; padding: 0; list-style: none; }

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

  button,
  input,
  select,
  textarea { font: inherit; }

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

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
  }

  body {
    min-width: 320px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: var(--copper-400);
    color: var(--ink-950);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    color: inherit;
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-4); letter-spacing: -0.03em; }
  h2 { font-size: var(--step-3); letter-spacing: -0.025em; }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  p { text-wrap: pretty; }

  a.text-link {
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  a.text-link:hover { color: var(--color-brand-hover); }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
  }

  .skip-link {
    position: fixed;
    inset: 0.5rem auto auto 0.5rem;
    z-index: 1000;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-s);
    background: var(--paper-0);
    color: var(--ink-950);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--dur-fast) var(--ease);
  }

  .skip-link:focus { transform: translateY(0); }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

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

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

  .section {
    padding-block: var(--space-3xl);
  }

  .section--tight { padding-block: var(--space-2xl); }
  .section--dark {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
  }
  .section--subtle { background: var(--color-bg-subtle); }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: end;
    margin-bottom: var(--space-xl);
  }

  .section-head__title { max-width: 15ch; }
  .section-head__body {
    max-width: 58ch;
    color: var(--color-text-muted);
  }

  .section-head--stack { grid-template-columns: 1fr; }

  @media (max-width: 899px) {
    .section-head { grid-template-columns: 1fr; gap: var(--space-m); }
  }
}

@layer utilities {
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-brand);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: currentColor;
  }

  .muted { color: var(--color-text-muted); }
  .inverse-muted { color: var(--color-text-inverse-muted); }
  .mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  @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;
    }
    .js .reveal { opacity: 1; transform: none; }
  }
}

@layer components {
  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid color-mix(in srgb, var(--steel-200) 72%, transparent);
    background: color-mix(in srgb, var(--paper-0) 94%, transparent);
    backdrop-filter: blur(14px);
  }

  .header__inner {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: var(--space-l);
  }

  .brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
  }

  .brand__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--ink-900);
    background: var(--ink-950);
    color: var(--paper-0);
    font-size: var(--text-ui);
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .brand__name {
    display: grid;
    line-height: 1.12;
  }

  .brand__name strong { font-size: var(--text-body); letter-spacing: 0.04em; }
  .brand__name span {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.7vw, 1.6rem);
    margin-left: auto;
  }

  .site-nav a {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--text-ui);
    font-weight: 500;
    white-space: nowrap;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--color-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
  }

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

  .header__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: 0.5rem;
  }

  .lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.65rem;
    color: var(--color-text-muted);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .lang-switch:hover { color: var(--color-brand); }

  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
  }

  .menu-toggle svg { width: 20px; height: 20px; }

  @media (max-width: 1023px) {
    .header__inner { min-height: 64px; }
    .site-nav {
      position: absolute;
      inset: 100% 0 auto;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 0.75rem var(--gutter) 1.25rem;
      border-bottom: 1px solid var(--color-border);
      background: var(--paper-0);
      box-shadow: var(--shadow-1);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { min-height: 48px; border-bottom: 1px solid var(--color-border); }
    .site-nav a::after { display: none; }
    .menu-toggle { display: inline-flex; margin-left: auto; }
    .header__actions { margin-left: auto; }
  }

  @media (max-width: 520px) {
    .brand__name span { display: none; }
    .header__actions .button { display: none; }
  }

  /* Buttons */
  .button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-size: var(--text-ui);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
      border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  }

  .button:hover { transform: translateY(-1px); }
  .button:active { transform: translateY(0); }

  .button--primary {
    background: var(--color-brand);
    color: var(--paper-0);
  }
  .button--primary:hover { background: var(--color-brand-hover); }

  .button--light {
    background: var(--paper-0);
    color: var(--ink-950);
  }
  .button--light:hover { background: var(--paper-50); }

  .button--ghost {
    border-color: var(--color-border);
    color: var(--color-text);
  }
  .button--ghost:hover { border-color: var(--color-brand); color: var(--color-brand); }

  .button--inverse {
    border-color: var(--color-border-dark);
    color: var(--color-text-inverse);
  }
  .button--inverse:hover { border-color: var(--paper-0); background: rgb(255 255 255 / 8%); }

  .button--text {
    min-height: 44px;
    padding-inline: 0;
    color: var(--color-brand);
  }
  .button--text:hover { color: var(--color-brand-hover); }

  .button__arrow {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }

  /* Hero */
  .hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-950);
    color: var(--color-text-inverse);
  }

  .hero__media {
    position: absolute;
    inset: 0;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
  }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(11 15 20 / 92%) 0%, rgb(11 15 20 / 68%) 46%, rgb(11 15 20 / 24%) 100%),
      linear-gradient(0deg, rgb(11 15 20 / 48%) 0%, transparent 36%);
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: clamp(520px, 68vh, 760px);
    align-items: center;
    padding-block: clamp(5rem, 10vw, 9rem);
  }

  .hero__content { max-width: 800px; }

  .hero h1 {
    max-width: 13ch;
    font-size: var(--step-4);
    font-weight: 400;
    letter-spacing: -0.03em;
  }

  html[lang="en"] .hero h1 {
    font-size: clamp(2.375rem, 2rem + 1.6vi, 3.5rem);
    letter-spacing: -0.035em;
  }

  .hero__lede {
    max-width: 56ch;
    margin-top: var(--space-l);
    color: var(--color-text-inverse-muted);
    font-size: var(--step-1);
    line-height: 1.6;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--space-xl);
  }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.4rem;
    margin-top: var(--space-2xl);
    color: var(--color-text-inverse-muted);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hero__meta span::before {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    background: var(--copper-400);
  }

  .hero .breadcrumbs { color: var(--color-text-inverse-muted); }
  .hero .breadcrumbs a:hover { color: var(--paper-0); }
  .hero .breadcrumbs li + li::before { color: var(--color-border-dark); }

  .hero--compact .hero__inner { min-height: clamp(420px, 54vh, 600px); }
  .hero--compact h1 { max-width: 15ch; font-size: var(--step-hero-compact); }

  /* Page intro and breadcrumbs */
  .page-intro {
    padding-block: var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
  }

  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-l);
    color: var(--color-text-muted);
    font-size: var(--text-meta);
  }

  .breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
  .breadcrumbs li + li::before { content: "/"; color: var(--steel-300); }
  .breadcrumbs a:hover { color: var(--color-brand); }

  .page-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: var(--space-xl);
    align-items: end;
  }

  .page-intro h1 { max-width: 15ch; }
  .page-intro__lede { max-width: 60ch; color: var(--color-text-muted); }

  @media (max-width: 899px) {
    .page-intro__grid { grid-template-columns: 1fr; }
    .hero h1 { max-width: 12ch; }
    .hero__lede { font-size: var(--step-0); }
  }

  /* Cards and grids */
  .industry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .industry-card {
    position: relative;
    display: flex;
    min-height: 290px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: var(--space-l);
    background: var(--paper-0);
    isolation: isolate;
  }

  .industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(11 15 20 / 16%), rgb(11 15 20 / 82%)),
      var(--industry-image) center / cover no-repeat;
    opacity: 0.92;
    transition: transform var(--dur-slow) var(--ease);
  }

  .industry-card:hover::before { transform: scale(1.03); }

  .industry-card__index {
    color: var(--copper-400);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
  }

  .industry-card h3 {
    color: var(--paper-0);
    font-size: var(--step-1);
    font-weight: 500;
  }

  .industry-card p {
    margin-top: 0.45rem;
    color: rgb(255 255 255 / 72%);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  .industry-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-l);
    color: var(--paper-0);
    font-size: var(--text-body-s);
    font-weight: 600;
  }

  .industry-card:hover .industry-card__link { color: var(--copper-400); }

  @media (max-width: 1199px) {
    .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .industry-grid { grid-template-columns: 1fr; }
    .industry-card { min-height: 240px; }
  }

  .capability-grid,
  .material-grid,
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }

  .capability-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-l);
    border: 1px solid var(--color-border);
    background: var(--paper-0);
  }

  .capability-card__number {
    color: var(--color-brand);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
  }

  .capability-card h3 { margin-top: var(--space-xl); font-size: var(--step-1); }
  .capability-card p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  .material-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-l);
    border: 1px solid var(--color-border);
    background: var(--paper-0);
    transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  }

  .material-card:hover { border-color: var(--color-brand); transform: translateY(-2px); }
  .material-card__formula { color: var(--color-brand); font-size: var(--step-2); font-weight: 500; }
  .material-card h3 { margin-top: var(--space-s); font-size: var(--step-1); }
  .material-card p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .material-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-l); }

  .tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    line-height: var(--leading-snug);
  }

  .news-card {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-m);
  }

  .news-card__date {
    color: var(--color-text-muted);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-label);
  }
  .news-card h3 { margin-top: var(--space-s); font-size: var(--step-1); }
  .news-card p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .news-card__link { margin-top: var(--space-l); }

  @media (max-width: 1023px) {
    .capability-grid,
    .material-grid,
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .capability-grid,
    .material-grid,
    .news-grid { grid-template-columns: 1fr; }
  }

  /* Data display */
  .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .stat {
    padding: var(--space-l) var(--space-m);
    border-right: 1px solid var(--color-border);
  }
  .stat:last-child { border-right: 0; }
  .stat strong { display: block; font-size: var(--step-2); font-weight: 500; line-height: 1; }
  .stat span { display: block; margin-top: 0.5rem; color: var(--color-text-muted); font-size: var(--text-meta); }

  @media (max-width: 767px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
  }

  .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    background: var(--paper-0);
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body-s);
    white-space: nowrap;
  }

  .data-table th,
  .data-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .data-table th {
    background: var(--paper-50);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .data-table tbody tr:hover { background: color-mix(in srgb, var(--copper-400) 7%, transparent); }
  .data-table td:first-child { font-weight: 600; color: var(--color-text); }

  /* Process chain */
  .process-chain {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .process-chain span {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: var(--space-s);
    background: var(--paper-0);
    color: var(--color-text-muted);
    font-size: var(--text-meta);
    text-align: center;
  }

  .process-chain strong { color: var(--color-text); font-size: var(--text-body-s); font-weight: 600; }
  .process-chain small { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-snug); }
  .process-chain--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  @media (max-width: 899px) {
    .process-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .process-chain--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 479px) {
    .process-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-chain--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Timeline */
  .timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .timeline__item {
    padding: var(--space-l);
    background: var(--paper-0);
  }

  .timeline__year { color: var(--color-brand); font-size: var(--step-2); font-weight: 500; }
  .timeline__item p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  @media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } }

  /* CTA band */
  .cta-band {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-3xl);
    background: var(--ink-950);
    color: var(--color-text-inverse);
  }

  .cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgb(196 105 68 / 20%), transparent 42%);
    pointer-events: none;
  }

  .cta-band__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl);
    align-items: end;
  }

  .cta-band h2 { max-width: 18ch; }
  .cta-band p { max-width: 52ch; margin-top: var(--space-m); color: var(--color-text-inverse-muted); }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

  @media (max-width: 767px) {
    .cta-band__inner { grid-template-columns: 1fr; }
  }

  /* Footer */
  .site-footer {
    padding-block: var(--space-2xl) var(--space-l);
    background: var(--ink-950);
    color: var(--color-text-inverse);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 0.7fr);
    gap: var(--space-xl);
    padding-bottom: var(--space-2xl);
  }

  .footer__brand p {
    max-width: 34ch;
    margin-top: var(--space-m);
    color: var(--color-text-inverse-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .footer__brand .brand__mark { border-color: var(--color-border-dark); background: transparent; }
  .site-footer .brand__name span { color: var(--color-text-inverse-muted); }
  .footer__col h3 {
    color: var(--color-text-inverse);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }
  .footer__col ul { display: grid; gap: 0.65rem; margin-top: var(--space-m); }
  .footer__col a { color: var(--color-text-inverse-muted); font-size: var(--text-body-s); }
  .footer__col a:hover { color: var(--paper-0); }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s);
    padding-top: var(--space-l);
    border-top: 1px solid var(--color-border-dark);
    color: var(--color-text-inverse-muted);
    font-size: var(--text-caption);
  }

  .footer__bottom a:hover { color: var(--paper-0); }

  @media (max-width: 899px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .footer__grid { grid-template-columns: 1fr; }
  }

  /* Forms */
  .form {
    display: grid;
    gap: var(--space-m);
  }

  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }

  .field { display: grid; gap: 0.4rem; }
  .field label { font-size: var(--text-body-s); font-weight: 600; color: var(--color-text-muted); }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background: var(--paper-0);
    color: var(--color-text);
  }
  .field textarea { min-height: 140px; resize: vertical; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { border-color: var(--color-brand); outline: none; box-shadow: 0 0 0 3px rgb(168 78 46 / 18%); }
  .field__hint { color: var(--color-text-muted); font-size: var(--text-meta); }
  .field__consent {
    align-items: flex-start;
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .field__consent input {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    margin-top: 0.2rem;
    accent-color: var(--color-brand);
  }
  .form__status { min-height: 1.4em; color: var(--color-text-muted); font-size: var(--text-body-s); }
  .form__status.is-error { color: var(--danger-600); }
  .form__status.is-ok { color: var(--success-600); }

  @media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

  /* Filter */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-m);
    padding: var(--space-m) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .filter-bar .field { min-width: 160px; flex: 1 1 160px; }
  .filter-bar__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-meta); }

  /* Material passport */
  .passport {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .passport__visual {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--paper-50);
  }

  .passport__visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

  .passport__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
  }

  .passport__stat { padding: var(--space-m); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .passport__stat span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }
  .passport__stat strong { display: block; margin-top: 0.35rem; font-size: var(--step-1); font-weight: 500; }

  @media (max-width: 899px) { .passport { grid-template-columns: 1fr; } }

  /* Prose */
  .prose { max-width: 72ch; }
  .prose > * + * { margin-top: var(--space-m); }
  .prose h2 { margin-top: var(--space-2xl); font-size: var(--step-2); }
  .prose h3 { margin-top: var(--space-xl); font-size: var(--step-1); }
  .prose ul, .prose ol { display: grid; gap: 0.5rem; padding-left: 1.2rem; list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose blockquote { padding-left: var(--space-m); border-left: 2px solid var(--color-brand); color: var(--color-text-muted); }

  /* Misc */
  .rule { height: 1px; background: var(--color-border); }
  .stack { display: grid; gap: var(--space-m); }
  .cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
  @media (max-width: 899px) { .split { grid-template-columns: 1fr; } }
}

@layer pages {
  /* Home */
  .home-hero .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
    gap: var(--space-xl);
  }

  .home-hero__panel {
    align-self: end;
    justify-self: end;
    width: min(100%, 360px);
    border: 1px solid var(--color-border-dark);
    background: rgb(11 15 20 / 48%);
    backdrop-filter: blur(8px);
  }

  .home-hero__panel-head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border-dark);
    color: var(--color-text-inverse-muted);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }

  .home-hero__panel-list { display: grid; }
  .home-hero__panel-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border-dark);
    color: var(--color-text-inverse);
    font-size: var(--text-body-s);
  }
  .home-hero__panel-list a:last-child { border-bottom: 0; }
  .home-hero__panel-list a:hover { background: rgb(255 255 255 / 7%); color: var(--copper-400); }
  .home-hero__panel-list span { color: var(--color-text-inverse); font-size: var(--text-body-s); }
  .home-hero__panel-list strong { color: var(--color-text-inverse-muted); font-size: var(--text-body-s); }

  @media (max-width: 899px) {
    .home-hero .hero__inner { grid-template-columns: 1fr; }
    .home-hero .hero__inner { min-height: auto; padding-block: 4rem 3rem; }
    .home-hero__panel { display: none; }
  }
  @media (max-width: 560px) {
    .home-hero .hero__inner { padding-block: 3.25rem 2.5rem; }
  }

  .home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .home-intro h2 { max-width: 13ch; }
  .home-intro p { color: var(--color-text-muted); }

  @media (max-width: 899px) { .home-intro { grid-template-columns: 1fr; } }

  .industry-card[data-industry="display"] { --industry-image: url("/assets/images/display-hero-800.webp"); }
  .industry-card[data-industry="photovoltaics"] { --industry-image: url("/assets/images/photovoltaics-hero-800.webp"); }
  .industry-card[data-industry="large-area-glass"] { --industry-image: url("/assets/images/glass-hero-800.webp"); }
  .industry-card[data-industry="semiconductor"] { --industry-image: url("/assets/images/semiconductor-hero-800.webp"); }
  .industry-card[data-industry="consumer-electronics"] { --industry-image: url("/assets/images/consumer-hero-800.webp"); }

  /* Industry page */
  .industry-hero .hero__inner { min-height: clamp(460px, 60vh, 640px); }
  .industry-hero h1 { max-width: 12ch; }

  .industry-focus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .industry-focus__item {
    min-height: 180px;
    padding: var(--space-l);
    background: var(--paper-0);
  }

  .industry-focus__item span {
    display: block;
    color: var(--color-brand);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
  }

  .industry-focus__item h3 { margin-top: var(--space-l); font-size: var(--step-1); }
  .industry-focus__desc {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  @media (max-width: 767px) { .industry-focus { grid-template-columns: 1fr; } }

  .industry-materials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .industry-materials a {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-m);
    background: var(--paper-0);
    transition: background var(--dur-base) var(--ease);
  }

  .industry-materials a:hover { background: var(--paper-50); }
  .industry-materials strong { font-size: var(--step-1); font-weight: 600; }
  .industry-materials span { color: var(--color-text-muted); font-size: var(--text-meta); }

  @media (max-width: 1023px) { .industry-materials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .industry-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Materials */
  .materials-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .materials-sidebar {
    position: sticky;
    top: 96px;
    padding: var(--space-m);
    border: 1px solid var(--color-border);
    background: var(--paper-50);
  }

  .materials-sidebar h2 {
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }
  .materials-sidebar .field { margin-top: var(--space-m); }
  .materials-sidebar .field input,
  .materials-sidebar .field select {
    line-height: 1.4;
  }

  @media (min-width: 1024px) {
    .materials-sidebar .field input,
    .materials-sidebar .field select {
      font-size: var(--text-body-s);
    }
  }

  .materials-main { min-width: 0; }
  .material-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .material-index-grid .material-card { min-height: 230px; border: 0; }
  .material-index-grid .material-card.is-hidden { display: none; }
  .filter-empty {
    display: none;
    padding: var(--space-xl);
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
  }
  .filter-empty.is-visible { display: block; }

  @media (max-width: 1023px) {
    .materials-layout { grid-template-columns: 1fr; }
    .materials-sidebar { position: static; }
    .material-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) { .material-index-grid { grid-template-columns: 1fr; } }

  .material-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-l);
  }

  .material-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-xl);
    align-items: start;
  }

  .material-detail-grid > * { min-width: 0; }

  .material-detail-aside {
    position: sticky;
    top: 96px;
    padding: var(--space-l);
    border: 1px solid var(--color-border);
    background: var(--paper-50);
  }

  .material-detail-aside h2 { font-size: var(--step-1); }
  .material-detail-aside p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .material-detail-aside .button { width: 100%; margin-top: var(--space-m); }

  @media (max-width: 1023px) {
    .material-detail-grid { grid-template-columns: 1fr; }
    .material-detail-aside { position: static; }
  }

  /* About */
  .c3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .c3-item { padding: var(--space-l); background: var(--paper-0); }
  .c3-item strong { display: block; color: var(--color-brand); font-size: var(--step-2); font-weight: 500; }
  .c3-item h3 { margin-top: var(--space-s); font-size: var(--step-1); }
  .c3-item p {
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  @media (max-width: 767px) { .c3-grid { grid-template-columns: 1fr; } }

  .value-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .value-grid article {
    display: flex;
    min-height: 170px;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-m);
    background: var(--paper-0);
  }
  .value-grid h3 { font-size: var(--step-0); }
  .value-grid p {
    display: flex;
    align-items: center;
    /* Two lines at the 1.6 secondary-body line height keep every card content block equal. */
    min-height: 3.2em;
    margin-top: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

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

  /* Contact */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .contact-card {
    padding: var(--space-l);
    border: 1px solid var(--color-border);
    background: var(--paper-50);
  }

  .contact-card dl { display: grid; gap: var(--space-m); }
  .contact-card dt {
    color: var(--color-text-muted);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }
  .contact-card dd { margin-top: 0.15rem; font-size: var(--text-body); }
  .contact-card a:hover { color: var(--color-brand); }

  @media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }

  /* Resources */
  .resource-list {
    display: grid;
    border-top: 1px solid var(--color-border);
  }

  .resource-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .resource-item h3 { font-size: var(--step-1); }
  .resource-item p {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .resource-item__meta { color: var(--color-text-muted); font-size: var(--text-meta); text-align: right; }

  /* News */
  .news-list { display: grid; gap: var(--space-l); }
  .news-list .news-card { padding-block: var(--space-l); }

  .article-header { max-width: 760px; }
  .article-header h1 { max-width: 20ch; }
  .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--space-m);
    color: var(--color-text-muted);
    font-size: var(--text-meta);
  }

  /* Misc page blocks */
  .quote-block {
    padding: var(--space-xl);
    border-left: 2px solid var(--color-brand);
    background: var(--paper-50);
    font-size: var(--step-1);
    line-height: 1.5;
  }

  .two-col-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 2rem;
  }
  .two-col-list li {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-body-s);
  }

  @media (max-width: 640px) { .two-col-list { grid-template-columns: 1fr; } }
}