:root {
  --color-primary: #00723c;
  --color-primary-hover: #005e31;
  --color-brand-deep: #073f2b;

  --color-bg: #f7f9f7;
  --color-surface: #ffffff;
  --color-soft-green: #eaf3ee;
  --color-soft-green-light: #f1f7f3;

  --color-heading: #123126;
  --color-text: #53655d;
  --color-muted: #74837b;

  --color-text-on-dark: #ddebe3;
  --color-white: #ffffff;

  --color-border: rgba(0, 114, 60, 0.14);
  --color-border-strong: rgba(0, 114, 60, 0.24);

  --shadow-sm: 0 8px 24px rgba(18, 49, 38, 0.07);
  --shadow-md: 0 12px 32px rgba(18, 49, 38, 0.10);
  --shadow-hover: 0 16px 38px rgba(18, 49, 38, 0.13);

  --focus-ring: 0 0 0 3px rgba(0, 114, 60, 0.12);

  --ink: var(--color-heading);
  --muted: var(--color-muted);
  --paper: var(--color-bg);
  --surface: var(--color-surface);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --green: var(--color-primary);
  --green-dark: var(--color-primary-hover);
  --green-soft: var(--color-soft-green);
  --accent: var(--color-primary);
  --shadow: var(--shadow-md);
  --desktop-layout-min: 1180px;
  --desktop-page-gutter: clamp(24px, calc(24px + (100vw - var(--desktop-layout-min)) * 0.259), 216px);
  --privacy-page-gutter: clamp(24px, calc(24px + (100vw - var(--desktop-layout-min)) * 0.162), 144px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--paper);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-drag: none;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 0;
  box-shadow: 0 10px 28px rgba(18, 49, 38, 0.045);
  backdrop-filter: blur(14px);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 14px clamp(18px, 5vw, 72px);
}

.logo,
.nav-menu,
.hero-actions,
.section-actions {
  display: flex;
  align-items: center;
}

.logo {
  flex: 0 0 auto;
}

.logo img {
  display: block;
  width: 120px;
  max-width: 32vw;
  height: auto;
  object-fit: contain;
}

.nav-menu {
  gap: 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.nav-menu > a,
.nav-dropdown-link,
.nav-dropdown-toggle {
  position: relative;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.nav-menu > a,
.nav-dropdown-link {
  padding: 8px 0;
}

.nav-menu > a::after,
.nav-dropdown-link::after,
.nav-dropdown-toggle::before {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--color-primary);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-menu > a:hover,
.nav-menu > a:focus-visible,
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
  color: var(--green);
  transform: translateY(-1px);
}

.nav-menu > a:hover::after,
.nav-menu > a:focus-visible::after,
.nav-dropdown-link:hover::after,
.nav-dropdown-link:focus-visible::after,
.nav-dropdown-toggle:hover::before,
.nav-dropdown-toggle:focus-visible::before,
.nav-dropdown:focus-within .nav-dropdown-toggle::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-control {
  display: flex;
  align-items: center;
}

.nav-dropdown::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}

.nav-dropdown-toggle {
  min-height: 38px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nav-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-dropdown--linked .nav-dropdown-toggle {
  width: 28px;
  margin-left: 2px;
}

.nav-dropdown--linked .nav-dropdown-toggle::before {
  display: none;
}

.nav-dropdown--linked .nav-dropdown-toggle::after {
  margin-left: 0;
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 30;
  display: grid;
  width: 250px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  gap: 2px;
}

.nav-dropdown-panel a {
  padding: 10px 12px;
  border-radius: 6px;
}

.nav-products-panel {
  width: 292px;
}

.nav-dropdown-label {
  display: block;
  padding: 10px 12px 5px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-dropdown-label:not(:first-child) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: var(--green-soft);
}

.language-select {
  position: relative;
}

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

.language-toggle,
.language-menu button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  color: var(--ink);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.language-toggle {
  min-width: 86px;
  padding: 0 9px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.language-toggle::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-select.is-open .language-toggle {
  border-color: rgba(0, 114, 60, 0.5);
  box-shadow: 0 8px 18px rgba(18, 49, 38, 0.09);
  transform: translateY(-1px);
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  width: 124px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.language-select.is-open .language-menu,
.language-select:focus-within .language-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.language-menu button {
  width: 100%;
  padding: 8px;
  text-align: left;
  border-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.language-menu button:hover,
.language-menu button:focus-visible,
.language-menu button[aria-selected="true"] {
  background: var(--green-soft);
  border-color: rgba(0, 114, 60, 0.28);
}

.flag {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(18, 49, 38, 0.18);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.flag-us {
  background: repeating-linear-gradient(to bottom, #b22234 0 1px, #fff 1px 2px);
}

.flag-us::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 8px;
  content: "";
  background: #3c3b6e;
}

.flag-vn {
  background: #da251d;
}

.flag-vn::before {
  position: absolute;
  top: 3px;
  left: 6px;
  color: #ffde00;
  content: "";
  width: 6px;
  height: 6px;
  background: #ffde00;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 68% 56%, 80% 100%, 50% 72%, 20% 100%, 32% 56%, 0 35%, 38% 35%);
}

.flag-id {
  background: linear-gradient(to bottom, #ce1126 0 50%, #fff 50% 100%);
}

.flag-es {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.flag-br {
  background: #009b3a;
}

.flag-br::before {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 8px;
  height: 8px;
  content: "";
  background: #ffdf00;
  transform: rotate(45deg);
}

.flag-br::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 5px;
  content: "";
  background: #002776;
  border-radius: 50%;
}

.flag-ru {
  background: linear-gradient(to bottom, #fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66% 100%);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--color-surface);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-heading);
}

.hero,
.featured-solution,
.outdoor-doming,
.custom-formulation,
.export-support,
.rfq-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}

.featured-solution {
  grid-template-columns: minmax(0, 5fr) minmax(380px, 7fr);
  gap: clamp(36px, 5vw, 72px);
  background: var(--color-soft-green);
}

.hero {
  min-height: calc(100vh - 74px);
  padding: clamp(48px, 8vw, 96px) clamp(18px, 5vw, 72px) clamp(34px, 5vw, 56px);
  background: var(--color-bg);
}

.application-solutions,
.featured-solution,
.outdoor-doming,
.product-systems,
.production-problems,
.custom-formulation,
.b2b-support,
.workflow,
.export-support,
.rfq-form {
  position: relative;
  padding: clamp(58px, 7vw, 96px) clamp(18px, 5vw, 72px);
  border-top: 0;
}

.featured-solution,
.custom-formulation,
.workflow,
.rfq-form,
.choice-process,
.solution-matrix,
.doming-selector-section,
.doming-production,
.doming-custom,
.doming-rfq,
.craft-selector-section,
.craft-sample,
.craft-custom,
.craft-pour-guidance,
.river-selector-section,
.river-guidance,
.river-comparison,
.river-sample,
.river-custom,
.flooring-selector-section,
.flooring-guidance,
.flooring-limitations,
.flooring-sample,
.flooring-custom,
.products-compact-custom,
.products-primary,
.products-overview,
.products-sample,
.craft-rfq {
  position: relative;
  isolation: isolate;
}

.featured-solution > *,
.custom-formulation > *,
.workflow > *,
.rfq-form > *,
.choice-process > *,
.solution-matrix > *,
.doming-selector-section > *,
.doming-production > *,
.doming-custom > *,
.doming-rfq > *,
.craft-selector-section > *,
.craft-sample > *,
.craft-custom > *,
.craft-pour-guidance > *,
.river-selector-section > *,
.river-guidance > *,
.river-comparison > *,
.river-sample > *,
.river-custom > *,
.flooring-selector-section > *,
.flooring-guidance > *,
.flooring-limitations > *,
.flooring-sample > *,
.flooring-custom > *,
.products-compact-custom > *,
.products-primary > *,
.products-overview > *,
.products-sample > *,
.craft-rfq > * {
  position: relative;
  z-index: 1;
}

.featured-solution::before,
.custom-formulation::before,
.workflow::before,
.rfq-form::before,
.choice-process::before,
.solution-matrix::before,
.doming-selector-section::before,
.doming-production::before,
.doming-custom::before,
.doming-rfq::before,
.craft-selector-section::before,
.craft-sample::before,
.craft-custom::before,
.craft-pour-guidance::before,
.river-selector-section::before,
.river-guidance::before,
.river-comparison::before,
.river-sample::before,
.river-custom::before,
.flooring-selector-section::before,
.flooring-guidance::before,
.flooring-limitations::before,
.flooring-sample::before,
.flooring-custom::before,
.products-compact-custom::before,
.products-primary::before,
.products-overview::before,
.products-sample::before,
.craft-rfq::before,
.featured-solution::after,
.custom-formulation::after,
.workflow::after,
.rfq-form::after,
.choice-process::after,
.solution-matrix::after,
.doming-selector-section::after,
.doming-production::after,
.doming-custom::after,
.doming-rfq::after,
.craft-selector-section::after,
.craft-sample::after,
.craft-custom::after,
.craft-pour-guidance::after,
.river-selector-section::after,
.river-guidance::after,
.river-comparison::after,
.river-sample::after,
.river-custom::after,
.flooring-selector-section::after,
.flooring-guidance::after,
.flooring-limitations::after,
.flooring-sample::after,
.flooring-custom::after,
.products-compact-custom::after,
.products-primary::after,
.products-overview::after,
.products-sample::after,
.craft-rfq::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  height: clamp(30px, 4vw, 58px);
  content: "";
  pointer-events: none;
}

.featured-solution::before,
.custom-formulation::before,
.workflow::before,
.rfq-form::before,
.choice-process::before,
.solution-matrix::before,
.doming-selector-section::before,
.doming-production::before,
.doming-custom::before,
.doming-rfq::before,
.craft-selector-section::before,
.craft-sample::before,
.craft-custom::before,
.craft-pour-guidance::before,
.river-selector-section::before,
.river-guidance::before,
.river-comparison::before,
.river-sample::before,
.river-custom::before,
.flooring-selector-section::before,
.flooring-guidance::before,
.flooring-limitations::before,
.flooring-sample::before,
.flooring-custom::before,
.products-compact-custom::before,
.products-primary::before,
.products-overview::before,
.products-sample::before,
.craft-rfq::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg), rgba(247, 249, 247, 0));
}

.featured-solution::after,
.custom-formulation::after,
.workflow::after,
.rfq-form::after,
.choice-process::after,
.solution-matrix::after,
.doming-selector-section::after,
.doming-production::after,
.doming-custom::after,
.doming-rfq::after,
.craft-selector-section::after,
.craft-sample::after,
.craft-custom::after,
.craft-pour-guidance::after,
.river-selector-section::after,
.river-guidance::after,
.river-comparison::after,
.river-sample::after,
.river-custom::after,
.flooring-selector-section::after,
.flooring-guidance::after,
.flooring-limitations::after,
.flooring-sample::after,
.flooring-custom::after,
.products-compact-custom::after,
.products-primary::after,
.products-overview::after,
.products-sample::after,
.craft-rfq::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg), rgba(247, 249, 247, 0));
}

.section-kicker {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  color: var(--color-heading);
}

h1 {
  max-width: 860px;
  margin-bottom: 22px;
  font-size: clamp(40px, 5.6vw, 72px);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(29px, 3.8vw, 46px);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 660;
  line-height: 1.07;
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.2;
}

.hero-subtitle,
.section-heading p,
.featured-copy p,
.custom-formulation p,
.b2b-support p,
.export-support p,
.rfq-copy p,
.problem-action p {
  max-width: 720px;
  color: var(--muted);
  font-size: 18px;
}

.hero-actions,
.section-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.btn-primary {
  color: var(--color-white);
  background: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 10px 24px rgba(0, 114, 60, 0.24);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px) scale(1.015);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn-secondary {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--color-primary-hover);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 114, 60, 0.58);
  box-shadow: 0 8px 20px rgba(18, 49, 38, 0.09);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-card,
.workflow-grid article,
.form-panel {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.trust-row div {
  min-height: 88px;
  padding: 16px 20px;
}

.trust-row div + div {
  border-left: 1px solid var(--line);
}

.trust-row span,
.feature-number {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.trust-row dt {
  margin-bottom: 0;
  font-weight: 800;
  line-height: 1.35;
}

.trust-row dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.hero-media,
.featured-media {
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.featured-media-layered {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(420px, 48vw, 680px);
  align-items: stretch;
}

.featured-media-layered::before {
  position: absolute;
  inset: 7% 10% 11% 14%;
  background:
    radial-gradient(circle at 18% 26%, rgba(0, 114, 60, 0.14), transparent 42%),
    radial-gradient(circle at 78% 70%, rgba(18, 49, 38, 0.07), transparent 34%);
  border-radius: 30px;
  filter: blur(18px);
  content: "";
  pointer-events: none;
}

.featured-media-ornament {
  position: absolute;
  inset: 10% 4% 16% 8%;
  border: 1px solid rgba(18, 49, 38, 0.08);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(0, 114, 60, 0.1), transparent 36%),
    linear-gradient(rgba(18, 49, 38, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 38, 0.045) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  opacity: 0.85;
  transform: rotate(-3deg);
  pointer-events: none;
}

.featured-media-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(0, 114, 60, 0.14), transparent 28%),
    radial-gradient(circle at 80% 76%, rgba(0, 114, 60, 0.1), transparent 24%);
  opacity: 0.7;
  pointer-events: none;
}

.hero-media,
.featured-media {
  aspect-ratio: 4 / 3;
  padding: 6px;
  box-shadow: 0 16px 32px rgba(18, 49, 38, 0.1);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.featured-media {
  position: relative;
  isolation: isolate;
  width: 100%;
  justify-self: end;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.72);
  border-radius: 18px;
  box-shadow: 0 26px 56px rgba(18, 49, 38, 0.16);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.featured-media::after {
  position: absolute;
  z-index: 1;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.featured-media-layered .featured-media::after {
  display: none;
}

.hero-media img,
.featured-media img {
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: contain;
  transform: scale(1);
  transition: transform 320ms ease;
}

.featured-media img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 320ms ease;
}

.featured-media-main {
  position: relative;
  z-index: 2;
  width: 85%;
  justify-self: start;
  align-self: center;
}

.featured-media-main img {
  transform: translate3d(calc(var(--media-x, 0px) * 0.45), calc(var(--media-y, 0px) * 0.45), 0) scale(1.01);
}

.featured-media-inset {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 4%;
  width: min(31%, 240px);
  aspect-ratio: 4 / 5;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 56px rgba(18, 49, 38, 0.18);
}

.featured-media-inset img {
  border-radius: 14px;
  transform: translate3d(calc(var(--media-x, 0px) * -0.65), calc(var(--media-y, 0px) * -0.65), 0) scale(1.02);
}

.featured-media-layered:hover .featured-media-main,
.featured-media-layered:focus-within .featured-media-main {
  transform: translate3d(calc(var(--media-x, 0px) * 0.5), calc(var(--media-y, 0px) * 0.5), 0) translateY(-2px);
}

.featured-media-layered:hover .featured-media-inset,
.featured-media-layered:focus-within .featured-media-inset {
  transform: translate3d(calc(var(--media-x, 0px) * -0.35), calc(var(--media-y, 0px) * -0.35), 0) translateY(-3px) rotate(0.6deg);
}

@media (hover: hover) and (pointer: fine) {
  .hero-media:hover,
  .doming-hero-media:hover,
  .support-media:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.2), 17px 19px 0 rgba(0, 114, 60, 0.12);
    transform: translateY(-4px);
  }

  .hero-media:hover img,
  .doming-hero-media:hover img,
  .support-media:hover img {
    transform: scale(1.025);
  }

  .solutions-hero-visual img:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.2), 17px 19px 0 rgba(0, 114, 60, 0.12);
    transform: translateY(-4px) scale(1.025);
  }

  .featured-media:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.2), 17px 19px 0 rgba(0, 114, 60, 0.12);
    transform: translateY(-4px);
  }

  .featured-media:hover img {
    transform: scale(1.025);
  }
}

/* Custom Formulation page */
.custom-formulation-page {
  --cfp-bg: var(--color-bg);
  --cfp-surface: var(--color-surface);
  --cfp-soft: var(--color-soft-green);
  --cfp-ink: var(--color-heading);
  --cfp-text: var(--color-text);
  --cfp-muted: var(--color-muted);
  --cfp-accent: var(--color-primary);
  --cfp-accent-dark: var(--color-primary-hover);
  --cfp-border: var(--color-border);
  --cfp-border-strong: var(--color-border-strong);
  background: var(--cfp-bg);
}

.cfp-hero,
.cfp-section,
.cfp-rfq {
  width: min(100% - var(--desktop-page-gutter), 1480px);
  margin-inline: auto;
}

.cfp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.82fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
  min-height: auto;
  padding: clamp(18px, 3vw, 42px) 0 clamp(34px, 5vw, 68px);
  background:
    radial-gradient(circle at 82% 16%, rgba(0, 114, 60, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(247, 249, 247, 0));
}

.cfp-hero-copy {
  max-width: 760px;
}

.cfp-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--cfp-ink);
  font-size: clamp(42px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.cfp-hero .hero-subtitle {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--cfp-text);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.62;
}

.cfp-qualification-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: clamp(28px, 4vw, 46px) 0 0;
  list-style: none;
}

.cfp-qualification-list li {
  position: relative;
  min-height: 58px;
  padding: 15px 16px 15px 44px;
  color: var(--cfp-ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--cfp-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18, 49, 38, 0.055);
}

.cfp-qualification-list li::before {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 14px;
  height: 14px;
  content: "";
  background: var(--cfp-accent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.72);
}

.cfp-brief-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 100% 0%, rgba(0, 114, 60, 0.11), transparent 34%);
  border: 1px solid var(--cfp-border);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(18, 49, 38, 0.13);
}

.cfp-brief-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(0, 114, 60, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 60, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.72), transparent 72%);
}

.cfp-brief-header {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cfp-border);
}

.cfp-brief-header p {
  margin: 0 0 8px;
  color: var(--cfp-accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.cfp-brief-header h2 {
  margin: 0;
  color: var(--cfp-ink);
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cfp-brief-panel dl {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
}

.cfp-brief-panel dl div {
  display: grid;
  grid-template-columns: minmax(118px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 114, 60, 0.12);
}

.cfp-brief-panel dt {
  color: var(--cfp-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cfp-brief-panel dd {
  margin: 0;
  color: var(--cfp-ink);
  font-weight: 650;
  line-height: 1.45;
}

.cfp-brief-panel > p {
  margin: 22px 0 0;
  color: var(--cfp-muted);
  font-size: 14px;
}

.cfp-visual-card {
  position: relative;
  padding: 0;
  margin: 0;
}

.cfp-visual-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(18, 49, 38, 0.1);
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cfp-image-placeholder {
  position: relative;
  display: grid;
  min-height: 220px;
  overflow: hidden;
  place-items: end start;
  padding: 22px;
  color: var(--cfp-ink);
  background:
    linear-gradient(135deg, rgba(18, 49, 38, 0.08), rgba(0, 114, 60, 0.08)),
    radial-gradient(circle at 82% 18%, rgba(0, 114, 60, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 238, 0.88));
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(18, 49, 38, 0.1);
  isolation: isolate;
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cfp-image-placeholder::before {
  position: absolute;
  inset: 16px;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(0, 114, 60, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 60, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.78), transparent 76%);
}

.cfp-image-placeholder::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 92px;
  height: 92px;
  content: "";
  background: radial-gradient(circle, rgba(0, 114, 60, 0.16), transparent 66%);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 50%;
}

.cfp-image-placeholder span {
  position: relative;
  z-index: 1;
  max-width: 240px;
  color: var(--cfp-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cfp-visual-card figcaption {
  margin-top: 10px;
  color: var(--cfp-muted);
  font-size: 12px;
  font-weight: 750;
}

.cfp-hero-visual {
  margin-top: 22px;
}

.cfp-hero-visual img {
  min-height: 180px;
  aspect-ratio: 16 / 8.5;
}

.cfp-hero-visual .cfp-image-placeholder {
  min-height: 180px;
}

.cfp-section,
.cfp-rfq {
  padding: clamp(42px, 5.5vw, 76px) 0;
}

.cfp-section {
  position: relative;
}

.cfp-section > .section-heading {
  max-width: 840px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.cfp-section > .section-heading h2,
.cfp-section h2 {
  color: var(--cfp-ink);
  letter-spacing: -0.03em;
}

.cfp-project-fit,
.cfp-directions,
.cfp-builder,
.cfp-sample,
.cfp-oem,
.cfp-rfq {
  background: transparent;
}

.cfp-fit-layout,
.cfp-oem,
.cfp-standard-products,
.cfp-rfq {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.cfp-fit-layout article,
.cfp-tradeoff-grid article,
.cfp-prep-grid article,
.cfp-factor-grid article {
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.055);
}

.cfp-fit-layout article {
  padding: clamp(24px, 3vw, 34px);
}

.cfp-fit-visual {
  grid-column: 1 / -1;
}

.cfp-fit-flow-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.28fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  min-height: 224px;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(234, 243, 238, 0.58), rgba(248, 250, 252, 0.86) 48%, rgba(255, 255, 255, 0.98)),
    var(--cfp-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 20px;
  box-shadow: 0 24px 58px rgba(18, 49, 38, 0.085);
  isolation: isolate;
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cfp-fit-flow-card::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(rgba(0, 114, 60, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 60, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cfp-fit-flow-card::after {
  position: absolute;
  inset: auto 10% -54px auto;
  z-index: -1;
  width: 260px;
  height: 160px;
  content: "";
  background: radial-gradient(circle, rgba(0, 114, 60, 0.16), transparent 68%);
  filter: blur(10px);
}

.cfp-flow-panel {
  min-height: 136px;
  padding: clamp(18px, 2.4vw, 26px);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(18, 49, 38, 0.08);
  backdrop-filter: blur(14px);
  transition: border-color 240ms ease, box-shadow 260ms ease;
}

.cfp-flow-panel span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--cfp-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.cfp-flow-panel strong {
  display: block;
  color: var(--cfp-ink);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.cfp-flow-panel p {
  margin: 12px 0 0;
  color: var(--cfp-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cfp-flow-connector {
  position: relative;
  display: grid;
  min-height: 84px;
  place-items: center;
}

.cfp-flow-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(0, 114, 60, 0.34);
  transform: translateY(-50%);
}

.cfp-flow-line::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 11px;
  height: 11px;
  content: "";
  border-top: 2px solid rgba(0, 114, 60, 0.62);
  border-right: 2px solid rgba(0, 114, 60, 0.62);
  transform: translateY(-50%) rotate(45deg);
}

.cfp-flow-pulse {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  background: var(--cfp-accent);
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(0, 114, 60, 0.1);
  animation: cfp-flow-pulse 2.6s ease-in-out infinite;
}

@keyframes cfp-flow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 8px rgba(0, 114, 60, 0.1);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(0, 114, 60, 0.02);
    transform: scale(1.06);
  }
}

.cfp-fit-layout h3,
.cfp-tradeoff-grid h3,
.cfp-prep-grid h3,
.cfp-factor-grid h3 {
  margin: 0 0 18px;
  color: var(--cfp-ink);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cfp-check-list,
.cfp-limit-list,
.cfp-oem-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cfp-check-list li,
.cfp-limit-list li,
.cfp-oem-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 13px 14px 13px 42px;
  color: var(--cfp-text);
  background: rgba(234, 243, 238, 0.42);
  border: 1px solid rgba(0, 114, 60, 0.11);
  border-radius: 12px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.cfp-check-list li::before,
.cfp-oem-list li::before {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 16px;
  height: 16px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg%20t%3D%221784794233023%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%222763%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M512%201017.279c-279.061%200-505.282-226.223-505.282-505.282s226.221-505.279%20505.282-505.279c279.059%200%20505.282%20226.223%20505.282%20505.282s-226.223%20505.279-505.282%20505.279zM512%2069.878c-244.169%200-442.122%20197.949-442.122%20442.122s197.952%20442.119%20442.122%20442.119c244.169%200%20442.119-197.949%20442.119-442.119s-197.949-442.122-442.119-442.122zM556.841%20512.164l133.803%20133.827c12.337%2012.316%2012.337%2032.32%200%2044.653-12.333%2012.337-32.337%2012.337-44.653%200l-133.827-133.803-134.708%20134.708c-12.439%2012.437-32.587%2012.437-45.005%200-12.439-12.437-12.439-32.587%200-45.007l134.708-134.727-133.806-133.806c-12.335-12.335-12.335-32.32%200-44.657%2012.337-12.333%2032.32-12.333%2044.657%200l133.806%20133.806%20135.716-135.716c12.437-12.419%2032.587-12.419%2045.007%200%2012.437%2012.437%2012.437%2032.587%200%2045.026l-135.7%20135.698z%22%20fill%3D%22%230b6b50%22%20p-id%3D%222764%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
}

.cfp-limit-list li::before {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 12px;
  height: 2px;
  content: "";
  background: rgba(18, 49, 38, 0.42);
  transform: translateY(-50%);
}

.cfp-fit-cta {
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 15px 12px 17px;
  margin-top: clamp(20px, 3vw, 30px);
  color: var(--cfp-accent-dark);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.82), rgba(255, 255, 255, 0.94)),
    var(--cfp-surface);
  border: 1px solid rgba(0, 114, 60, 0.2);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(18, 49, 38, 0.07);
}

.cfp-fit-cta::before {
  display: none;
}

.cfp-fit-cta::after {
  display: inline-grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  margin-left: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 50%;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20t%3D%221784794605410%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%224102%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M729.6%20448H128v85.333333h601.6L597.333333%20665.6l59.733334%2059.733333%20234.666666-234.666666L661.333333%20256l-59.733333%2059.733333%20128%20132.266667z%22%20fill%3D%22%230b6b50%22%20p-id%3D%224103%22%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.cfp-application-matrix,
.cfp-direction-table,
.cfp-tradeoff-grid,
.cfp-prep-grid,
.cfp-factor-grid {
  display: grid;
  gap: 16px;
}

.cfp-application-matrix {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cfp-application-matrix article {
  display: grid;
  gap: 12px;
  min-height: 230px;
  padding: 24px;
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.052);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cfp-direction-table > article span,
.cfp-direction-row span,
.cfp-product-directory a {
  color: var(--cfp-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cfp-application-matrix h3 {
  align-self: end;
  margin: 0;
  color: var(--cfp-ink);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.cfp-application-matrix p {
  margin: 0;
  color: var(--cfp-muted);
}

.cfp-direction-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cfp-direction-table > article,
.cfp-direction-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
  min-height: 0;
  padding: 16px 17px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(18, 49, 38, 0.045);
  transition: background-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.cfp-direction-table > article:nth-child(2n),
.cfp-direction-row:nth-child(2n) {
  border-right: 1px solid rgba(0, 114, 60, 0.12);
}

.cfp-direction-table > article:nth-last-child(-n + 2),
.cfp-direction-row:last-child {
  border-bottom: 1px solid rgba(0, 114, 60, 0.12);
}

.cfp-direction-table > article h3,
.cfp-direction-row h3 {
  margin: 0;
  color: var(--cfp-ink);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.18;
}

.cfp-direction-table > article p,
.cfp-direction-row p {
  margin: 0;
  color: var(--cfp-muted);
  font-size: 13px;
  line-height: 1.48;
}

.cfp-engineering-note,
.cfp-warning-note {
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 18px 20px;
  color: var(--cfp-ink);
  background: rgba(234, 243, 238, 0.72);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 14px;
}

.cfp-warning-note {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(18, 49, 38, 0.16);
}

.cfp-formula-library-note {
  max-width: 860px;
}

.cfp-tradeoff-grid,
.cfp-factor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cfp-factor-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cfp-tradeoff-grid article,
.cfp-factor-grid article,
.cfp-prep-grid article {
  padding: clamp(22px, 2.6vw, 30px);
}

.cfp-factor-grid article {
  padding: clamp(18px, 1.9vw, 24px);
}

.cfp-factor-grid h3 {
  margin-bottom: 12px;
  font-size: clamp(16px, 1.2vw, 19px);
}

.cfp-factor-grid p {
  font-size: 14px;
  line-height: 1.62;
}

.cfp-tradeoff-grid p,
.cfp-factor-grid p,
.cfp-prep-grid p {
  margin: 0;
  color: var(--cfp-muted);
}

.cfp-process-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.06);
}

.cfp-process-list li {
  position: relative;
  min-height: 250px;
  padding: 28px 24px;
  border-right: 1px solid var(--cfp-border);
}

.cfp-process-list li:last-child {
  border-right: 0;
}

.cfp-process-list span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 42px;
  color: var(--cfp-accent);
  background: rgba(0, 114, 60, 0.09);
  border: 1px solid rgba(0, 114, 60, 0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.cfp-process-list h3 {
  margin: 0 0 10px;
  color: var(--cfp-ink);
  font-size: 17px;
  line-height: 1.22;
}

.cfp-process-list p {
  margin: 0;
  color: var(--cfp-muted);
  font-size: 14px;
}

.cfp-section-visual-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.58fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.cfp-section-visual-layout > .section-heading {
  max-width: 760px;
  margin-bottom: 0;
}

.cfp-sample-placeholder {
  min-height: 260px;
  aspect-ratio: 4 / 3;
}

.cfp-sample-image {
  min-height: 260px;
  aspect-ratio: 4 / 3;
}

.cfp-sample > .btn {
  margin-top: clamp(26px, 3.4vw, 42px);
}

.cfp-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.38fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.cfp-builder-fields {
  display: grid;
  gap: 18px;
}

.cfp-builder-step {
  padding: clamp(22px, 3vw, 32px);
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(18, 49, 38, 0.052);
}

.cfp-builder-step legend {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 10px 0 0;
  color: var(--cfp-ink);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.2;
}

.cfp-builder-step legend span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--cfp-accent);
  background: rgba(0, 114, 60, 0.09);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.cfp-builder-hint {
  margin: 12px 0 16px;
  color: var(--cfp-muted);
  font-size: 14px;
}

.cfp-option-grid,
.cfp-builder-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.cfp-option-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cfp-option-grid label,
.cfp-inline-field,
.cfp-builder-input-grid label {
  display: grid;
  gap: 9px;
  color: var(--cfp-ink);
  font-weight: 750;
}

.cfp-option-grid label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  padding: 14px 15px;
  background: rgba(247, 249, 247, 0.8);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cfp-option-grid input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cfp-accent);
}

.cfp-option-grid label:has(input:checked) {
  color: var(--cfp-accent-dark);
  background: rgba(234, 243, 238, 0.92);
  border-color: rgba(0, 114, 60, 0.34);
  box-shadow: 0 12px 28px rgba(0, 114, 60, 0.09);
}

.cfp-inline-field,
.cfp-builder-input-grid label {
  margin-top: 18px;
  color: var(--cfp-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.cfp-inline-field input,
.cfp-builder-input-grid input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--cfp-ink);
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 10px;
  font: inherit;
}

.cfp-builder-summary,
.cfp-form-summary {
  position: sticky;
  top: 96px;
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.74)),
    var(--cfp-surface);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(18, 49, 38, 0.11);
}

.cfp-builder-summary h3 {
  margin: 0;
  color: var(--cfp-ink);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cfp-builder-summary dl {
  display: grid;
  gap: 0;
  margin: 24px 0;
}

.cfp-builder-summary dl div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 114, 60, 0.12);
}

.cfp-builder-summary dt {
  color: var(--cfp-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cfp-builder-summary dd {
  margin: 0;
  color: var(--cfp-ink);
  font-weight: 700;
  line-height: 1.45;
}

.cfp-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cfp-summary-actions .btn {
  min-height: 44px;
  padding: 12px 17px;
  font-size: 13px;
}

.custom-formulation-page .cfp-summary-actions button.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  color: var(--cfp-accent);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(18, 49, 38, 0.055);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.custom-formulation-page .cfp-summary-actions button[data-cfp-clear-brief] {
  color: var(--cfp-muted);
  background: rgba(247, 249, 247, 0.82);
  border-color: rgba(18, 33, 38, 0.12);
}

.custom-formulation-page .cfp-summary-actions button.text-link::before,
.custom-formulation-page .cfp-summary-actions button.text-link::after {
  display: none;
  content: none;
}

.cfp-copy-status {
  margin: 16px 0 0;
  color: var(--cfp-accent-dark);
  font-weight: 750;
}

.cfp-prep-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cfp-oem {
  padding: clamp(46px, 6vw, 76px);
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.86fr) minmax(0, 0.9fr);
  margin-bottom: clamp(42px, 6vw, 78px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.92), rgba(255, 255, 255, 0.72)),
    var(--cfp-soft);
  border: 1px solid rgba(0, 114, 60, 0.15);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(18, 49, 38, 0.075);
}

.cfp-oem-copy h2 {
  margin-top: 0;
}

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

.cfp-oem-placeholder {
  min-height: 300px;
  aspect-ratio: 1 / 1;
}

.cfp-oem-image {
  min-height: 300px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: var(--cfp-surface);
  object-fit: contain;
}

.cfp-standard-products {
  align-items: center;
  padding: clamp(38px, 5vw, 62px);
  background: var(--cfp-surface);
  border: 1px solid var(--cfp-border);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.065);
}

.cfp-standard-products h2 {
  margin-top: 0;
}

.cfp-product-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--cfp-border);
  border-radius: 14px;
}

.cfp-product-directory a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 18px;
  color: var(--cfp-ink);
  background: rgba(247, 249, 247, 0.72);
  border-right: 1px solid var(--cfp-border);
  border-bottom: 1px solid var(--cfp-border);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.cfp-product-directory a:nth-child(2n) {
  border-right: 0;
}

.cfp-product-directory a:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.cfp-product-directory a::after {
  content: ">";
  color: var(--cfp-accent);
  font-weight: 900;
  transition: transform 180ms ease;
}

.cfp-faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

.cfp-faq-list {
  display: grid;
  gap: 12px;
  max-width: 1040px;
  margin-inline: auto;
}

.cfp-faq-list details {
  overflow: hidden;
  background: var(--cfp-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(18, 49, 38, 0.052);
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.cfp-faq-list summary {
  position: relative;
  display: block;
  padding: 19px 56px 19px 22px;
  color: var(--cfp-ink);
  cursor: pointer;
  font-weight: 820;
  line-height: 1.35;
  list-style: none;
}

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

.cfp-faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 24px;
  height: 24px;
  color: var(--cfp-accent);
  background: rgba(234, 243, 238, 0.76);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 50%;
  content: "+";
  font-size: 18px;
  font-weight: 650;
  line-height: 20px;
  text-align: center;
  transform: translateY(-50%);
  transition: transform 180ms ease, background 180ms ease;
}

.cfp-faq-list details[open] summary::after {
  content: "-";
  background: rgba(0, 114, 60, 0.1);
}

.cfp-faq-list details p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--cfp-muted);
  line-height: 1.68;
}

.cfp-rfq {
  width: min(100% - clamp(28px, 6vw, 120px), 1620px);
  grid-template-columns: minmax(380px, 0.86fr) minmax(640px, 1.14fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.cfp-rfq .rfq-copy {
  position: sticky;
  top: 96px;
}

.cfp-form-summary {
  position: static;
  margin-top: 24px;
  box-shadow: 0 16px 38px rgba(18, 49, 38, 0.075);
}

.doming-selection-summary.cfp-form-summary {
  padding: clamp(22px, 2.8vw, 32px);
}

.cfp-form-summary p {
  white-space: pre-line;
}

.cfp-rfq .form-panel {
  background: var(--cfp-surface);
  box-shadow: 0 24px 60px rgba(18, 49, 38, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .cfp-qualification-list li:hover,
  .cfp-check-list li:hover,
  .cfp-limit-list li:hover,
  .cfp-oem-list li:hover,
  .cfp-option-grid label:hover {
    border-color: rgba(0, 114, 60, 0.3);
    box-shadow: 0 16px 34px rgba(18, 49, 38, 0.09);
    transform: translateY(-2px);
  }

  .custom-formulation-page .cfp-summary-actions button.text-link:hover,
  .cfp-faq-list details:hover {
    border-color: rgba(0, 114, 60, 0.24);
    box-shadow: 0 18px 38px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }

  .custom-formulation-page .cfp-summary-actions button.text-link:hover {
    color: var(--cfp-accent-dark);
    background: rgba(234, 243, 238, 0.82);
  }

  .cfp-faq-list details:hover summary::after {
    transform: translateY(-50%) scale(1.06);
  }

  .cfp-application-matrix article:hover,
  .cfp-product-directory a:hover,
  .cfp-product-directory a:focus-visible {
    color: var(--cfp-accent-dark);
    background: rgba(234, 243, 238, 0.76);
  }

  .cfp-application-matrix article:hover {
    border-color: rgba(0, 114, 60, 0.28);
    box-shadow: 0 24px 50px rgba(18, 49, 38, 0.1);
    transform: translateY(-3px);
  }

  .cfp-direction-table > article:hover {
    background: rgba(234, 243, 238, 0.42);
    box-shadow: inset 3px 0 0 rgba(0, 114, 60, 0.34);
    transform: translateX(2px);
  }

  .cfp-visual-card:hover .cfp-image-placeholder {
    box-shadow: 0 28px 58px rgba(18, 49, 38, 0.13);
    transform: translateY(-3px);
  }

  .cfp-visual-card:hover img {
    box-shadow: 0 28px 58px rgba(18, 49, 38, 0.13);
    transform: translateY(-3px) scale(1.01);
  }

  .cfp-visual-card:hover .cfp-fit-flow-card {
    box-shadow: 0 30px 68px rgba(18, 49, 38, 0.11);
    transform: translateY(-3px);
  }

  .cfp-visual-card:hover .cfp-flow-panel {
    border-color: rgba(0, 114, 60, 0.18);
    box-shadow: 0 20px 46px rgba(18, 49, 38, 0.1);
  }

  .cfp-fit-cta:hover,
  .cfp-fit-cta:focus-visible {
    color: var(--cfp-accent-dark);
    background:
      linear-gradient(135deg, rgba(234, 243, 238, 0.96), rgba(255, 255, 255, 1)),
      var(--cfp-surface);
    border-color: rgba(0, 114, 60, 0.32);
    box-shadow: 0 18px 36px rgba(18, 49, 38, 0.1);
    transform: translateY(-2px);
  }

  .cfp-fit-cta:hover::after,
  .cfp-fit-cta:focus-visible::after {
    background-color: rgba(234, 243, 238, 0.96);
    transform: translateX(4px) scale(1.04);
  }

  .cfp-product-directory a:hover::after,
  .cfp-product-directory a:focus-visible::after {
    transform: translateX(4px);
  }
}

@media (max-width: 1180px) {
  .cfp-hero,
  .cfp-section,
  .cfp-rfq {
    width: min(100% - clamp(24px, 5vw, 64px), 1480px);
  }

  .cfp-hero,
  .cfp-fit-layout,
  .cfp-builder-layout,
  .cfp-section-visual-layout,
  .cfp-oem,
  .cfp-standard-products,
  .cfp-rfq {
    grid-template-columns: 1fr;
  }

  .cfp-hero {
    padding-top: clamp(18px, 3vw, 32px);
  }

  .cfp-fit-flow-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .cfp-flow-connector {
    min-height: 64px;
  }

  .cfp-flow-line {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 0;
    border-top: 0;
    border-left: 2px dashed rgba(0, 114, 60, 0.34);
    transform: translateX(-50%);
  }

  .cfp-flow-line::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .cfp-builder-summary,
  .cfp-rfq .rfq-copy {
    position: static;
  }

  .cfp-application-matrix,
  .cfp-direction-table,
  .cfp-tradeoff-grid,
  .cfp-factor-grid,
  .cfp-prep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfp-process-list {
    grid-template-columns: 1fr;
  }

  .cfp-process-list li {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--cfp-border);
  }

  .cfp-process-list li:last-child {
    border-bottom: 0;
  }

  .cfp-process-list span {
    margin-bottom: 24px;
  }
}

@media (max-width: 720px) {
  .cfp-hero,
  .cfp-section,
  .cfp-rfq {
    width: min(100% - 32px, 1480px);
  }

  .cfp-hero {
    padding-top: 16px;
  }

  .cfp-hero h1 {
    font-size: clamp(38px, 13vw, 58px);
    letter-spacing: -0.04em;
  }

  .cfp-qualification-list,
  .cfp-application-matrix,
  .cfp-direction-table,
  .cfp-direction-table > article,
  .cfp-direction-row,
  .cfp-tradeoff-grid,
  .cfp-factor-grid,
  .cfp-prep-grid,
  .cfp-option-grid,
  .cfp-option-grid-compact,
  .cfp-builder-input-grid,
  .cfp-oem-list,
  .cfp-product-directory {
    grid-template-columns: 1fr;
  }

  .cfp-brief-panel dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cfp-direction-table > article,
  .cfp-direction-row {
    gap: 10px;
    min-height: 0;
    border: 1px solid rgba(0, 114, 60, 0.12);
  }

  .cfp-product-directory a,
  .cfp-product-directory a:nth-child(2n),
  .cfp-product-directory a:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--cfp-border);
  }

  .cfp-product-directory a:last-child {
    border-bottom: 0;
  }

  .cfp-oem,
  .cfp-standard-products {
    padding: 24px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cfp-qualification-list li,
  .cfp-check-list li,
  .cfp-limit-list li,
  .cfp-oem-list li,
  .cfp-option-grid label,
  .cfp-application-matrix a,
  .cfp-product-directory a,
  .cfp-fit-cta,
  .cfp-direction-table > article,
  .cfp-image-placeholder,
  .cfp-visual-card img,
  .cfp-fit-flow-card,
  .cfp-flow-panel,
  .cfp-product-directory a::after {
    transition: none;
  }

  .cfp-flow-pulse {
    animation: none;
  }
}
.featured-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 26px 0;
  list-style: none;
}

.featured-benefits li {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(18, 49, 38, 0.08);
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(18, 49, 38, 0.035);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.featured-benefits li:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 114, 60, 0.2);
  box-shadow: 0 9px 22px rgba(18, 49, 38, 0.065);
  transform: translateY(-2px);
}

.benefit-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--green);
}

.benefit-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.featured-solution .section-actions {
  margin: 26px 0 0;
}

.featured-solution .btn-primary:hover,
.featured-solution .btn-primary:focus-visible {
  background: var(--color-primary-hover);
  box-shadow: 0 10px 24px rgba(0, 114, 60, 0.24);
  transform: translateY(-2px) scale(1.015);
}

.featured-solution .btn-secondary {
  border-color: rgba(0, 114, 60, 0.28);
}

.featured-solution .btn-secondary:hover,
.featured-solution .btn-secondary:focus-visible {
  color: var(--green-dark);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 114, 60, 0.58);
  box-shadow: 0 8px 20px rgba(18, 49, 38, 0.09);
  transform: translateY(-2px);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 28px;
}

.application-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.application-feature {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 22px;
  align-items: start;
  min-height: 100%;
  padding: 0;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(18, 49, 38, 0.07);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.application-feature.is-reversed img {
  order: 0;
}

.application-feature:hover,
.application-feature:focus-visible {
  box-shadow: 0 18px 34px rgba(18, 49, 38, 0.1);
  transform: translateY(-3px);
}

.application-feature img,
.outdoor-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(18, 49, 38, 0.08);
}

.application-feature img {
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-feature > div {
  padding: 0 clamp(18px, 2vw, 24px) 26px;
}

.application-feature h3 {
  margin-bottom: 8px;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 800;
}

.application-image-placeholder {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 20px;
  overflow: hidden;
  place-items: end start;
  color: var(--color-white);
  background: var(--color-brand-deep);
  border-radius: 8px 8px 0 0;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-image-placeholder::before {
  position: absolute;
  inset: 18% 12%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  content: "";
  transform: skewX(-9deg);
}

.flooring-placeholder {
  background: var(--color-primary-hover);
}

.application-image-placeholder span {
  position: relative;
  z-index: 1;
  max-width: 210px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .application-feature:hover img,
  .application-feature:hover .application-image-placeholder {
    transform: scale(1.018);
  }
}

.application-feature p,
.outdoor-panel p,
.product-card p,
.workflow-grid p {
  color: var(--muted);
}

.application-feature strong,
.outdoor-panel strong,
.text-link,
.product-card a,
.product-cta a:not(.btn) {
  position: relative;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--green);
  text-decoration: none;
  transition: color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-feature strong::after,
.outdoor-panel strong::after,
.text-link::before,
.product-card a::before,
.product-cta a:not(.btn)::before {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.38;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-arrow {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  color: currentColor;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.text-link::after,
.product-card a::after,
.product-cta a:not(.btn)::after {
  display: inline-block;
  content: "\2192";
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-feature:hover strong,
.application-feature:focus-visible strong,
.outdoor-panel:hover strong,
.outdoor-panel:focus-visible strong,
.text-link:hover,
.text-link:focus-visible,
.product-card:hover a,
.product-card:focus-within a,
.product-cta a:not(.btn):hover,
.product-cta a:not(.btn):focus-visible {
  color: var(--green-dark);
  transform: translateX(2px);
}

.application-feature:hover strong::after,
.application-feature:focus-visible strong::after,
.outdoor-panel:hover strong::after,
.outdoor-panel:focus-visible strong::after,
.text-link:hover::before,
.text-link:focus-visible::before,
.product-card:hover a::before,
.product-card:focus-within a::before,
.product-cta a:not(.btn):hover::before,
.product-cta a:not(.btn):focus-visible::before {
  opacity: 0.58;
  transform: scaleX(1);
}

.product-cta .btn-primary,
.product-cta .btn-primary:hover,
.product-cta .btn-primary:focus-visible {
  color: var(--color-white);
  text-decoration: none;
}

.text-link:hover::after,
.text-link:focus-visible::after,
.product-card:hover a::after,
.product-card:focus-within a::after,
.product-cta a:not(.btn):hover::after,
.product-cta a:not(.btn):focus-visible::after {
  transform: translateX(6px) scale(1.08);
}

.custom-formulation-page .cfp-fit-cta::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20t%3D%221784794605410%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%224102%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M729.6%20448H128v85.333333h601.6L597.333333%20665.6l59.733334%2059.733333%20234.666666-234.666666L661.333333%20256l-59.733333%2059.733333%20128%20132.266667z%22%20fill%3D%22%230b6b50%22%20p-id%3D%224103%22%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.application-feature:hover .link-arrow,
.application-feature:focus-visible .link-arrow {
  transform: translateX(6px) scale(1.08);
}

.production-problems,
.export-support {
  background: var(--color-bg);
}

.production-problems {
  background: var(--color-bg);
}

.process-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(36px, 7vw, 96px);
  padding: 0;
  margin: 0 0 32px;
  list-style: none;
  border-bottom: 1px solid var(--line-strong);
}

.process-problem-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 88px;
  border-top: 1px solid var(--line-strong);
}

.process-problem-list span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.process-problem-list strong {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.3;
}

html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.check-list,
.capability-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 24px 0;
  list-style: none;
}

.check-list li,
.capability-list li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid rgba(18, 49, 38, 0.12);
  font-weight: 700;
}

.check-list li::before,
.capability-list li::before {
  position: absolute;
  left: 14px;
  color: var(--green);
  content: "+";
}

.product-grid,
.capability-grid,
.workflow-grid {
  display: grid;
  gap: 16px;
}

.product-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(245px, 1fr);
  grid-template-columns: repeat(4, minmax(245px, 1fr));
  overflow-x: auto;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 4px 2px 18px;
  scroll-snap-type: x proximity;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 292px;
  padding: clamp(24px, 2.4vw, 30px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(18, 49, 38, 0.05);
  scroll-snap-align: start;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.product-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--color-primary);
  content: "";
  transform: scaleX(0.24);
  transform-origin: left;
  transition: transform 180ms ease;
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.product-card:hover::before,
.product-card:focus-within::before {
  transform: scaleX(1);
}

.card-code {
  display: inline-block;
  width: auto;
  height: auto;
  margin-bottom: 22px;
  padding-left: 10px;
  color: var(--green);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--green);
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.product-card:nth-child(2) .card-code {
  background: transparent;
}

.product-card:nth-child(3) .card-code {
  color: var(--green);
  background: transparent;
}

.product-card:nth-child(4) .card-code {
  background: transparent;
}

.product-card:nth-child(5) .card-code {
  background: transparent;
}

.product-card h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.18;
}

.product-card p {
  flex: 1;
  margin-bottom: 24px;
}

.product-card a {
  align-self: flex-start;
  margin-top: auto;
  font-weight: 800;
}

.product-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 36px);
  align-items: center;
  margin: 34px 0 0;
  padding: clamp(22px, 4vw, 30px);
  color: var(--muted);
  background: var(--green-soft);
  border-left: 5px solid var(--green);
  border-radius: 8px;
}

.product-cta h3 {
  max-width: 760px;
  margin-bottom: 8px;
  font-size: clamp(22px, 2.4vw, 30px);
}

.product-cta p:not(.section-kicker) {
  max-width: 760px;
  margin-bottom: 0;
}

.outdoor-doming {
  display: block;
  background: var(--color-surface);
}

.outdoor-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
  max-width: 840px;
  margin-inline: auto;
}

.outdoor-panel {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.outdoor-panel:hover,
.outdoor-panel:focus-visible {
  border-color: rgba(0, 114, 60, 0.4);
  box-shadow: 0 16px 32px rgba(18, 49, 38, 0.1);
  transform: translateY(-3px);
}

.outdoor-panel img {
  object-fit: contain;
  background: var(--paper);
  box-shadow: none;
}

.panel-label {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.problem-list,
.green-capability-list,
.export-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
}

.problem-list li,
.green-capability-list li,
.export-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.problem-list span,
.green-capability-list span,
.export-list span {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.export-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.export-list p {
  margin: 0;
  color: var(--muted);
}

.problem-list strong {
  font-size: clamp(18px, 2vw, 24px);
}

.problem-action {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.problem-diagnostic {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: center;
  margin-bottom: clamp(28px, 5vw, 54px);
}

.problem-copy p:not(.section-kicker) {
  max-width: 660px;
  color: var(--muted);
  font-size: 18px;
}

.problem-copy .btn {
  margin-top: 12px;
}

.resin-comparison-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: clamp(16px, 3vw, 24px);
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.comparison-sample {
  min-height: 260px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.comparison-sample span {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-sample i {
  position: relative;
  display: block;
  height: 160px;
  border-radius: 999px 999px 42px 42px;
}

.comparison-sample i::before,
.comparison-sample i::after {
  position: absolute;
  content: "";
  border-radius: 999px;
}

.comparison-sample.is-unstable i {
  background: linear-gradient(135deg, #f7d674, #c98d3a);
  box-shadow: inset 0 0 0 1px rgba(18, 49, 38, 0.08);
}

.comparison-sample.is-unstable i::before {
  top: 34px;
  left: 30%;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.comparison-sample.is-unstable i::after {
  right: 22%;
  bottom: 38px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.comparison-sample.is-stable i {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(184, 230, 218, 0.72));
  border: 1px solid rgba(0, 114, 60, 0.16);
  box-shadow: inset 0 0 34px rgba(0, 114, 60, 0.12);
}

.comparison-sample.is-stable i::before {
  inset: 34px 20px auto;
  height: 22px;
  background: rgba(255, 255, 255, 0.66);
}

.comparison-divider {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.problem-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.problem-card-grid li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 154px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.problem-card-grid li:hover {
  border-color: rgba(0, 114, 60, 0.34);
  box-shadow: 0 14px 28px rgba(18, 49, 38, 0.08);
  transform: translateY(-3px);
}

.problem-card-grid strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.25;
}

.problem-card-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.problem-icon {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  background: var(--green-soft);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 50%;
}

.problem-icon::before,
.problem-icon::after {
  position: absolute;
  content: "";
}

.icon-yellowing::before {
  inset: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), #d9b554);
  border-radius: 50%;
}

.icon-bubbles::before,
.icon-bubbles::after {
  border: 2px solid var(--green);
  border-radius: 50%;
}

.icon-bubbles::before {
  top: 13px;
  left: 13px;
  width: 11px;
  height: 11px;
}

.icon-bubbles::after {
  right: 12px;
  bottom: 12px;
  width: 8px;
  height: 8px;
}

.icon-surface::before {
  top: 22px;
  left: 10px;
  width: 26px;
  height: 8px;
  border-top: 3px solid var(--green);
  border-radius: 50%;
}

.icon-cure::before {
  inset: 11px;
  border: 2px solid var(--green);
  border-radius: 50%;
}

.icon-cure::after {
  top: 15px;
  left: 22px;
  width: 10px;
  height: 9px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
}

.icon-hardness::before {
  top: 13px;
  left: 11px;
  width: 24px;
  height: 18px;
  border: 2px solid var(--green);
  border-radius: 4px;
  transform: skewX(-8deg);
}

.icon-batch::before {
  top: 12px;
  left: 11px;
  width: 24px;
  height: 20px;
  border: 2px solid var(--green);
  border-radius: 4px;
}

.icon-batch::after {
  top: 18px;
  left: 15px;
  width: 16px;
  border-top: 2px solid var(--green);
}

.custom-formulation {
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 1.14fr);
  background: var(--color-soft-green);
  color: var(--color-heading);
}

.custom-formulation .section-kicker,
.custom-formulation p {
  color: var(--color-muted);
}

.custom-formulation .btn-secondary {
  margin-top: 12px;
  color: var(--color-primary);
}

.custom-formulation .capability-list li {
  color: var(--color-heading);
}

.green-capability-list li {
  color: var(--color-heading);
  border-bottom-color: var(--color-border);
}

.green-capability-list span {
  color: var(--color-primary);
}

.green-capability-list strong {
  font-size: clamp(18px, 2vw, 24px);
}

.parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.parameter-card {
  min-height: 190px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.parameter-card:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.parameter-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
}

.parameter-card h3 {
  margin-bottom: 16px;
  color: var(--color-heading);
  font-size: 20px;
}

.parameter-card p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.parameter-wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.parameter-meter {
  height: 7px;
  overflow: hidden;
  background: var(--color-border);
  border-radius: 999px;
}

.parameter-meter i {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transform-origin: left center;
}

.parameter-card:hover .parameter-meter i {
  animation: meter-pulse 900ms ease;
}

@keyframes meter-pulse {
  from {
    transform: scaleX(0.72);
  }

  to {
    transform: scaleX(1);
  }
}

.b2b-support {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  background: var(--color-bg);
}

.supply-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 42px);
}

.supply-columns article {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.supply-columns span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.supply-columns p {
  color: var(--muted);
}

.b2b-support > .btn {
  margin-top: 32px;
}

.support-copy p:not(.section-kicker) {
  max-width: 650px;
  color: var(--muted);
  font-size: 18px;
}

.supply-proof-list {
  display: grid;
  gap: 0;
  margin: 28px 0;
  border-top: 1px solid var(--line);
}

.supply-proof-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.supply-proof-list span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.supply-proof-list h3 {
  margin-bottom: 4px;
  font-size: 20px;
}

.supply-proof-list p {
  margin: 0;
  color: var(--muted);
}

.support-media {
  position: relative;
  display: block;
  min-height: 470px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(18, 49, 38, 0.1);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.support-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(18, 49, 38, 0.02), rgba(18, 49, 38, 0.1));
  pointer-events: none;
}

.support-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 320ms ease;
}

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

.workflow-grid article {
  min-height: 240px;
  padding: 24px;
  box-shadow: none;
  border-left: 4px solid var(--green);
}

.workflow-grid span {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--green);
  font-weight: 800;
}

.workflow {
  background: var(--color-soft-green);
}

.workflow-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  padding: 0;
  margin: clamp(26px, 4vw, 42px) 0 0;
  list-style: none;
}

.workflow-timeline li {
  position: relative;
  min-height: 250px;
  padding: 92px 22px 24px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(18, 49, 38, 0.06);
  transform: translateY(0);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-timeline li::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 2px;
  content: "";
  background: var(--color-primary);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-timeline span {
  position: absolute;
  top: 0;
  left: 22px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 8px solid var(--green-soft);
  border-radius: 50%;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(0, 114, 60, 0.18);
  transform: translateY(0) scale(1);
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-timeline h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.workflow-timeline p {
  margin: 0;
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .workflow-timeline li:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--color-border-strong);
    box-shadow: 0 24px 48px rgba(18, 49, 38, 0.12);
    transform: translateY(-5px);
  }

  .workflow-timeline li:hover::after {
    opacity: 0.68;
    transform: scaleX(1);
  }

  .workflow-timeline li:hover span {
    box-shadow: 0 18px 38px rgba(0, 114, 60, 0.26);
    transform: translateY(-3px) scale(1.04);
  }
}

.rfq-form {
  align-items: start;
  background: var(--color-soft-green);
}

.form-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 7px;
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 800;
}

.form-panel label > span {
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.field-hint {
  display: block;
  margin-top: -2px;
  color: rgba(101, 114, 116, 0.92);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.field-hint.is-warning {
  color: #8a5a16;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--color-heading);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.form-panel :is(input, select, textarea) {
  color: rgba(18, 33, 38, 0.86);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  color: rgba(101, 114, 116, 0.72);
  font-weight: 500;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  background: var(--color-surface);
}

.form-panel :is(input, select, textarea)[aria-invalid="true"],
.form-panel :is(input, select, textarea):user-invalid {
  border-color: #a94f43;
  box-shadow: 0 0 0 3px rgba(169, 79, 67, 0.14);
}

.form-status {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
}

.form-status.is-success {
  color: var(--color-primary-hover);
  background: var(--color-soft-green);
  border: 1px solid var(--color-border);
}

.form-status.is-error {
  color: #8a3c32;
  background: #fff4f1;
  border: 1px solid rgba(169, 79, 67, 0.24);
}

textarea {
  resize: vertical;
}

.form-wide {
  grid-column: 1 / -1;
}

.cf-turnstile {
  min-height: 70px;
  padding: 16px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
}

.site-footer {
  position: relative;
  padding: clamp(36px, 6vw, 64px) clamp(18px, 5vw, 72px) 24px;
  color: var(--color-text);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.site-footer p {
  margin: 0;
  color: var(--color-muted);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(140px, 0.75fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.footer-brand img {
  width: 120px;
  height: auto;
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 390px;
}

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

.footer-column h2 {
  margin: 0 0 4px;
  color: var(--color-heading);
  font-size: 15px;
  line-height: 1.2;
}

.footer-column a {
  color: var(--color-text);
  font-size: 14px;
  transition: color 160ms ease, transform 160ms ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--color-primary);
  transform: translateX(2px);
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.footer-actions a:hover,
.footer-actions a:focus-visible {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.footer-actions a::before {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  content: "";
}

.footer-actions a[href*="api.whatsapp.com"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320.512 514.858667C306.090667 488.661333 298.666667 464.128 298.666667 441.258667c0-25.898667 6.954667-47.701333 20.48-66.730667a124.416 124.416 0 0 1 14.208-16.64l2.005333-2.133333 0.341333-0.384-0.384 0.426666 0.554667-0.597333A42.624 42.624 0 0 1 366.592 341.333333c8.789333 0 14.72 0.085333 19.968 0.341334h1.962667c11.349333 0 17.322667 3.754667 23.637333 16.554666l0.725333 1.578667v0.042667l0.853334 1.834666 13.952 32.768c11.008 25.898667 16.298667 38.144 17.493333 40.533334 4.224 8.149333 4.522667 14.634667 0.853333 21.717333l-1.493333 2.901333-1.664 3.2a52.266667 52.266667 0 0 1-7.808 11.392l-5.12 6.016c-4.266667 5.034667-6.357333 7.381333-8.106667 9.258667l-10.154666 10.666667 7.893333 12.416c14.677333 23.04 32.426667 44.245333 52.309333 61.397333 16.426667 14.208 33.28 25.6 51.2 34.858667 6.485333 3.328 19.413333 9.130667 29.44 13.397333l12.16 5.205333 8.832-9.941333c12.032-13.44 24.32-28.202667 28.885334-34.773333 7.253333-10.581333 13.354667-12.032 28.416-6.698667 6.826667 2.389333 41.984 18.602667 70.656 32.469333 3.242667 1.578667 3.242667 1.578667 8.32 3.925334 3.114667 1.493333 4.949333 2.432 6.613333 3.413333 3.413333 2.048 5.248 3.754667 6.656 5.973333 4.181333 6.741333 2.688 29.013333-5.546667 51.370667-7.722667 20.906667-44.970667 46.165333-73.002666 50.176-24.661333 3.584-45.568 2.432-66.688-4.053333-22.912-7.04-39.168-12.8-58.965334-21.077334-34.986667-14.634667-68.949333-36.864-101.717333-66.304a509.909333 509.909333 0 0 1-70.272-77.781333 624.213333 624.213333 0 0 1-5.418667-7.253333 245.546667 245.546667 0 0 1-20.949333-32z m-130.986667 319.530666l131.498667-39.466666a341.333333 341.333333 0 1 0-92.032-92.074667l-39.466667 131.541333z m-53.12-119.808A424.789333 424.789333 0 0 1 85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667a424.789333 424.789333 0 0 1-202.666667-51.114667l-163.584 49.066667a46.933333 46.933333 0 0 1-58.453333-58.453334l49.066667-163.584z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320.512 514.858667C306.090667 488.661333 298.666667 464.128 298.666667 441.258667c0-25.898667 6.954667-47.701333 20.48-66.730667a124.416 124.416 0 0 1 14.208-16.64l2.005333-2.133333 0.341333-0.384-0.384 0.426666 0.554667-0.597333A42.624 42.624 0 0 1 366.592 341.333333c8.789333 0 14.72 0.085333 19.968 0.341334h1.962667c11.349333 0 17.322667 3.754667 23.637333 16.554666l0.725333 1.578667v0.042667l0.853334 1.834666 13.952 32.768c11.008 25.898667 16.298667 38.144 17.493333 40.533334 4.224 8.149333 4.522667 14.634667 0.853333 21.717333l-1.493333 2.901333-1.664 3.2a52.266667 52.266667 0 0 1-7.808 11.392l-5.12 6.016c-4.266667 5.034667-6.357333 7.381333-8.106667 9.258667l-10.154666 10.666667 7.893333 12.416c14.677333 23.04 32.426667 44.245333 52.309333 61.397333 16.426667 14.208 33.28 25.6 51.2 34.858667 6.485333 3.328 19.413333 9.130667 29.44 13.397333l12.16 5.205333 8.832-9.941333c12.032-13.44 24.32-28.202667 28.885334-34.773333 7.253333-10.581333 13.354667-12.032 28.416-6.698667 6.826667 2.389333 41.984 18.602667 70.656 32.469333 3.242667 1.578667 3.242667 1.578667 8.32 3.925334 3.114667 1.493333 4.949333 2.432 6.613333 3.413333 3.413333 2.048 5.248 3.754667 6.656 5.973333 4.181333 6.741333 2.688 29.013333-5.546667 51.370667-7.722667 20.906667-44.970667 46.165333-73.002666 50.176-24.661333 3.584-45.568 2.432-66.688-4.053333-22.912-7.04-39.168-12.8-58.965334-21.077334-34.986667-14.634667-68.949333-36.864-101.717333-66.304a509.909333 509.909333 0 0 1-70.272-77.781333 624.213333 624.213333 0 0 1-5.418667-7.253333 245.546667 245.546667 0 0 1-20.949333-32z m-130.986667 319.530666l131.498667-39.466666a341.333333 341.333333 0 1 0-92.032-92.074667l-39.466667 131.541333z m-53.12-119.808A424.789333 424.789333 0 0 1 85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667a424.789333 424.789333 0 0 1-202.666667-51.114667l-163.584 49.066667a46.933333 46.933333 0 0 1-58.453333-58.453334l49.066667-163.584z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-actions a[href^="mailto:"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.333333 256a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256z m150.144 0L512 497.962667 788.522667 256H235.52zM853.333333 312.704l-313.216 274.090667a42.666667 42.666667 0 0 1-56.234666 0L170.666667 312.704V768h682.666666V312.704z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.333333 256a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256z m150.144 0L512 497.962667 788.522667 256H235.52zM853.333333 312.704l-313.216 274.090667a42.666667 42.666667 0 0 1-56.234666 0L170.666667 312.704V768h682.666666V312.704z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-bottom {
  padding-top: 24px;
  margin-top: 34px;
  border-top: 1px solid var(--color-border);
}

.resources-page {
  color: var(--color-text);
  background: var(--color-surface);
}

.resources-page :is(.resource-library, .resources-closing-cta) {
  width: min(100% - var(--desktop-page-gutter), 1480px);
  margin-inline: auto;
}

.resource-library,
.resources-closing-cta {
  padding: clamp(58px, 7vw, 98px) 0;
}

.resource-library {
  padding-top: clamp(46px, 7vw, 96px);
}

.resource-topic-heading,
.resource-section-heading {
  max-width: 920px;
}

.resource-library-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(320px, 0.34fr);
  gap: clamp(32px, 6vw, 86px);
  align-items: center;
  min-height: clamp(360px, 42vw, 560px);
  padding: clamp(34px, 5vw, 64px);
  margin-bottom: clamp(46px, 6vw, 84px);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.96) 0 56%, rgba(234, 243, 238, 0.86) 56% 100%),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(18, 49, 38, 0.06);
}

.resource-library-intro::before {
  position: absolute;
  top: clamp(24px, 3vw, 36px);
  left: clamp(24px, 3vw, 38px);
  width: 72px;
  height: 4px;
  content: "";
  background: var(--color-primary);
  border-radius: 999px;
}

.resource-library h1,
.resource-library h2,
.resources-closing-cta h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.resource-library-intro p:not(.section-kicker),
.resource-topic-heading p:not(.section-kicker),
.resources-closing-cta p:not(.section-kicker) {
  max-width: 760px;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.68;
}

.resource-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  padding: 7px 11px;
  color: var(--color-brand-deep);
  background: rgba(234, 243, 238, 0.82);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resource-status--published {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.resource-status-legend {
  margin-top: 8px;
}

.resource-library-hero-copy {
  display: grid;
  align-content: center;
  max-width: 920px;
  min-height: min(48vw, 360px);
  padding-top: 24px;
}

.resource-library-hero-panel {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(18, 49, 38, 0.055);
}

.resource-library-hero-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--color-primary);
  border-radius: 14px 0 0 14px;
}

.resource-library-hero-panel p {
  margin: 18px 0 0;
  color: var(--color-muted);
  line-height: 1.64;
}

.resource-library-hero-panel nav {
  display: grid;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid rgba(18, 33, 38, 0.1);
}

.resource-library-hero-panel a {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  color: var(--color-heading);
  border-bottom: 1px solid rgba(18, 33, 38, 0.1);
  font-weight: 780;
  transition: color 180ms ease, transform 180ms ease;
}

.resource-library-hero-panel a::after {
  color: var(--color-primary);
  content: ">";
  font-weight: 850;
}

.resource-library-hero-panel a:hover,
.resource-library-hero-panel a:focus-visible {
  color: var(--color-primary-hover);
  transform: translateX(2px);
}

.resource-topic-group {
  scroll-margin-top: 98px;
}

.resource-topic-group + .resource-topic-group {
  margin-top: clamp(52px, 7vw, 86px);
}

.resource-topic-heading {
  margin-bottom: clamp(24px, 3vw, 38px);
  padding-left: clamp(18px, 2vw, 24px);
  border-left: 4px solid var(--color-primary);
}

.resource-topic-heading h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.resource-article-index {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-top: 4px solid rgba(0, 114, 60, 0.76);
  border-radius: 16px;
}

.resource-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.08fr) minmax(0, 0.7fr) minmax(180px, 0.22fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(24px, 3.2vw, 38px);
  background: var(--color-surface);
}

.resource-row--published {
  position: relative;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.resource-row--published:hover {
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.48)),
    var(--color-surface);
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.07);
  transform: translateY(-2px);
}

.resource-row + .resource-row {
  border-top: 1px solid rgba(18, 33, 38, 0.1);
}

.resource-row-number {
  color: var(--color-primary);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.02em;
}

.resource-type {
  display: block;
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.resource-row h3 {
  max-width: 860px;
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.resource-row h3 a {
  color: inherit;
  text-decoration: none;
}

.resource-row h3 a:hover,
.resource-row h3 a:focus-visible {
  color: var(--color-primary);
}

.resource-row p {
  max-width: 850px;
  margin: 12px 0 0;
  color: var(--color-muted);
  line-height: 1.66;
}

.resource-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.resource-topics span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 6px 9px;
  color: var(--color-text);
  background: rgba(247, 249, 247, 0.88);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 720;
}

.resource-row-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 18px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.resource-row-cta::after {
  content: "→";
  transition: transform 200ms ease;
}

.resource-row-cta:hover::after,
.resource-row-cta:focus-visible::after {
  transform: translateX(4px);
}

.resource-row-status {
  display: flex;
  justify-content: flex-end;
}

.resources-closing-cta {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(300px, 0.32fr);
  gap: clamp(24px, 4.6vw, 64px);
  align-items: stretch;
  margin-bottom: clamp(18px, 3vw, 36px);
}

.resources-closing-cta > div:first-child {
  position: relative;
  padding: clamp(30px, 5vw, 54px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.64)),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-top: 4px solid rgba(0, 114, 60, 0.76);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(18, 49, 38, 0.06);
}

.resources-cta-links {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(18px, 2.6vw, 30px);
  background:
    linear-gradient(150deg, rgba(234, 243, 238, 0.86), rgba(255, 255, 255, 0.98)),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.055);
}

.resources-cta-links .text-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 16px 16px 16px 18px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 820;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(18, 49, 38, 0.045);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

.resources-cta-links .text-link::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  background: var(--color-primary);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(11, 107, 80, 0.09);
}

.resources-cta-links .text-link::after {
  content: "→";
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 14px;
  color: var(--color-primary);
  background: rgba(11, 107, 80, 0.09);
  border: 1px solid rgba(11, 107, 80, 0.16);
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  transition:
    transform 220ms ease,
    background 220ms ease;
}

.resources-cta-links .text-link:hover,
.resources-cta-links .text-link:focus-visible {
  color: var(--color-primary);
  border-color: rgba(11, 107, 80, 0.24);
  box-shadow: 0 16px 34px rgba(18, 49, 38, 0.08);
  transform: translateY(-2px);
}

.resources-cta-links .text-link:hover::after,
.resources-cta-links .text-link:focus-visible::after {
  background: rgba(11, 107, 80, 0.14);
  transform: translateX(4px);
}

@media (max-width: 1180px) {
  .resources-page :is(.resource-library, .resources-closing-cta) {
    width: min(100% - clamp(24px, 5vw, 64px), 1480px);
  }

  .resource-library-intro,
  .resources-closing-cta {
    grid-template-columns: 1fr;
  }

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

  .resource-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .resource-row-status {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .resources-page :is(.resource-library, .resources-closing-cta) {
    width: min(100% - 32px, 1480px);
  }

  .resource-library-intro {
    min-height: 0;
    padding: 32px 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.72)),
      var(--color-surface);
  }

  .resource-library-hero-copy {
    min-height: 0;
  }

  .resources-cta-links {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .resource-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 18px;
  }

  .resource-row-status {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resources-page *,
  .resources-page *::before,
  .resources-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.resource-article-page {
  background: var(--color-surface);
}

.resource-article-shell {
  width: min(100% - var(--desktop-page-gutter), 1480px);
  margin-inline: auto;
}

.resource-article-shell {
  padding: clamp(18px, 3.2vw, 44px) 0 clamp(72px, 8vw, 112px);
}

.resource-article-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.59fr) minmax(380px, 0.41fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
  overflow: hidden;
  min-height: clamp(500px, 46vw, 650px);
  padding: clamp(34px, 5vw, 68px);
  background:
    radial-gradient(circle at 88% 16%, rgba(11, 107, 80, 0.12), transparent 28%),
    linear-gradient(130deg, rgba(247, 249, 247, 0.98) 0 48%, rgba(234, 243, 238, 0.78) 48% 100%),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(18, 49, 38, 0.075);
}

.resource-article-header::before {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 33, 38, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 33, 38, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  border-radius: 18px;
  mask-image: linear-gradient(110deg, rgba(0, 0, 0, 0.18), transparent 72%);
}

.resource-article-header-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  max-width: 820px;
}

.resource-article-header h1 {
  max-width: 820px;
  margin: 0 0 22px;
  color: var(--color-heading);
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: 0.99;
  letter-spacing: -0.04em;
}

.resource-article-intro {
  max-width: 760px;
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.62;
}

.resource-article-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

.resource-article-header-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(18, 49, 38, 0.04);
  font-size: 13px;
  font-weight: 780;
}

.resource-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: clamp(24px, 3vw, 34px);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.resource-back-link::before {
  content: "←";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: rgba(11, 107, 80, 0.1);
  border: 1px solid rgba(11, 107, 80, 0.16);
  border-radius: 999px;
  transition: transform 200ms ease;
}

.resource-back-link:hover::before,
.resource-back-link:focus-visible::before {
  transform: translateX(-4px);
}

.resource-article-hero-media,
.resource-inline-media {
  overflow: hidden;
  margin: clamp(26px, 4vw, 46px) 0 0;
  background: var(--color-soft-green);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(18, 49, 38, 0.08);
}

.resource-article-hero-media {
  position: relative;
  z-index: 1;
  margin: 0;
  border: 8px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 28px 64px rgba(18, 49, 38, 0.12);
}

.resource-article-hero-media img,
.resource-inline-media img {
  display: block;
  width: 100%;
  height: auto;
}

.resource-article-hero-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.resource-inline-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.resource-inline-media-wide img {
  aspect-ratio: 16 / 7;
}

.resource-article-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: clamp(34px, 4vw, 68px);
  align-items: start;
  width: 100%;
  margin-top: clamp(42px, 6vw, 84px);
}

.resource-article-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 20px;
}

.resource-toc,
.resource-related-product {
  padding: 22px;
  background: linear-gradient(145deg, rgba(247, 249, 247, 0.96), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.045);
}

.resource-toc h2,
.resource-related-product h2 {
  margin: 0 0 14px;
  color: var(--color-heading);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.resource-toc a {
  position: relative;
  display: block;
  padding: 10px 0 10px 14px;
  color: var(--color-muted);
  border-top: 1px solid rgba(18, 33, 38, 0.08);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.resource-toc a::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 999px;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.resource-toc a:hover,
.resource-toc a:focus-visible,
.resource-toc a.is-active {
  color: var(--color-primary);
}

.resource-toc a.is-active {
  background: linear-gradient(90deg, rgba(11, 107, 80, 0.08), rgba(11, 107, 80, 0));
  transform: translateX(2px);
}

.resource-toc a.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.resource-related-product p {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.58;
}

.resource-article-body {
  width: min(100%, 980px);
  min-width: 0;
}

.resource-article-body section {
  scroll-margin-top: 112px;
}

.resource-article-body section + section {
  margin-top: clamp(44px, 6vw, 72px);
}

.resource-article-body h2 {
  margin: 0 0 18px;
  color: var(--color-heading);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.resource-article-body h3 {
  margin: 28px 0 10px;
  color: var(--color-heading);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.resource-article-body p,
.resource-article-body li {
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.72;
}

.resource-article-body p {
  margin: 0 0 18px;
}

.resource-article-body ul {
  display: grid;
  gap: 10px;
  padding-left: 22px;
  margin: 16px 0 0;
}

.resource-article-body .text-link + .text-link {
  margin-left: 18px;
}

.resource-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.resource-article-body .resource-context-links .text-link + .text-link {
  margin-left: 0;
}

.resource-selection-callout {
  padding: clamp(24px, 4vw, 38px);
  background: linear-gradient(145deg, rgba(234, 243, 238, 0.86), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(0, 114, 60, 0.15);
  border-radius: 18px;
}

.resource-selection-callout > p:first-child {
  margin-bottom: 18px;
  color: var(--color-heading);
  font-weight: 850;
}

.resource-selection-callout ol {
  counter-reset: selection-step;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
}

.resource-selection-callout ol li {
  counter-increment: selection-step;
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 18px 12px;
  color: var(--color-heading);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 247, 0.92)),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(18, 49, 38, 0.055);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.28;
  text-align: center;
}

.resource-selection-callout ol li::before {
  content: counter(selection-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.resource-selection-callout ol li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(10px, 1.4vw, 16px) * -1);
  width: clamp(10px, 1.4vw, 16px);
  height: 2px;
  background: linear-gradient(90deg, rgba(11, 107, 80, 0.34), rgba(11, 107, 80, 0.08));
  transform: translateY(-50%);
}

.resource-selection-callout ol li:last-child::after {
  display: none;
}

.resource-selection-callout ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(22px, 3vw, 34px);
  padding: 18px 0 0;
  margin: 0;
  border-top: 1px solid rgba(18, 33, 38, 0.1);
  list-style: none;
}

.resource-selection-callout ul li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(18, 33, 38, 0.08);
  font-size: 15px;
  line-height: 1.55;
}

.resource-table-wrap {
  overflow-x: auto;
  margin: 26px 0 0;
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-radius: 16px;
}

.resource-comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.resource-comparison-table caption {
  padding: 16px 18px;
  color: var(--color-heading);
  background: rgba(234, 243, 238, 0.72);
  font-weight: 850;
  text-align: left;
}

.resource-comparison-table th,
.resource-comparison-table td {
  padding: 17px 18px;
  color: var(--color-muted);
  border-top: 1px solid rgba(18, 33, 38, 0.09);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.resource-comparison-table thead th {
  color: var(--color-heading);
  background: rgba(247, 249, 247, 0.92);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resource-comparison-table tbody th {
  color: var(--color-heading);
  font-weight: 800;
}

.resource-comparison-table-priority thead th:nth-child(2),
.resource-comparison-table-priority tbody td:nth-child(2) {
  background: rgba(234, 243, 238, 0.42);
}

.resource-comparison-table-priority thead th:nth-child(2)::after {
  display: block;
  width: fit-content;
  padding: 5px 8px;
  margin-top: 8px;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(11, 107, 80, 0.14);
  border-radius: 999px;
  content: "Start Here for Standard Indoor Production";
  font-size: 10px;
  letter-spacing: 0.04em;
}

.resource-comparison-table-priority thead th:nth-child(3)::after {
  display: block;
  width: fit-content;
  padding: 5px 8px;
  margin-top: 8px;
  color: var(--color-muted);
  background: rgba(247, 249, 247, 0.9);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 999px;
  content: "Consider When Required";
  font-size: 10px;
  letter-spacing: 0.04em;
}

.resource-highlight-statement {
  padding: 16px 18px;
  color: var(--color-heading) !important;
  background: rgba(234, 243, 238, 0.72);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  font-weight: 820;
}

.resource-primary-product-link {
  padding: 8px 0;
  font-weight: 900;
}

.resource-secondary-product-link {
  font-size: 14px;
}

.resource-technical-note {
  padding: clamp(24px, 3.4vw, 36px);
  background:
    linear-gradient(145deg, rgba(247, 249, 247, 0.98), rgba(255, 255, 255, 0.96)),
    var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-left: 4px solid rgba(11, 107, 80, 0.72);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(18, 49, 38, 0.045);
}

.resource-layer-sequence {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.resource-layer-sequence li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(247, 249, 247, 0.86);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
}

.resource-layer-sequence span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  background: rgba(11, 107, 80, 0.1);
  border-radius: 999px;
}

.resource-layer-diagram {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.9), rgba(255, 255, 255, 0.96)),
    repeating-linear-gradient(0deg, rgba(18, 33, 38, 0.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(18, 33, 38, 0.035) 0 1px, transparent 1px 18px);
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(18, 33, 38, 0.08);
}

.resource-layer-diagram span {
  display: block;
  padding: 12px 16px;
  color: var(--color-heading);
  font-weight: 760;
  text-align: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* About page */
.about-page {
  width: min(100% - var(--desktop-page-gutter), 1480px);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 42px) 0 clamp(72px, 8vw, 112px);
  color: var(--color-text);
}

.about-hero {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: clamp(560px, 63vw, 760px);
  padding: clamp(44px, 6vw, 86px);
  background:
    linear-gradient(90deg, rgba(7, 63, 43, 0.88) 0%, rgba(7, 63, 43, 0.72) 43%, rgba(7, 63, 43, 0.22) 72%, rgba(7, 63, 43, 0.08) 100%),
    linear-gradient(180deg, rgba(18, 49, 38, 0.04), rgba(18, 49, 38, 0.34)),
    url("/image/about-gate-of-factory.webp") center center / cover no-repeat,
    var(--color-brand-deep);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  box-shadow: 0 28px 68px rgba(18, 49, 38, 0.14);
}

.about-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 72px);
  mix-blend-mode: soft-light;
}

.about-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 0.72fr);
  gap: clamp(28px, 4.2vw, 64px);
  align-items: center;
  min-height: calc(clamp(560px, 63vw, 760px) - clamp(88px, 12vw, 172px));
}

.about-hero h1 {
  align-self: center;
  max-width: 760px;
  margin: 0;
  color: var(--color-white);
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 0.99;
  letter-spacing: -0.035em;
}

.about-hero .section-kicker {
  grid-column: 1 / -1;
  align-self: start;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.about-hero-copy > p:not(.section-kicker),
.about-section-copy p,
.about-closing p {
  color: var(--color-text);
  line-height: 1.68;
}

.about-hero-copy > p:not(.section-kicker) {
  color: rgba(255, 255, 255, 0.86);
}

.about-hero-panel {
  align-self: center;
  padding: clamp(20px, 2.8vw, 30px);
  background: rgba(7, 63, 43, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.about-hero-panel p {
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 14px;
}

.about-hero-lead {
  max-width: 780px;
  font-size: clamp(18px, 1.5vw, 22px);
}

.about-editorial-media {
  overflow: hidden;
  margin: 0;
  background: var(--color-soft-green);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 22px;
  box-shadow: 0 22px 54px rgba(18, 49, 38, 0.1);
}

.about-editorial-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-editorial-media img {
  min-height: 360px;
}

.about-credibility-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 22px;
  margin: clamp(28px, 4vw, 46px) 0 0;
  padding: 18px 20px;
  list-style: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.about-credibility-strip li {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-hero .btn-primary {
  background: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.about-hero .btn-secondary {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(12px);
}

.about-hero .btn-secondary:hover,
.about-hero .btn-secondary:focus-visible {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.72);
}

.about-section,
.about-closing {
  margin-top: clamp(54px, 7vw, 96px);
}

.about-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 58px);
  background: var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 26px;
}

.about-formulation,
.about-production,
.about-lab,
.about-cooperation {
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.86), rgba(255, 255, 255, 0.94)),
    var(--color-soft-green);
}

.about-section h2,
.about-closing h2 {
  max-width: 780px;
  margin: 0 0 18px;
  color: var(--color-heading);
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.about-brand {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.56)),
    var(--color-surface);
}

.about-brand::before {
  position: absolute;
  top: -24%;
  right: -10%;
  width: 360px;
  height: 360px;
  content: "";
  background: radial-gradient(circle, rgba(0, 114, 60, 0.13), transparent 68%);
}

.about-brand > * {
  position: relative;
  z-index: 1;
}

.about-brand-visual {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.about-ownership-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.28fr);
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  color: var(--color-white);
  background:
    linear-gradient(135deg, rgba(7, 63, 43, 0.96), rgba(0, 114, 60, 0.88)),
    var(--color-brand-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(18, 49, 38, 0.16);
}

.about-ownership-card div {
  display: grid;
  gap: 8px;
}

.about-ownership-card span:not(.about-owner-link) {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-ownership-card strong {
  color: var(--color-white);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.12;
}

.about-owner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 34px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.about-chain {
  counter-reset: about-chain;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-chain li {
  position: relative;
  display: grid;
  min-height: 96px;
  align-content: end;
  padding: 16px 12px;
  color: var(--color-heading);
  font-size: 12px;
  font-weight: 820;
  text-align: left;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(18, 49, 38, 0.045);
}

.about-chain li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--color-primary);
  content: counter(about-chain, decimal-leading-zero);
  counter-increment: about-chain;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.about-chain li:not(:last-child)::after {
  position: absolute;
  top: 22px;
  right: -10px;
  z-index: 1;
  color: var(--color-primary);
  content: "→";
  font-weight: 900;
  transform: none;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(24px, 3vw, 34px) 0 0;
}

.about-facts div {
  padding: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 16px;
}

.about-facts dt {
  color: var(--color-primary);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 850;
  line-height: 1.05;
}

.about-facts dd {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-base {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.96)),
    var(--color-surface);
}

.about-base .about-section-copy {
  padding-left: clamp(0px, 1vw, 14px);
}

.about-base-media {
  position: relative;
  align-self: center;
  min-height: 0;
}

.about-base-media img {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-base-media figcaption {
  position: absolute;
  inset: auto 14px 12px;
  padding: 10px 14px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(7, 63, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.about-base .about-facts {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: clamp(26px, 3.2vw, 38px);
}

.about-base .about-facts div {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: rgba(234, 243, 238, 0.68);
  border-color: rgba(0, 114, 60, 0.14);
}

.about-base .about-facts dt {
  font-size: clamp(20px, 2vw, 30px);
}

.about-base .about-facts dd {
  margin: 0;
  color: var(--color-heading);
}

.about-video-section {
  position: relative;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.96)),
    var(--color-surface);
}

.about-video-section .about-section-copy {
  max-width: 640px;
}

.about-video-points {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.about-video-points li {
  position: relative;
  padding: 14px 16px 14px 44px;
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 760;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(18, 49, 38, 0.06);
}

.about-video-points li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 4px solid rgba(11, 107, 80, 0.14);
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(11, 107, 80, 0.06);
}

.about-video-frame {
  position: relative;
  margin: 0;
  padding: clamp(10px, 1.6vw, 18px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(234, 243, 238, 0.5)),
    var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 26px;
  box-shadow: 0 26px 70px rgba(18, 49, 38, 0.14);
}

.about-video-frame::before {
  content: "";
  position: absolute;
  inset: 18px auto auto 18px;
  z-index: 1;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: rgba(11, 107, 80, 0.78);
  box-shadow: 18px 0 0 rgba(11, 107, 80, 0.32), 36px 0 0 rgba(11, 107, 80, 0.16);
  pointer-events: none;
}

.about-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #122126;
}

.about-tech-grid,
.about-lab-columns,
.about-supply-points {
  display: grid;
  gap: 14px;
}

.about-tech-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-tech-grid article,
.about-lab-columns article,
.about-supply-points article {
  padding: clamp(18px, 2.4vw, 26px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 18px;
}

.about-tech-grid span,
.about-lab-columns h3,
.about-supply-points h3 {
  display: block;
  margin: 0 0 10px;
  color: var(--color-heading);
  font-size: 16px;
  font-weight: 850;
}

.about-tech-grid p,
.about-supply-points p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.about-production-steps,
.about-journey {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-production-steps li,
.about-journey li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 16px;
}

.about-production-steps span,
.about-journey li::before {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--color-primary);
  font-weight: 900;
  background: rgba(0, 114, 60, 0.1);
  border-radius: 999px;
}

.about-journey {
  counter-reset: about-journey;
}

.about-journey li {
  counter-increment: about-journey;
}

.about-journey li::before {
  content: counter(about-journey, decimal-leading-zero);
}

.about-lab {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

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

.about-lab-columns ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-lab-columns li {
  color: var(--color-muted);
  line-height: 1.55;
}

.about-lab-columns li::before {
  margin-right: 8px;
  color: var(--color-primary);
  content: "+";
  font-weight: 900;
}

.about-formulation,
.about-production,
.about-lab {
  position: relative;
  overflow: hidden;
  border-color: rgba(18, 33, 38, 0.08);
  box-shadow: none;
}

.about-video-section::before,
.about-formulation::before,
.about-production::before,
.about-lab::before {
  position: absolute;
  top: 0;
  right: clamp(24px, 4vw, 56px);
  left: clamp(24px, 4vw, 56px);
  height: 4px;
  content: "";
  background: linear-gradient(90deg, rgba(11, 107, 80, 0.74), rgba(11, 107, 80, 0.08));
  border-radius: 0 0 999px 999px;
}

.about-video-section > *,
.about-formulation > *,
.about-production > *,
.about-lab > * {
  position: relative;
  z-index: 1;
}

.about-formulation {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.96)),
    var(--color-surface);
}

.about-formulation .about-section-copy {
  max-width: 720px;
}

.about-formulation .about-tech-grid {
  counter-reset: formulationItem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-self: stretch;
  padding: clamp(14px, 2vw, 22px) 0;
  border-block: 1px solid rgba(18, 33, 38, 0.12);
}

.about-formulation .about-tech-grid article {
  counter-increment: formulationItem;
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.2vw, 26px) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.about-formulation .about-tech-grid article + article {
  border-top: 1px solid rgba(18, 33, 38, 0.1);
}

.about-formulation .about-tech-grid article::before {
  content: "0" counter(formulationItem);
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(11, 107, 80, 0.08);
  border: 1px solid rgba(11, 107, 80, 0.18);
  border-radius: 999px;
}

.about-formulation .about-tech-grid span,
.about-formulation .about-tech-grid p {
  grid-column: 2;
}

.about-formulation .about-tech-grid span {
  margin-bottom: 6px;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.02em;
}

.about-capability-note {
  padding: 16px 18px;
  margin: 22px 0 0;
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.62;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(11, 107, 80, 0.16);
  border-left: 4px solid rgba(11, 107, 80, 0.62);
  border-radius: 14px;
}

.about-formulation .text-link {
  margin-top: clamp(18px, 2.4vw, 28px);
}

.about-production {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.96)),
    var(--color-surface);
}

.about-production-steps {
  position: relative;
  gap: 0;
  padding-left: 12px;
}

.about-production-steps::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(11, 107, 80, 0), rgba(11, 107, 80, 0.34), rgba(11, 107, 80, 0));
}

.about-production-steps li {
  position: relative;
  grid-template-columns: 54px minmax(0, 1fr);
  padding: 18px 0 18px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.about-production-steps li + li {
  border-top: 1px solid rgba(18, 33, 38, 0.1);
}

.about-production-steps span {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid rgba(11, 107, 80, 0.18);
  box-shadow: 0 8px 22px rgba(11, 107, 80, 0.08);
}

.about-production-steps strong {
  color: var(--color-heading);
  font-size: clamp(15px, 1.2vw, 18px);
}

.about-lab {
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 1.14fr);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.96)),
    var(--color-surface);
}

.about-lab .about-section-copy {
  display: grid;
  align-content: center;
  min-height: 100%;
  padding: clamp(4px, 1vw, 14px) 0;
}

.about-lab .about-section-copy > p:not(.section-kicker) {
  max-width: 46ch;
}

.about-lab-summary {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin-top: clamp(22px, 3vw, 34px);
}

.about-lab-summary span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px 10px 36px;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 820;
  background: rgba(234, 243, 238, 0.64);
  border: 1px solid rgba(11, 107, 80, 0.14);
  border-radius: 999px;
}

.about-lab-summary span::before {
  position: absolute;
  left: 15px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(11, 107, 80, 0.08);
}

.about-lab-media {
  align-self: stretch;
}

.about-lab-media img {
  min-height: 0;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about-warehouse {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.about-warehouse > .about-editorial-media {
  align-self: stretch;
}

.about-warehouse > .about-editorial-media img {
  min-height: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-warehouse .about-section-copy {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  padding: clamp(26px, 3.6vw, 44px);
  color: var(--color-white);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(7, 63, 43, 0.97), rgba(0, 114, 60, 0.9)),
    var(--color-brand-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(18, 49, 38, 0.16);
}

.about-warehouse .about-section-copy::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.about-warehouse .about-section-copy > * {
  position: relative;
  z-index: 1;
}

.about-warehouse .section-kicker,
.about-warehouse h2,
.about-warehouse .about-section-copy > p {
  color: var(--color-white);
}

.about-warehouse .about-section-copy > p {
  color: rgba(255, 255, 255, 0.78);
}

.about-warehouse .about-supply-points article {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.about-warehouse .about-supply-points h3 {
  color: var(--color-white);
}

.about-warehouse .about-supply-points p {
  color: rgba(255, 255, 255, 0.72);
}

.about-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 24px;
}

.about-closing {
  padding: clamp(34px, 5vw, 64px);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(7, 63, 43, 0.96), rgba(0, 114, 60, 0.9)),
    var(--color-brand-deep);
  border-radius: 28px;
}

.about-closing .section-kicker,
.about-closing h2,
.about-closing p {
  color: var(--color-white);
}

.about-closing h2 {
  margin-inline: auto;
}

.about-closing p {
  max-width: 760px;
  margin-inline: auto;
}

.about-closing .hero-actions {
  justify-content: center;
}

.about-closing .text-link {
  margin-top: 22px;
  color: var(--color-white);
}

/* Contact conversion page */
.contact-page {
  width: min(100% - var(--desktop-page-gutter), 1480px);
  margin-inline: auto;
  padding: clamp(12px, 2vw, 26px) 0 clamp(72px, 8vw, 112px);
}

.contact-page > section {
  margin-top: clamp(42px, 5vw, 68px);
}

.contact-page > section:first-child {
  margin-top: 0;
}

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 56px);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 114, 60, 0.1), transparent 34%),
    linear-gradient(135deg, #fff 0%, rgba(234, 243, 238, 0.72) 100%);
  border: 1px solid rgba(0, 114, 60, 0.1);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(18, 49, 38, 0.08);
}

.contact-hero-copy {
  max-width: 820px;
}

.contact-hero h1 {
  max-width: 900px;
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.contact-hero-copy > p:not(.section-kicker) {
  max-width: 780px;
  margin: 16px 0 0;
  color: var(--color-text);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.68;
}

.contact-note {
  padding-left: 18px;
  border-left: 3px solid var(--color-primary);
}

.contact-hero-strip,
.contact-direct-panel,
.contact-method-grid article,
.contact-inquiry-grid button,
.contact-next,
.contact-starting-points {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.07);
}

.contact-hero-strip {
  display: grid;
  gap: 12px;
}

.contact-hero-strip article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 16px;
}

.contact-hero-strip span,
.contact-direct-panel h2,
.contact-method-grid span,
.contact-response-list h3 {
  display: block;
  color: var(--color-heading);
  font-size: 15px;
  font-weight: 850;
}

.contact-hero-strip p,
.contact-direct-panel p,
.contact-method-grid p,
.contact-next p {
  margin: 9px 0 0;
  color: var(--color-text);
  line-height: 1.65;
}

.contact-route-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 16px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-route-action::after {
  content: "->";
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-route-action--icon::after {
  content: "";
  width: 0;
}

.contact-route-action svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.contact-route-action svg path {
  transition: fill 180ms ease;
}

.contact-route-action:hover,
.contact-route-action:focus-visible {
  color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.contact-route-action:hover::after,
.contact-route-action:focus-visible::after {
  transform: translateX(4px);
}

.contact-route-action:hover svg path,
.contact-route-action:focus-visible svg path {
  fill: var(--color-primary-hover);
}

.contact-faq {
  padding: clamp(26px, 4vw, 48px) 0 0;
}

.contact-page .section-heading {
  max-width: 860px;
  margin: 0 auto clamp(24px, 3vw, 38px);
  text-align: center;
}

.contact-inquiry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.contact-inquiry-grid button {
  flex: 1 1 clamp(138px, 22%, 190px);
  min-height: 0;
  position: relative;
  padding: 9px 12px 9px 15px;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.contact-inquiry-grid button::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  background: transparent;
  border-radius: 999px;
  content: "";
  transition: background-color 180ms ease;
}

.contact-inquiry-grid button span {
  display: block;
  color: rgba(18, 33, 38, 0.78);
  font-size: 14px;
  font-weight: 760;
}

.contact-inquiry-grid button small {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.contact-inquiry-grid button[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(234, 243, 238, 0.98), rgba(255, 255, 255, 0.96));
  border-color: rgba(0, 114, 60, 0.38);
  box-shadow: 0 10px 24px rgba(0, 114, 60, 0.1);
}

.contact-inquiry-grid button[aria-pressed="true"]::before {
  background: var(--color-primary);
}

.contact-inquiry-grid button[aria-pressed="true"] span {
  color: var(--color-heading);
  font-weight: 900;
}

.contact-response-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.contact-response-list article {
  padding: 14px 0 0;
  border-top: 1px solid rgba(0, 114, 60, 0.12);
}

.contact-response-list article:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-response-type {
  margin: 0 0 6px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.contact-response-list h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: 15px;
  line-height: 1.25;
}

.contact-response-list p:not(.contact-response-type) {
  margin: 7px 0 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.55;
}

.contact-response-list dl {
  margin: 10px 0 0;
}

.contact-response-list dl div {
  display: grid;
  gap: 4px;
}

.contact-response-list dt {
  color: var(--color-heading);
  font-size: 12px;
  font-weight: 850;
}

.contact-response-list dd {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.45;
}

.contact-response-list .text-link {
  margin-top: 10px;
}

.contact-response-note {
  margin: 14px 0 0;
  padding-left: 12px;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.55;
  border-left: 2px solid rgba(0, 114, 60, 0.3);
}

.contact-main {
  display: grid;
  grid-template-columns: minmax(280px, 0.3fr) minmax(660px, 0.7fr);
  grid-template-areas: "support form";
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}

.contact-support {
  grid-area: support;
  display: grid;
  gap: 0;
  align-self: start;
  align-content: start;
  position: sticky;
  top: 96px;
}

.contact-direct-panel {
  padding: clamp(18px, 2vw, 24px);
}

.contact-direct-panel h2,
.contact-next h2,
.contact-starting-points h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.contact-direct-panel h2 {
  font-size: clamp(22px, 1.8vw, 28px);
}

.contact-quick-selector {
  display: grid;
  gap: 0;
  margin-top: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 16px;
}

.contact-quick-selector .contact-inquiry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.contact-quick-selector h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.contact-next {
  display: grid;
  grid-template-columns: minmax(240px, 0.52fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(155deg, rgba(234, 243, 238, 0.94), rgba(255, 255, 255, 0.98)),
    var(--color-soft-green);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.06);
}

.contact-next-heading {
  max-width: 560px;
}

.contact-next-heading p:not(.section-kicker) {
  color: var(--color-text);
  line-height: 1.68;
}

.contact-next-heading .text-link {
  margin-top: 18px;
}

.contact-next ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-next li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 clamp(16px, 2vw, 26px);
  border-right: 1px solid rgba(0, 114, 60, 0.12);
  border-bottom: 0;
}

.contact-next li:last-child {
  border-right: 0;
}

.contact-next li span {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
}

.contact-next li strong {
  color: var(--color-heading);
  font-size: 15px;
}

.contact-next li p {
  grid-column: auto;
}

.contact-rfq {
  grid-area: form;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  align-self: start;
  padding: clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 114, 60, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(234, 243, 238, 0.84), rgba(255, 255, 255, 0.96)),
    var(--color-soft-green);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(18, 49, 38, 0.12);
}

.contact-rfq::before,
.contact-rfq::after {
  display: none;
}

.contact-rfq .rfq-copy {
  max-width: none;
  padding-inline: 0;
}

.contact-rfq .form-panel {
  width: 100%;
  max-width: none;
  gap: 11px 14px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--color-surface);
  border-color: rgba(0, 114, 60, 0.1);
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.09);
}

.contact-rfq .form-panel label {
  min-width: 0;
  gap: 6px;
}

.contact-message-hint {
  display: block;
  margin-top: 4px;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.45;
}

.contact-rfq .form-panel :is(input, select, textarea) {
  min-width: 0;
}

.contact-selection-summary {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 14px;
}

.contact-selection-summary .doming-selection-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}

.contact-selection-summary [data-contact-clear-selection] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: rgba(234, 243, 238, 0.82);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 999px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.contact-selection-summary [data-contact-clear-selection]::before,
.contact-selection-summary [data-contact-clear-selection]::after {
  display: none;
}

.contact-selection-summary [data-contact-clear-selection]:hover,
.contact-selection-summary [data-contact-clear-selection]:focus-visible {
  color: var(--color-primary-hover);
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 114, 60, 0.32);
  box-shadow: 0 10px 24px rgba(18, 49, 38, 0.08);
  outline: 0;
  transform: translateY(-1px);
}

.contact-selection-summary h3 {
  margin: 0;
  font-size: 14px;
}

.contact-selection-summary dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.contact-selection-summary dl div {
  display: flex;
  gap: 5px;
  min-width: min(100%, 170px);
}

.contact-selection-summary dt,
.contact-selection-summary dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.contact-selection-summary dt {
  color: var(--color-heading);
  font-weight: 850;
}

.contact-selection-summary dd {
  color: var(--color-text);
}

.contact-selection-summary > .text-link {
  margin-top: 0;
  font-size: 13px;
}

.contact-technical-details {
  background: rgba(247, 249, 247, 0.72);
}

.contact-details-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 42px 12px 14px;
  color: var(--color-heading);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 238, 0.62));
  border: 0;
  border-radius: 8px;
}

.contact-details-toggle::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  content: "";
  transform: translateY(-65%) rotate(45deg);
  transition: transform 180ms ease;
}

.contact-details-toggle[aria-expanded="true"]::after {
  transform: translateY(-35%) rotate(225deg);
}

.contact-details-toggle small {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-details-toggle:focus-visible {
  outline: 3px solid rgba(0, 114, 60, 0.2);
  outline-offset: 3px;
}

.contact-details-toggle:hover {
  color: var(--color-primary-hover);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.86));
}

.contact-technical-details .epd-form-details-grid {
  padding-top: 12px;
}

.contact-technical-details .epd-form-details-grid[hidden] {
  display: none;
}

.contact-faq .cfp-faq-list {
  max-width: 980px;
  margin-inline: auto;
}

.contact-faq .section-heading {
  margin-bottom: 18px;
}

.contact-faq .section-heading h2 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.contact-starting-points {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.72), rgba(255, 255, 255, 0.96)),
    var(--color-soft-green);
}

.contact-starting-points .section-kicker,
.contact-starting-points h2 {
  color: var(--color-heading);
}

.contact-link-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.contact-link-strip a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 14px;
  color: var(--color-primary);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 12px;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms ease,
    border-color 220ms ease;
}

.contact-link-strip a::after {
  color: inherit;
  content: "->";
}

@media (hover: hover) {
  .contact-inquiry-grid button:hover,
  .contact-response-list article:hover {
    border-color: rgba(0, 114, 60, 0.28);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-1px);
  }

  .contact-link-strip a:hover,
  .contact-link-strip a:focus-visible {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 114, 60, 0.3);
    transform: translateX(4px);
  }
}

@media (max-width: 1180px) {
  .about-page {
    width: min(100% - clamp(24px, 5vw, 64px), 1480px);
  }

  .contact-page {
    width: min(100% - clamp(24px, 5vw, 64px), 1480px);
  }

  .contact-hero,
  .contact-main,
  .contact-next,
  .contact-starting-points {
    grid-template-columns: 1fr;
  }

  .contact-main {
    align-items: start;
    grid-template-areas:
      "form"
      "support";
  }

  .contact-support {
    min-height: 0;
    align-content: start;
    position: relative;
    top: auto;
  }

  .contact-next ol {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-next li {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 114, 60, 0.12);
  }

  .contact-next li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .contact-inquiry-grid,
  .contact-method-grid {
    grid-template-columns: 1fr;
  }

  .contact-link-strip {
    justify-content: flex-start;
  }

  .about-hero,
  .about-section,
  .about-lab,
  .about-warehouse {
    grid-template-columns: 1fr;
  }

  .about-hero-copy {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-hero-panel {
    max-width: 680px;
  }

  .about-tech-grid {
    grid-template-columns: 1fr;
  }

  .about-chain {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-chain li {
    min-height: 72px;
    text-align: left;
  }

  .about-chain li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -14px;
    left: 18px;
    transform: rotate(90deg);
  }

  .about-ownership-card {
    grid-template-columns: 1fr;
  }

  .about-owner-link {
    justify-self: start;
  }

}

@media (max-width: 760px) {
  .about-page {
    width: min(100% - 32px, 1480px);
  }

  .contact-page {
    width: min(100% - 32px, 1480px);
    padding-top: 10px;
  }

  .contact-hero,
  .contact-rfq,
  .contact-next,
  .contact-starting-points {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .contact-hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .contact-inquiry-grid,
  .contact-method-grid {
    grid-template-columns: 1fr;
  }

  .contact-inquiry-grid button {
    min-height: auto;
  }

  .contact-selection-summary dl,
  .contact-selection-summary .doming-selection-summary-heading,
  .contact-direct-links,
  .contact-link-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-hero,
  .about-section,
  .about-closing {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .about-hero {
    min-height: 620px;
    background:
      linear-gradient(180deg, rgba(7, 63, 43, 0.9) 0%, rgba(7, 63, 43, 0.78) 52%, rgba(7, 63, 43, 0.28) 100%),
      url("/image/about-gate-of-factory.webp") center center / cover no-repeat,
      var(--color-brand-deep);
  }

  .about-credibility-strip {
    justify-content: flex-start;
    border-radius: 18px;
  }

  .about-editorial-media img {
    min-height: 260px;
  }

  .about-base-media img {
    min-height: 0;
  }

  .about-facts,
  .about-base .about-facts div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .about-production-steps li,
  .about-journey li {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

.resource-wording-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.resource-wording-grid > div {
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
}

.resource-wording-grid h3 {
  margin-top: 0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resource-compact-flow {
  counter-reset: compact-flow;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.resource-compact-flow li {
  counter-increment: compact-flow;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--color-heading);
  background: rgba(234, 243, 238, 0.68);
  border: 1px solid rgba(11, 107, 80, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 780;
}

.resource-compact-flow li::before {
  color: var(--color-primary);
  content: counter(compact-flow, decimal-leading-zero);
  font-size: 11px;
  font-weight: 900;
}

.resource-checklist-table tbody td:nth-child(2) {
  color: var(--color-heading);
  background: rgba(234, 243, 238, 0.46);
  font-weight: 820;
}

.resource-article-faq {
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid rgba(18, 33, 38, 0.12);
}

.resource-faq-list {
  display: grid;
  gap: 12px;
}

.resource-faq-item {
  overflow: hidden;
  background: rgba(247, 249, 247, 0.96);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
}

.resource-faq-item button {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  color: var(--color-heading);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
}

.resource-faq-item button::after {
  content: "+";
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1;
}

.resource-faq-item button[aria-expanded="true"]::after {
  content: "-";
}

.resource-faq-panel {
  padding: 0 20px 20px;
}

.resource-article-page .resource-faq-list.is-enhanced .resource-faq-panel[hidden] {
  display: none;
}

.resource-article-cta {
  padding: clamp(24px, 3.2vw, 36px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.9), rgba(255, 255, 255, 0.98)),
    var(--color-surface);
  border: 1px solid rgba(0, 114, 60, 0.15);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.055);
}

@media (max-width: 1180px) {
  .resource-article-shell {
    width: min(100% - clamp(24px, 5vw, 64px), 1480px);
  }

  .resource-article-header {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .resource-article-layout {
    grid-template-columns: 1fr;
  }

  .resource-article-sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 760px) {
  .resource-article-shell {
    width: min(100% - 32px, 1480px);
  }

  .resource-article-header {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .resource-article-header h1 {
    font-size: clamp(36px, 12vw, 52px);
  }

  .resource-selection-callout ol {
    display: grid;
    grid-template-columns: 1fr;
  }

  .resource-selection-callout ol li {
    min-height: 78px;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .resource-selection-callout ol li::before {
    flex: 0 0 auto;
    margin-right: 12px;
    margin-bottom: 0;
  }

  .resource-selection-callout ol li::after {
    display: none;
  }

  .resource-selection-callout ul {
    grid-template-columns: 1fr;
  }

  .resource-wording-grid {
    grid-template-columns: 1fr;
  }

  .resource-article-body .text-link + .text-link {
    display: inline-flex;
    margin-top: 12px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-article-page *,
  .resource-article-page *::before,
  .resource-article-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.privacy-page {
  padding: clamp(58px, 8vw, 96px) clamp(18px, 5vw, 72px);
}

.privacy-content {
  max-width: 860px;
  margin: 0 auto;
}

.privacy-content h1 {
  font-size: clamp(38px, 5vw, 58px);
}

.privacy-content h2 {
  margin-top: 34px;
  font-size: clamp(24px, 3vw, 32px);
}

.privacy-content h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 22px);
}

.privacy-content p {
  color: var(--muted);
  font-size: 18px;
}

.privacy-meta {
  padding: 16px 18px;
  background: var(--color-soft-green);
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-radius: 10px;
}

.privacy-content ul {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}

.privacy-content li::marker {
  color: var(--green);
}

.privacy-content a {
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-home-link {
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 1180px) {
  .nav-menu {
    gap: 12px;
    font-size: 13px;
  }

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

  .product-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

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

@media (max-width: 940px) {
  .hero,
  .featured-solution,
  .custom-formulation,
  .b2b-support,
  .export-support,
  .rfq-form {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .featured-media-layered {
    min-height: 420px;
  }

  .featured-media-main {
    width: 88%;
  }

  .featured-media-inset {
    width: min(36%, 220px);
  }

  .application-grid,
  .application-features,
  .outdoor-panels,
  .problem-grid,
  .capability-grid,
  .problem-diagnostic,
  .problem-list,
  .problem-card-grid,
  .supply-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resin-comparison-visual {
    grid-template-columns: 1fr;
  }

  .comparison-divider {
    justify-self: center;
  }

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

}

@media (max-width: 760px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 74px;
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - 96px);
    overflow: auto;
    gap: 4px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu > a,
  .nav-dropdown-link,
  .nav-dropdown-toggle,
  .language-toggle {
    width: 100%;
    min-height: 44px;
    text-align: left;
  }

  .language-menu {
    position: static;
    display: none;
    width: 100%;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }

  .language-select.is-open .language-menu,
  .language-select:focus-within .language-menu {
    display: grid;
  }

  .nav-menu > a,
  .nav-dropdown-link,
  .nav-dropdown-toggle {
    padding: 10px 12px;
  }

  .nav-dropdown-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
  }

  .nav-dropdown-link {
    display: flex;
    align-items: center;
  }

  .nav-dropdown--linked .nav-dropdown-toggle {
    width: 44px;
    margin-left: 0;
    padding: 0;
    text-align: center;
  }

  .nav-dropdown-panel {
    position: static;
    display: none;
    width: 100%;
    margin: 0 0 8px;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown::after {
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-panel {
    display: grid;
  }

  h1 {
    font-size: 40px;
  }

  .logo img {
    width: 108px;
  }

  .trust-cards,
  .trust-row,
  .application-grid,
  .application-features,
  .application-feature,
  .outdoor-panels,
  .problem-diagnostic,
  .problem-card-grid,
  .parameter-grid,
  .product-cta,
  .product-grid,
  .problem-grid,
  .capability-grid,
  .problem-list,
  .supply-columns,
  .workflow-timeline,
  .workflow-grid,
  .form-panel {
    grid-template-columns: 1fr;
  }

  .process-problem-list {
    grid-template-columns: 1fr;
  }

  .comparison-sample {
    min-height: 220px;
  }

  .parameter-wide {
    grid-column: auto;
  }

  .support-media {
    min-height: 320px;
  }

  .workflow-timeline {
    gap: 0;
  }

  .workflow-timeline li {
    min-height: auto;
    padding: 0 0 30px 84px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .workflow-timeline li:not(:last-child)::before {
    position: absolute;
    top: 68px;
    bottom: 0;
    left: 33px;
    width: 1px;
    content: "";
    background: rgba(0, 114, 60, 0.28);
  }

  .workflow-timeline span {
    left: 0;
    border-color: var(--green-soft);
  }

  .application-feature.is-reversed img {
    order: 0;
  }

  .trust-row div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .problem-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer {
    padding-top: 36px;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-brand img {
    width: 108px;
  }
}

/* Solutions hub page */
.solutions-page section {
  padding: clamp(56px, 7vw, 92px) clamp(18px, 5vw, 72px);
}

.hero--corporate,
.hero--solution-hub,
.hero--selector,
.hero--gallery,
.hero--immersive {
  color: var(--color-heading);
}

.solutions-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: center;
  min-height: calc(88vh - 74px);
}

.solutions-hero.hero--solution-hub {
  grid-template-columns: minmax(0, 0.74fr) minmax(440px, 1.08fr);
  min-height: calc(82vh - 74px);
  background: var(--color-bg);
}

.solutions-hero h1 {
  max-width: 820px;
}

.solutions-hero-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, 0.85fr);
  grid-template-rows: repeat(2, minmax(120px, 1fr));
  gap: 12px;
}

.solutions-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(18, 49, 38, 0.1);
  transform: scale(1);
  transition: box-shadow 220ms ease, transform 320ms ease;
}

.solutions-hero-visual img:first-child {
  grid-row: 1 / span 2;
}

.solutions-hero-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.solutions-hero-mosaic a {
  position: relative;
  display: grid;
  min-height: clamp(210px, 20vw, 320px);
  align-content: end;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-heading);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(18, 33, 38, 0.12);
  text-decoration: none;
  transform: translateY(0);
  transition: box-shadow 260ms ease, transform 260ms ease;
}

.solutions-hero-mosaic a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(18, 33, 38, 0.06) 0%, rgba(18, 33, 38, 0.28) 42%, rgba(18, 33, 38, 0.76) 100%),
    linear-gradient(135deg, rgba(11, 107, 80, 0.28), transparent 46%);
  pointer-events: none;
}

.solutions-hero-mosaic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 420ms ease;
}

.solutions-hero-mosaic .mosaic-number,
.solutions-hero-mosaic strong,
.solutions-hero-mosaic em {
  position: relative;
  z-index: 2;
}

.solutions-hero-mosaic .mosaic-number {
  margin-bottom: clamp(34px, 4vw, 56px);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 820;
  letter-spacing: -0.025em;
}

.solutions-hero-mosaic strong {
  max-width: 13em;
  color: var(--color-white);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.solutions-hero-mosaic em {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-style: normal;
  font-weight: 760;
}

.solutions-hero-mosaic em::after {
  content: "\2192";
  transition: transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .solutions-hero-mosaic a:hover {
    box-shadow: 0 28px 60px rgba(18, 33, 38, 0.18);
    transform: translateY(-3px);
  }

  .solutions-hero-mosaic a:hover img {
    transform: scale(1.045);
  }

  .solutions-hero-mosaic a:hover em::after {
    transform: translateX(4px);
  }
}

.choice-process,
.solution-matrix {
  background: var(--green-soft);
}

.solutions-page .choice-process {
  padding-top: clamp(42px, 5vw, 70px);
  background: var(--color-bg);
}

.solutions-page .choice-process::before,
.solutions-page .choice-process::after {
  display: none;
}

.choice-steps,
.sample-test-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  padding: 0;
  margin: clamp(28px, 4vw, 46px) 0 0;
  list-style: none;
  counter-reset: none;
}

.choice-steps li,
.sample-test-steps li {
  position: relative;
  min-height: 190px;
  padding: 74px 22px 22px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
    radial-gradient(circle at 18% 0%, rgba(0, 114, 60, 0.1), transparent 34%);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(18, 49, 38, 0.07);
  transform: translateY(0);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-steps li::before,
.sample-test-steps li::before {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 2px;
  content: "";
  background: var(--color-primary);
  opacity: 0.3;
  transform: scaleX(0.72);
  transform-origin: right;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-steps li::after,
.sample-test-steps li::after {
  position: absolute;
  inset: auto -30px -44px auto;
  width: 120px;
  height: 120px;
  content: "";
  background: radial-gradient(circle, rgba(0, 114, 60, 0.1), transparent 66%);
  opacity: 0.75;
  pointer-events: none;
}

.choice-steps span,
.sample-test-steps span {
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0;
  color: var(--green);
  background: rgba(0, 114, 60, 0.09);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: background 220ms ease, color 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-steps strong,
.sample-test-steps h3 {
  display: block;
  margin-bottom: 10px;
  color: var(--color-heading);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.choice-steps p,
.sample-test-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.sample-test-steps + .btn {
  margin-top: clamp(28px, 4vw, 44px);
}

@media (hover: hover) and (pointer: fine) {
  .choice-steps li:hover,
  .sample-test-steps li:hover {
    border-color: rgba(0, 114, 60, 0.3);
    box-shadow: 0 24px 50px rgba(18, 49, 38, 0.12);
    transform: translateY(-4px);
  }

  .choice-steps li:hover::before,
  .sample-test-steps li:hover::before {
    opacity: 0.7;
    transform: scaleX(1);
  }

  .choice-steps li:hover span,
  .sample-test-steps li:hover span {
    color: var(--color-white);
    background: var(--color-primary);
    transform: translateY(-2px) scale(1.04);
  }
}

.solution-features {
  display: grid;
  gap: 0;
}

.solution-features > .section-heading {
  margin-bottom: clamp(50px, 7vw, 84px);
}

.solution-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
  padding: clamp(64px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
}

.solution-feature:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.solution-feature.is-reversed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-feature.is-reversed .solution-feature-media {
  order: 2;
}

.solution-feature-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--green-soft);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(18, 49, 38, 0.11);
}

.solution-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 420ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .solution-feature-media:hover img {
    transform: scale(1.018);
  }
}

.solutions-custom img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(18, 49, 38, 0.1);
}

.solution-feature-content {
  min-width: 0;
}

.solution-feature h3 {
  max-width: 720px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.solution-feature-content > p,
.solutions-custom p,
.solutions-distributor p {
  color: var(--muted);
  font-size: 17px;
}

.solution-detail-grid {
  display: grid;
  gap: 24px;
  margin: 30px 0;
}

.solution-detail-grid h4,
.resin-options h4,
.recommended-system h4 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-detail-grid ul,
.solutions-capability-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.solution-application-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.solution-application-group li {
  padding: 8px 11px;
  color: var(--green-dark);
  background: rgba(0, 114, 60, 0.075);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(18, 49, 38, 0.025);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.solution-problem-group ul,
.solution-requirement-group ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.solution-problem-group li,
.solution-requirement-group li {
  position: relative;
  min-height: 48px;
  padding: 10px 10px 10px 34px;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(18, 49, 38, 0.025);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.solution-problem-group li {
  color: #74463e;
  background: rgba(148, 73, 58, 0.065);
  border: 1px solid rgba(148, 73, 58, 0.14);
}

.solution-requirement-group li {
  color: var(--ink);
  background: rgba(0, 114, 60, 0.055);
  border: 1px solid rgba(0, 114, 60, 0.12);
}

.solution-problem-group li::before,
.solution-requirement-group li::before {
  position: absolute;
  top: 11px;
  left: 11px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.solution-problem-group li::before {
  color: #93493b;
  border: 1px solid rgba(147, 73, 59, 0.42);
  content: "!";
}

.solution-requirement-group li::before {
  color: var(--green);
  content: "\2713";
}

@media (hover: hover) and (pointer: fine) {
  .solution-application-group li:hover,
  .solution-problem-group li:hover,
  .solution-requirement-group li:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 114, 60, 0.2);
    box-shadow: 0 9px 22px rgba(18, 49, 38, 0.065);
    transform: translateY(-2px);
  }
}

.solution-conversion {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  overflow: hidden;
  background: var(--green-soft);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(18, 49, 38, 0.08);
}

.solution-conversion::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--color-primary);
  content: "";
}

.resin-options,
.recommended-system {
  margin: 0;
  padding: 0;
  background: transparent;
}

.solution-conversion .btn {
  margin-top: 24px;
  box-shadow: 0 9px 22px rgba(0, 114, 60, 0.18);
}

.resin-options dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.resin-options dl > div {
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(18, 49, 38, 0.08);
  border-radius: 6px;
}

.resin-options dt,
.recommended-system strong {
  color: var(--ink);
  font-weight: 800;
}

.resin-options dd,
.recommended-system p {
  margin: 4px 0 0;
  color: var(--muted);
}

.recommended-system strong {
  display: block;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
}

.comparison-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.comparison-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.comparison-table thead th {
  color: var(--green);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-table tbody th {
  font-weight: 800;
}

.comparison-table tbody td {
  color: var(--muted);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.solutions-custom {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.solutions-capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 28px;
}

.solutions-capability-list li {
  position: relative;
  min-height: 52px;
  padding: 14px 16px 14px 42px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  font-weight: 800;
  line-height: 1.35;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.solutions-capability-list li::before {
  position: absolute;
  top: 15px;
  left: 16px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: var(--color-primary);
  content: "\2713";
  border: 1px solid rgba(0, 114, 60, 0.28);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.solutions-distributor {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(360px, 0.56fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
  background: var(--color-bg);
  color: var(--color-heading);
}

.solutions-distributor .section-kicker,
.solutions-distributor p {
  color: var(--color-muted);
}

.distributor-capabilities {
  display: grid;
  gap: 0;
  padding: 0;
  margin: clamp(28px, 4vw, 42px) 0;
  list-style: none;
}

.distributor-capabilities li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.distributor-capabilities li:first-child {
  padding-top: 0;
}

.distributor-capabilities span {
  color: var(--color-primary);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}

.distributor-capabilities strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.distributor-capabilities p {
  max-width: 560px;
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

.solutions-distributor h2 {
  max-width: 760px;
}

@media (hover: hover) and (pointer: fine) {
  .solutions-capability-list li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }
}

.solutions-distributor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
}

.solutions-distributor-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: clamp(10px, 1.5vw, 18px);
  background: var(--color-surface);
  border: 1px solid rgba(18, 49, 38, 0.1);
  border-radius: 10px;
  box-shadow: 0 20px 46px rgba(18, 49, 38, 0.12);
}

.solutions-distributor-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 940px) {
  .solutions-hero,
  .solution-feature,
  .solution-feature.is-reversed,
  .solutions-custom,
  .solutions-distributor {
    grid-template-columns: 1fr;
  }

  .solutions-hero.hero--solution-hub {
    grid-template-columns: 1fr;
    min-height: auto;
  }

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

  .solution-feature.is-reversed .solution-feature-media {
    order: 0;
  }

  .solution-feature {
    gap: 36px;
  }

  .choice-steps,
  .sample-test-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .solutions-page section {
    padding: 44px 18px;
  }

  .solutions-hero {
    min-height: auto;
  }

  .solutions-hero-visual,
  .choice-steps,
  .sample-test-steps,
  .solution-detail-grid,
  .solutions-capability-list {
    grid-template-columns: 1fr;
  }

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

  .solutions-hero-mosaic a {
    min-height: 190px;
  }

  .solution-feature {
    gap: 28px;
    padding: 54px 0;
  }

  .solution-problem-group ul,
  .solution-requirement-group ul {
    grid-template-columns: 1fr;
  }

  .solution-conversion .btn {
    width: 100%;
  }

  .solutions-hero-visual img:first-child {
    grid-row: auto;
  }

  .solutions-hero-visual img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .solutions-hero-mosaic {
    grid-template-columns: 1fr;
  }

  .solutions-hero-mosaic a {
    min-height: 210px;
  }
}

@media (max-width: 600px) {
  .featured-benefits {
    grid-template-columns: 1fr;
  }

  .featured-benefits li {
    min-height: 68px;
  }
}

/* Small resin crafts solution page */
.craft-page {
  background: var(--color-bg);
}

.craft-page > section {
  padding: clamp(64px, 8vw, 108px) clamp(18px, 5vw, 72px);
}

.craft-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.02fr);
  gap: clamp(40px, 6vw, 86px);
  align-items: center;
  min-height: calc(100vh - 74px);
  background: var(--color-bg);
}

.craft-hero h1 {
  max-width: 920px;
  font-size: clamp(42px, 5.1vw, 70px);
}

.craft-hero-media,
.craft-editorial-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(18, 49, 38, 0.11);
}

.craft-hero-media {
  transform: translateY(0);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.craft-hero-media img,
.craft-editorial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-hero-media img {
  transform: scale(1);
  transition: transform 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .craft-hero-media:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.2), 17px 19px 0 rgba(0, 114, 60, 0.12);
    transform: translateY(-4px);
  }

  .craft-hero-media:hover img {
    transform: scale(1.025);
  }
}

.craft-application-fit {
  display: grid;
  grid-template-columns: minmax(380px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
  background: var(--color-bg);
}

.craft-application-fit > div > p,
.craft-distributor > div > p,
.craft-custom > div > p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.craft-application-list,
.craft-capability-list,
.craft-secondary-list,
.craft-custom-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 22px 0;
  list-style: none;
}

.craft-application-list li,
.craft-capability-list li,
.craft-secondary-list li,
.craft-custom-list li {
  position: relative;
  min-height: 46px;
  padding: 12px 14px 12px 36px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  font-weight: 750;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.craft-application-list li::before,
.craft-capability-list li::before,
.craft-secondary-list li::before,
.craft-custom-list li::before {
  position: absolute;
  top: 13px;
  left: 14px;
  color: var(--color-primary);
  content: "\2713";
  font-weight: 900;
}

.craft-selector-section,
.craft-sample,
.craft-custom,
.craft-rfq {
  background: var(--color-soft-green);
}

.craft-product-options {
  background: var(--color-bg);
}

.craft-requirement-selector {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0, 114, 60, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.08);
}

.craft-requirement-selector.is-enhanced .selector-stage {
  padding-top: clamp(22px, 3vw, 34px);
}

.craft-requirement-selector.is-enhanced .selector-stage legend {
  padding-top: clamp(10px, 1.5vw, 18px);
}

.craft-action-row,
.craft-distributor .btn {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.craft-problems,
.craft-distributor {
  background: var(--color-bg);
}

.craft-product-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
}

.craft-product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(18, 49, 38, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.07);
}

.craft-product-card-primary {
  border-color: rgba(0, 114, 60, 0.22);
  box-shadow: 0 24px 60px rgba(18, 49, 38, 0.1);
}

.craft-product-card > p:not(.section-kicker) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.craft-product-card .craft-action-row,
.craft-product-card > .btn {
  margin-top: auto;
}

.craft-pour-guidance {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
  background: var(--color-soft-green);
}

.craft-guidance-copy {
  max-width: 620px;
}

.craft-guidance-copy .section-heading {
  margin-bottom: 0;
}

.craft-guidance-panel {
  width: 100%;
  max-width: none;
  padding: clamp(24px, 4vw, 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.08);
}

.craft-guidance-panel p {
  margin-top: 0;
  color: var(--color-heading);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 650;
  line-height: 1.25;
}

.craft-guidance-panel ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.craft-guidance-panel li {
  min-height: 78px;
  padding: 18px 16px;
  color: var(--color-heading);
  background: var(--color-soft-green);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  font-weight: 800;
  line-height: 1.35;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .craft-application-list li:hover,
  .craft-capability-list li:hover,
  .craft-secondary-list li:hover,
  .craft-custom-list li:hover,
  .craft-guidance-panel li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }
}

.craft-visible-note {
  margin: clamp(24px, 4vw, 36px) 0 14px;
  padding-left: 16px;
  color: var(--muted);
  border-left: 3px solid var(--color-primary);
}

.craft-problem-list {
  padding: 0;
  margin: 0 0 34px;
  list-style: none;
}

.craft-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}

.craft-problem-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 84px;
  border-top: 1px solid var(--line);
}

.craft-problem-list span,
.craft-distributor-list span {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.craft-problem-list strong {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.3;
}

.craft-distributor,
.craft-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
}

.craft-distributor-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 941px) {
  .craft-distributor > div {
    order: 2;
  }

  .craft-distributor .craft-distributor-list {
    order: 1;
  }
}

.craft-distributor-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .craft-distributor-list li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }
}

@media (max-width: 940px) {
  .craft-hero,
  .craft-application-fit,
  .craft-product-options-grid,
  .craft-pour-guidance,
  .craft-distributor,
  .craft-custom {
    grid-template-columns: 1fr;
  }

  .craft-hero {
    min-height: auto;
  }

  .craft-guidance-copy {
    max-width: 760px;
  }

}

@media (max-width: 760px) {
  .craft-page > section {
    padding: 52px 18px;
  }

  .craft-hero h1 {
    font-size: 40px;
  }

  .craft-application-list,
  .craft-capability-list,
  .craft-secondary-list,
  .craft-custom-list,
  .craft-guidance-panel ul,
  .craft-problem-list {
    grid-template-columns: 1fr;
  }

  .craft-guidance-panel li {
    min-height: auto;
  }

}

/* River table and deep-pour epoxy solution page */
.river-page {
  background: var(--color-bg);
}

.river-page > section {
  padding: clamp(64px, 8vw, 108px) clamp(18px, 5vw, 72px);
}

.river-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(340px, 0.9fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  min-height: calc(100vh - 74px);
  background: var(--color-bg);
}

.river-hero.hero--immersive,
.flooring-hero.hero--gallery {
  grid-template-columns: 1fr;
  gap: clamp(26px, 4.5vw, 50px);
  align-items: start;
  min-height: auto;
  padding-bottom: clamp(52px, 7vw, 92px);
}

.river-hero.hero--immersive > div:first-child,
.flooring-hero.hero--gallery > div:first-child {
  max-width: 960px;
}

.river-hero.hero--immersive .hero-subtitle,
.flooring-hero.hero--gallery .hero-subtitle {
  max-width: 820px;
}

.river-hero.hero--immersive .doming-trust-row {
  display: none;
}

.river-hero h1 {
  max-width: 920px;
}

.river-hero-media,
.river-editorial-media {
  display: block;
  overflow: hidden;
  background: var(--green-soft);
  border-radius: 10px;
  box-shadow: 0 22px 54px rgba(18, 49, 38, 0.12);
  transform: translateY(0);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.hero--immersive .river-hero-media,
.hero--gallery .flooring-hero-media {
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  box-shadow: 0 24px 58px rgba(18, 49, 38, 0.13);
}

.river-hero-media img,
.river-editorial-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1);
  transition: transform 320ms ease;
}

.hero--immersive .river-hero-media img {
  height: 100%;
  aspect-ratio: auto;
}

.hero--gallery .flooring-hero-media img {
  aspect-ratio: auto;
}

.hero-spec-strip {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(-18px, -1.8vw, -10px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.9)),
    var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(18, 33, 38, 0.11);
}

.hero-spec-strip::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--color-primary), rgba(11, 107, 80, 0.18));
}

.hero-spec-strip dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin: 0;
}

.hero-spec-strip dl > div {
  position: relative;
  min-height: 112px;
  padding: 20px 18px 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82)),
    var(--color-surface);
  border: 1px solid rgba(11, 107, 80, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(18, 33, 38, 0.045);
  transform: translateY(0);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.hero-spec-strip dl > div::before {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 18px;
  content: "";
  background: var(--color-primary);
  opacity: 0.55;
  transform: scaleX(0.72);
  transform-origin: left;
  transition: opacity 220ms ease, transform 260ms ease;
}

.hero-spec-strip dl > div::after {
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 98px;
  height: 98px;
  content: "";
  background: radial-gradient(circle, rgba(11, 107, 80, 0.08), transparent 68%);
  pointer-events: none;
}

.hero-spec-strip dt {
  margin-bottom: 8px;
  color: var(--color-heading);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 780;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-spec-strip dd {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.hero-spec-strip p {
  max-width: 920px;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-left: 14px;
  color: var(--color-muted);
  border-left: 3px solid rgba(11, 107, 80, 0.22);
  font-size: 14px;
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .hero-spec-strip dl > div:hover {
    border-color: rgba(11, 107, 80, 0.24);
    box-shadow: 0 16px 34px rgba(18, 33, 38, 0.085);
    transform: translateY(-3px);
  }

  .hero-spec-strip dl > div:hover::before {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@media (max-width: 940px) {
  .hero-spec-strip dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hero--immersive .river-hero-media,
  .hero--gallery .flooring-hero-media {
    aspect-ratio: 4 / 3;
  }

  .hero-spec-strip {
    margin-top: 0;
    padding: 18px;
  }

  .hero-spec-strip dl {
    grid-template-columns: 1fr;
  }

  .hero-spec-strip dl > div {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spec-strip dl > div,
  .hero-spec-strip dl > div::before {
    transition: none;
  }

  .hero-spec-strip dl > div:hover {
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .river-hero-media:hover,
  .river-editorial-media:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.18), 16px 18px 0 rgba(0, 114, 60, 0.1);
    transform: translateY(-4px);
  }

  .river-hero-media:hover img,
  .river-editorial-media:hover img {
    transform: scale(1.025);
  }
}

.river-application-fit,
.river-exotherm,
.river-preparation,
.river-supply,
.river-custom {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: center;
}

.river-application-fit,
.river-problems,
.river-supply,
.river-rfq {
  background: var(--color-bg);
}

.river-selector-section,
.river-guidance,
.river-comparison,
.river-sample,
.river-custom {
  background: var(--color-soft-green);
}

.river-exotherm,
.river-preparation {
  background: #f5f7f5;
}

.river-preparation > div {
  order: 2;
}

.river-preparation > .river-preparation-list {
  order: 1;
}

.river-supply > div {
  order: 2;
}

.river-supply > .craft-distributor-list {
  order: 1;
}

.river-application-list,
.river-preparation-list,
.river-number-list,
.river-problem-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.river-application-list,
.river-preparation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 28px;
}

.river-application-list li,
.river-preparation-list li {
  position: relative;
  min-height: 52px;
  padding: 14px 14px 14px 38px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  font-weight: 750;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.river-application-list li::before,
.river-preparation-list li::before {
  position: absolute;
  top: 15px;
  left: 14px;
  color: var(--color-primary);
  content: "\2713";
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .river-application-list li:hover,
  .river-preparation-list li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }
}

.river-condition-selector {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0, 114, 60, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.08);
}

.river-condition-selector.is-enhanced .selector-stage {
  padding-top: clamp(22px, 3vw, 34px);
}

.river-condition-selector.is-enhanced .selector-stage legend {
  padding-top: clamp(10px, 1.5vw, 18px);
}

.river-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  overflow: hidden;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.river-tech-grid div {
  min-height: 146px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--color-surface);
}

.river-tech-grid dt {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.river-tech-grid dd {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.22;
}

.river-property-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.river-property-list li {
  position: relative;
  min-height: 50px;
  padding: 13px 14px 13px 38px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  font-weight: 750;
}

.river-property-list li::before {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--color-primary);
  content: "\2713";
  font-weight: 900;
}

.river-visible-note {
  max-width: 980px;
  margin: clamp(24px, 4vw, 36px) 0 14px;
  padding-left: 16px;
  color: var(--muted);
  border-left: 3px solid var(--color-primary);
}

.river-number-list {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.river-number-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 22px;
  background: var(--color-surface);
}

.river-number-list span,
.river-problem-list span {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.river-number-list strong,
.river-problem-list strong {
  color: var(--color-heading);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.35;
}

.river-number-list p {
  margin: 0;
  color: var(--muted);
}

.river-comparison .text-link {
  display: inline-flex;
  margin-top: 24px;
}

.river-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 88px);
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.river-problem-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  min-height: 86px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.river-supply .craft-distributor-list,
.river-custom .craft-custom-list {
  max-width: 620px;
}

@media (max-width: 1040px) {
  .river-hero,
  .river-application-fit,
  .river-exotherm,
  .river-preparation,
  .river-supply,
  .river-custom {
    grid-template-columns: 1fr;
  }

  .river-preparation > div,
  .river-preparation > .river-preparation-list,
  .river-supply > div,
  .river-supply > .craft-distributor-list {
    order: initial;
  }

  .river-hero {
    min-height: auto;
  }

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

@media (max-width: 760px) {
  .river-page > section {
    padding: 52px 18px;
  }

  .river-hero h1 {
    font-size: 40px;
  }

  .river-application-list,
  .river-preparation-list,
  .river-property-list,
  .river-tech-grid,
  .river-problem-list {
    grid-template-columns: 1fr;
  }

  .river-number-list li,
  .river-problem-list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Decorative epoxy flooring solution page */
.flooring-page {
  background: var(--color-bg);
}

.flooring-page > section {
  padding: clamp(58px, 7vw, 96px) clamp(22px, 6vw, 96px);
}

.flooring-hero,
.flooring-application-fit,
.flooring-layering,
.flooring-calculator,
.flooring-preparation,
.flooring-supply,
.flooring-custom {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(340px, 1.04fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: center;
}

.flooring-hero {
  min-height: calc(100vh - 78px);
  background: var(--color-bg);
}

.flooring-hero h1 {
  max-width: 920px;
}

.flooring-hero-media,
.flooring-editorial-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 14px;
  box-shadow: 0 28px 58px rgba(18, 49, 38, 0.12), 14px 16px 0 rgba(0, 114, 60, 0.08);
  transform: translateY(0);
  transition: box-shadow 260ms ease, transform 260ms ease;
}

.flooring-hero-media img,
.flooring-editorial-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms ease;
}

@media (hover: hover) {
  .flooring-hero-media:hover,
  .flooring-editorial-media:hover {
    box-shadow: 0 34px 68px rgba(18, 49, 38, 0.17), 16px 18px 0 rgba(0, 114, 60, 0.1);
    transform: translateY(-4px);
  }

  .flooring-hero-media:hover img,
  .flooring-editorial-media:hover img {
    transform: scale(1.025);
  }
}

.flooring-application-fit,
.flooring-problems,
.flooring-preparation,
.flooring-supply {
  background: var(--color-bg);
}

.flooring-selector-section,
.flooring-guidance,
.flooring-limitations,
.flooring-sample,
.flooring-custom {
  background: var(--color-soft-green);
}

.flooring-layering,
.flooring-calculator {
  background: #f5f7f5;
}

.flooring-application-list,
.flooring-preparation-list,
.flooring-layer-list,
.flooring-problem-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.flooring-application-list,
.flooring-preparation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 28px;
}

.flooring-application-list li,
.flooring-preparation-list li {
  position: relative;
  min-height: 52px;
  padding: 14px 14px 14px 38px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  font-weight: 750;
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.flooring-application-list li::before,
.flooring-preparation-list li::before {
  position: absolute;
  top: 15px;
  left: 14px;
  color: var(--color-primary);
  content: "+";
}

@media (hover: hover) {
  .flooring-application-list li:hover,
  .flooring-preparation-list li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-3px);
  }
}

.flooring-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 34px 0 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-border);
}

.flooring-tech-grid div {
  min-height: 116px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
}

.flooring-tech-grid dt {
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flooring-tech-grid dd {
  margin: 0;
  color: var(--color-heading);
  font-weight: 760;
  line-height: 1.45;
}

.flooring-visible-note,
.flooring-warning {
  max-width: 920px;
  padding: 18px 20px;
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 10px;
}

.flooring-warning {
  margin-top: 28px;
  border-color: rgba(160, 80, 40, 0.24);
  background: rgba(255, 255, 255, 0.86);
  font-weight: 720;
}

.flooring-layer-list {
  display: grid;
  gap: 16px;
}

.flooring-layer-list li,
.flooring-problem-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.flooring-layer-list span,
.flooring-problem-list span {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 850;
}

.flooring-layer-list strong,
.flooring-problem-list strong {
  display: block;
  color: var(--color-heading);
  font-size: 18px;
}

.flooring-layer-list p,
.flooring-problem-list p {
  grid-column: 2;
  margin: 6px 0 0;
  color: var(--color-muted);
}

.flooring-quantity-calculator {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 4vw, 34px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.08);
}

.flooring-quantity-calculator label {
  display: grid;
  gap: 8px;
  color: var(--color-heading);
  font-weight: 760;
}

.flooring-quantity-calculator input,
.flooring-quantity-calculator select {
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-heading);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.flooring-calculator-result {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: var(--color-soft-green);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.flooring-calculator-result span {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flooring-calculator-result strong {
  color: var(--color-heading);
  font-size: clamp(22px, 3vw, 32px);
}

.flooring-distinction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.flooring-distinction-grid article {
  min-height: 180px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 12px;
}

.flooring-distinction-grid span {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.flooring-distinction-grid h3 {
  margin-bottom: 10px;
  color: var(--color-heading);
  font-size: 20px;
}

.flooring-distinction-grid p {
  color: var(--color-muted);
}

.flooring-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 72px);
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.flooring-supply .craft-distributor-list,
.flooring-custom .craft-custom-list {
  max-width: 620px;
}

@media (max-width: 1040px) {
  .flooring-hero,
  .flooring-application-fit,
  .flooring-layering,
  .flooring-calculator,
  .flooring-preparation,
  .flooring-supply,
  .flooring-custom {
    grid-template-columns: 1fr;
  }

  .flooring-hero {
    min-height: auto;
  }

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

@media (max-width: 760px) {
  .flooring-page > section {
    padding: 52px 18px;
  }

  .flooring-hero h1 {
    font-size: 40px;
  }

  .flooring-application-list,
  .flooring-preparation-list,
  .flooring-tech-grid,
  .flooring-distinction-grid,
  .flooring-problem-list {
    grid-template-columns: 1fr;
  }

  .flooring-layer-list li,
  .flooring-problem-list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .flooring-layer-list p,
  .flooring-problem-list p {
    grid-column: auto;
  }
}

/* Products hub page */
.products-page {
  background: var(--color-bg);
}

.products-page > section {
  padding: clamp(52px, 6vw, 84px) clamp(22px, 6vw, 96px);
}

.products-catalogue-hero,
.products-catalogue,
.products-rfq {
  background: var(--color-bg);
}

.products-catalogue-hero {
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(56px, 6vw, 84px);
}

.products-catalogue-hero > div,
.products-catalogue-heading {
  max-width: 880px;
}

.products-catalogue-hero h1 {
  max-width: 760px;
}

.products-catalogue-hero .hero-subtitle {
  max-width: 760px;
}

.products-catalogue-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.products-directory {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}

.products-filter-panel {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(18, 33, 38, 0.06);
}

.products-filter-panel button {
  width: 100%;
  padding: 11px 12px;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.products-filter-panel button.is-active,
.products-filter-panel button:hover,
.products-filter-panel button:focus-visible {
  color: var(--color-primary);
  background: var(--color-soft-green);
  border-color: rgba(11, 107, 80, 0.16);
}

@media (hover: hover) {
  .products-filter-panel button:hover {
    transform: translateX(3px);
  }
}

.products-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}

.catalogue-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(18, 33, 38, 0.06);
  transform: translateY(0);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.catalogue-product-card[hidden] {
  display: none;
}

.catalogue-product-card picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef4f0;
}

.catalogue-product-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}

.catalogue-product-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(18px, 2vw, 24px);
}

.catalogue-product-label {
  margin-bottom: 14px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.catalogue-product-card h3 {
  margin-bottom: 14px;
  color: var(--color-heading);
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.08;
}

.catalogue-product-card dl {
  margin: 0 0 14px;
}

.catalogue-product-card dl div {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 11px;
  background: var(--color-bg);
  border: 1px solid rgba(11, 107, 80, 0.12);
  border-radius: 999px;
}

.catalogue-product-card dt {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalogue-product-card dd {
  margin: 0;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 780;
}

.catalogue-product-card p {
  margin-bottom: 22px;
  color: var(--color-muted);
  line-height: 1.62;
}

.catalogue-product-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.products-page .catalogue-product-actions .text-link {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  overflow: hidden;
  color: var(--color-heading);
  background: rgba(247, 249, 247, 0.78);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(18, 33, 38, 0.035);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.25;
  text-decoration: none;
  transform: translateY(0);
  transition: color 180ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.products-page .catalogue-product-actions .text-link:first-child {
  color: var(--color-primary);
  background: rgba(234, 243, 238, 0.72);
  border-color: rgba(11, 107, 80, 0.18);
}

.products-page .catalogue-product-actions .text-link::before {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  content: "";
  background: linear-gradient(90deg, rgba(11, 107, 80, 0.1), rgba(11, 107, 80, 0));
  opacity: 0;
  transform: translateX(-18%);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.products-page .catalogue-product-actions .text-link::after {
  position: relative;
  z-index: 1;
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  color: currentColor;
  content: "\2192";
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(11, 107, 80, 0.12);
  border-radius: 50%;
  transform: translateX(0) scale(1);
  transition: background-color 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.products-page .catalogue-product-actions .text-link:first-child::after {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(11, 107, 80, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .products-page .catalogue-product-actions .text-link:hover {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(11, 107, 80, 0.26);
    box-shadow: 0 12px 28px rgba(18, 33, 38, 0.075);
    transform: translateY(-2px);
  }

  .products-page .catalogue-product-actions .text-link:hover::before {
    opacity: 1;
    transform: translateX(0);
  }

  .products-page .catalogue-product-actions .text-link:hover::after {
    background: rgba(234, 243, 238, 0.92);
    border-color: rgba(11, 107, 80, 0.28);
    transform: translateX(4px) scale(1.04);
  }
}

.products-page .catalogue-product-actions .text-link:focus-visible {
  color: var(--color-primary);
  border-color: rgba(11, 107, 80, 0.34);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.products-page .catalogue-product-actions .text-link:active {
  transform: translateY(0) scale(0.99);
}

.catalogue-product-card-secondary {
  background: linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
}

@media (hover: hover) {
  .catalogue-product-card:hover {
    border-color: rgba(11, 107, 80, 0.22);
    box-shadow: 0 24px 56px rgba(18, 33, 38, 0.1);
    transform: translateY(-3px);
  }

  .catalogue-product-card:hover img {
    transform: scale(1.025);
  }
}

.products-compact-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--color-soft-green);
}

.products-compact-custom > div {
  max-width: 760px;
}

.products-compact-custom h2 {
  max-width: 720px;
}

.products-compact-custom p:not(.section-kicker) {
  max-width: 760px;
  color: var(--color-muted);
}

@media (max-width: 1180px) {
  .products-catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .products-directory,
  .products-compact-custom {
    grid-template-columns: 1fr;
  }

  .products-filter-panel {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .products-page > section {
    padding: 52px 18px;
  }

  .products-catalogue-hero h1 {
    font-size: 40px;
  }

  .products-filter-panel,
  .products-catalogue-grid {
    grid-template-columns: 1fr;
  }

  .products-filter-panel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .products-filter-panel button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* Shared product detail framework */
.product-detail-page {
  --product-page-bg: #f7f9f7;
  --product-surface: #ffffff;
  --product-ink: var(--color-heading);
  --product-muted: var(--color-muted);
  --product-accent: var(--color-primary);
  --product-accent-deep: var(--color-primary-hover);
  --product-tint: #eaf3ee;
  --product-border: rgba(18, 49, 38, 0.12);
  --product-border-strong: rgba(18, 49, 38, 0.2);
  --product-radius: 10px;
  color: var(--product-ink);
  background: var(--product-page-bg);
  padding-bottom: clamp(56px, 7vw, 96px);
  scroll-margin-top: 96px;
}

.product-detail-theme-doming {
  --product-media-bg: #f2f5f2;
}

.product-detail-page > section,
.product-detail-page > .product-breadcrumb,
.product-detail-page .product-detail-subnav > div {
  width: min(calc(100% - (var(--desktop-page-gutter) * 2)), 1580px);
  margin-right: auto;
  margin-left: auto;
}

.product-detail-page > section {
  position: relative;
  padding: clamp(46px, 5vw, 72px);
  scroll-margin-top: 96px;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 16px 44px rgba(18, 49, 38, 0.045);
}

.product-detail-page > section.is-anchor-highlight {
  animation: product-anchor-frame 2200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-detail-page > section::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(234, 243, 238, 0.78), rgba(234, 243, 238, 0) 58%),
    linear-gradient(180deg, rgba(0, 114, 60, 0.075), rgba(0, 114, 60, 0));
  opacity: 0;
  transform: scale(0.985);
}

.product-detail-page > section.is-anchor-highlight::after {
  animation: product-anchor-glow 2200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-detail-page > section > * {
  position: relative;
  z-index: 1;
}

.product-detail-page.is-anchor-highlight {
  outline: 0;
}

@keyframes product-anchor-frame {
  0% {
    border-color: var(--product-border);
    box-shadow: 0 16px 44px rgba(18, 49, 38, 0.045), 0 0 0 0 rgba(0, 114, 60, 0);
  }

  24% {
    border-color: rgba(0, 114, 60, 0.28);
    box-shadow: 0 20px 54px rgba(18, 49, 38, 0.072), 0 0 0 5px rgba(0, 114, 60, 0.052);
  }

  58% {
    border-color: rgba(0, 114, 60, 0.22);
    box-shadow: 0 18px 48px rgba(18, 49, 38, 0.06), 0 0 0 3px rgba(0, 114, 60, 0.032);
  }

  100% {
    border-color: var(--product-border);
    box-shadow: 0 16px 44px rgba(18, 49, 38, 0.045), 0 0 0 0 rgba(0, 114, 60, 0);
  }
}

@keyframes product-anchor-glow {
  0% {
    opacity: 0;
    transform: scale(0.985);
  }

  18% {
    opacity: 0.92;
    transform: scale(1);
  }

  54% {
    opacity: 0.5;
    transform: scale(1.006);
  }

  100% {
    opacity: 0;
    transform: scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page > section.is-anchor-highlight {
    animation: none;
    border-color: rgba(0, 114, 60, 0.34);
    box-shadow: 0 18px 48px rgba(18, 49, 38, 0.06), 0 0 0 4px rgba(0, 114, 60, 0.055);
  }

  .product-detail-page > section.is-anchor-highlight::after {
    animation: none;
    opacity: 0.36;
    transform: none;
  }
}

.product-detail-page > section + section {
  margin-top: clamp(22px, 2.6vw, 36px);
}

.product-detail-page .section-heading {
  max-width: 850px;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.product-detail-page .section-heading > p:not(.section-kicker),
.epd-application-copy > p:not(.section-kicker, .epd-limitation-note, .epd-inline-link) {
  max-width: 68ch;
  color: var(--product-muted);
  line-height: 1.68;
}

.product-detail-page h2 {
  max-width: 920px;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.product-detail-page .section-kicker {
  color: var(--product-accent);
}

.product-detail-page .product-breadcrumb {
  padding-top: 20px;
  padding-bottom: 8px;
  background: transparent;
}

.product-detail-page .product-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 0;
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  list-style: none;
}

.product-detail-page .product-breadcrumb li:not(:last-child)::after {
  margin-left: 7px;
  color: rgba(18, 49, 38, 0.36);
  content: "/";
}

.product-detail-page .product-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.product-detail-page .product-breadcrumb a:hover,
.product-detail-page .product-breadcrumb a:focus-visible {
  color: var(--product-accent);
}

.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(400px, 0.96fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
  padding: clamp(24px, 3vw, 42px) !important;
  margin-top: 12px;
  background: var(--product-surface) !important;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 18px 50px rgba(18, 49, 38, 0.06);
}

.product-detail-summary {
  order: 2;
  padding: clamp(4px, 1vw, 14px) 0;
}

.product-detail-hero h1 {
  max-width: 720px;
  margin: 0 0 20px;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.product-detail-hero .hero-subtitle {
  max-width: 64ch;
  margin-bottom: 0;
  color: var(--product-muted);
  line-height: 1.68;
  white-space: pre-line;
}

.product-detail-hero .hero-actions {
  margin-top: clamp(24px, 3vw, 32px);
}

.product-gallery {
  order: 1;
  min-width: 0;
}

.product-gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--product-media-bg);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.product-gallery-stage .product-detail-hero-image {
  display: block;
  width: 100%;
  height: 100%;
}

.product-gallery-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 180ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-gallery-stage[data-gallery-fit="cover"] img {
  object-fit: cover;
}

.product-gallery-stage[data-gallery-fit="portrait-video"] {
  background:
    radial-gradient(circle at 50% 38%, rgba(234, 243, 238, 0.9), rgba(247, 249, 247, 0.48) 42%, rgba(18, 49, 38, 0.05) 100%),
    var(--product-media-bg);
}

.product-gallery-video {
  display: block;
  width: auto;
  max-width: min(58%, 360px);
  height: 100%;
  object-fit: contain;
  background: #0f1f18;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 12px;
  box-shadow: 0 22px 54px rgba(18, 49, 38, 0.16);
}

.product-gallery-stage.is-switching :is(img, video) {
  opacity: 0.42;
}

.product-gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-top: 12px;
}

.product-gallery-thumb {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  height: 68px;
  min-height: 68px;
  padding: 7px;
  color: var(--product-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid var(--product-border);
  border-radius: 8px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-gallery-thumb :is(img, video) {
  width: 68px;
  height: 51px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
}

.product-gallery-thumb video {
  background: #0f1f18;
}

.product-gallery-thumb:first-child img {
  object-fit: contain;
  background: var(--product-media-bg);
}

.product-gallery-thumb:hover,
.product-gallery-thumb:focus-visible,
.product-gallery-thumb.is-active {
  color: var(--product-ink);
  background: var(--product-surface);
  border-color: rgba(0, 114, 60, 0.42);
}

.product-gallery-thumb:hover {
  transform: translateY(-2px);
}

.product-gallery-thumb:focus-visible {
  outline: 3px solid rgba(0, 114, 60, 0.18);
  outline-offset: 2px;
}

.epd-purchase-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  padding: 0;
  margin: clamp(26px, 3vw, 34px) 0 0;
  list-style: none;
  border-top: 1px solid var(--product-border);
}

.epd-purchase-signals li {
  position: relative;
  min-width: 0;
  padding: 13px 0 13px 28px;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
  border-bottom: 1px solid rgba(18, 49, 38, 0.09);
}

.epd-purchase-signals li::before {
  position: absolute;
  top: 13px;
  left: 0;
  width: 16px;
  height: 16px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg%20t%3D%221784600620484%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%222156%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M521.728%2088.576c-244.736%200-443.733333%20198.997333-443.733333%20443.733333s198.997333%20443.733333%20443.733333%20443.733334%20443.733333-198.997333%20443.733333-443.733334-199.168-443.733333-443.733333-443.733333z%20m0%20819.2c-207.018667%200-375.466667-168.448-375.466667-375.466667s168.448-375.466667%20375.466667-375.466666%20375.466667%20168.448%20375.466667%20375.466666-168.448%20375.466667-375.466667%20375.466667z%22%20fill%3D%22%230b6b50%22%20p-id%3D%222157%22%3E%3C/path%3E%3Cpath%20d%3D%22M682.325333%20403.285333L486.912%20598.698667l-116.565333-116.565334c-13.312-13.312-34.986667-13.312-48.298667%200-13.312%2013.312-13.312%2034.986667%200%2048.298667l164.864%20164.864%20243.712-243.712c13.312-13.312%2013.312-34.986667%200-48.298667s-34.986667-13.312-48.298667%200z%22%20fill%3D%22%230b6b50%22%20p-id%3D%222158%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

.product-detail-facts {
  padding: 0 28px !important;
  margin-top: 14px;
  background: var(--product-surface) !important;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.product-detail-facts dl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
}

.product-detail-facts dl > div {
  min-width: 0;
  padding: 20px clamp(12px, 1.5vw, 22px) 22px;
  border-right: 1px solid rgba(18, 49, 38, 0.1);
}

.product-detail-facts dl > div:first-child {
  padding-left: 0;
}

.product-detail-facts dl > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.product-detail-facts dt {
  margin-bottom: 7px;
  color: var(--product-accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-detail-facts dd {
  margin: 0;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.45;
}

.product-detail-subnav {
  overflow-x: auto;
  margin-top: clamp(18px, 2.5vw, 30px);
  margin-bottom: clamp(22px, 3vw, 36px);
}

.product-detail-subnav > div {
  display: flex;
  width: min(calc(100% - (var(--desktop-page-gutter) * 2)), 1580px);
  gap: 8px;
  align-items: center;
  padding: 10px;
  overflow-x: auto;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 14px 36px rgba(18, 49, 38, 0.05);
}

.product-detail-subnav-label {
  flex: 0 0 auto;
  padding: 0 10px;
  color: var(--product-accent);
  font-size: 10px;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-detail-subnav a {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 12px;
  color: var(--product-muted);
  font-size: 12px;
  font-weight: 720;
  background: rgba(247, 249, 247, 0.82);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.product-detail-subnav a::after {
  display: none;
}

.product-detail-subnav a:hover,
.product-detail-subnav a:focus-visible,
.product-detail-subnav .product-detail-subnav-cta {
  color: var(--product-accent);
  background: rgba(0, 114, 60, 0.075);
  border-color: rgba(0, 114, 60, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  .product-detail-subnav a:hover {
    transform: translateY(-1px);
  }
}

.product-detail-subnav-cta {
  margin-left: auto;
  color: var(--color-white) !important;
  background: var(--product-accent) !important;
  border-color: var(--product-accent) !important;
}

.epd-formula-selection,
.epd-applications,
.epd-performance,
.epd-technical,
.epd-sample-testing,
.epd-faq,
.product-detail-rfq {
  border-top: 0;
}

.epd-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.epd-direction-panel {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 34px);
  background: transparent;
  border-right: 1px solid var(--product-border);
}

.epd-direction-panel:last-child {
  border-right: 0;
}

.epd-direction-panel-accent {
  background: var(--product-tint);
}

.epd-direction-label {
  margin: 0 0 14px;
  color: var(--product-accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.epd-direction-panel h3 {
  margin: 0 0 14px;
  color: var(--product-ink);
  font-size: clamp(20px, 1.6vw, 25px);
  line-height: 1.2;
}

.epd-direction-panel > p:not(.epd-direction-label, .epd-reference-note) {
  margin: 0 0 20px;
  color: var(--product-muted);
  line-height: 1.62;
}

.epd-formula-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
}

.epd-formula-codes span {
  padding: 6px 9px;
  color: var(--product-accent-deep);
  font-size: 11px;
  font-weight: 820;
  background: rgba(0, 114, 60, 0.075);
  border: 1px solid rgba(0, 114, 60, 0.15);
  border-radius: 5px;
}

.epd-direction-panel-accent .epd-formula-codes span {
  background: rgba(255, 255, 255, 0.72);
}

.epd-direction-panel h4 {
  margin: 0 0 10px;
  color: var(--product-ink);
  font-size: 12px;
  letter-spacing: 0;
}

.epd-direction-panel ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0 0 24px;
  color: var(--product-muted);
  font-size: 13px;
  list-style: none;
}

.epd-direction-panel li {
  position: relative;
  padding-left: 18px;
}

.epd-direction-panel li::before {
  position: absolute;
  top: 0.68em;
  left: 1px;
  width: 8px;
  height: 2px;
  content: "";
  background: var(--product-accent);
}

.epd-direction-panel > .text-link {
  align-self: flex-start;
  margin-top: auto;
}

.epd-reference-note {
  padding: 14px 0 0;
  margin: 0 0 22px;
  color: var(--product-muted);
  font-size: 12px;
  line-height: 1.58;
  border-top: 1px solid rgba(18, 49, 38, 0.12);
}

.epd-optional-formula-note {
  max-width: 920px;
  padding: 16px 18px;
  margin: 22px 0 0;
  background: rgba(234, 243, 238, 0.72);
  border: 1px solid rgba(11, 107, 80, 0.14);
  border-radius: 12px;
}

.epd-matrix-disclosure {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  margin-top: 16px;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.epd-matrix-disclosure .section-kicker {
  margin-bottom: 5px;
}

.epd-matrix-disclosure h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 25px);
}

.epd-disclosure-toggle {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 35px 10px 14px;
  color: var(--product-accent-deep);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(0, 114, 60, 0.28);
  border-radius: 6px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.epd-disclosure-toggle::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 180ms ease;
}

.epd-disclosure-toggle[aria-expanded="true"]::after {
  transform: translateY(-25%) rotate(225deg);
}

.epd-disclosure-toggle:hover {
  color: #ffffff;
  background: var(--product-accent);
  border-color: var(--product-accent);
}

.epd-matrix-panel {
  padding: 18px;
  margin-top: 10px;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.epd-matrix-panel[hidden] {
  display: none;
}

.comparison-table-wrap,
.epd-technical-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--product-border);
  border-radius: 8px;
  scrollbar-color: rgba(0, 114, 60, 0.42) rgba(18, 49, 38, 0.07);
  scrollbar-width: thin;
}

.epd-formula-table {
  min-width: 920px;
  margin: 0;
}

.epd-table-note {
  max-width: 78ch;
  margin: 14px 0 0;
  color: var(--product-muted);
  font-size: 12px;
  line-height: 1.6;
}

.epd-technical-selector {
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 18px 42px rgba(18, 49, 38, 0.06);
}

.epd-technical-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 6px;
  background: rgba(18, 49, 38, 0.055);
}

.epd-technical-tabs button {
  min-height: 48px;
  padding: 12px 14px;
  color: var(--product-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 780;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid transparent;
  border-radius: 8px;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.epd-technical-tabs button:hover,
.epd-technical-tabs button:focus-visible {
  color: var(--product-accent-deep);
  background: #fff;
  border-color: rgba(0, 114, 60, 0.18);
  box-shadow: 0 10px 24px rgba(18, 49, 38, 0.08);
  transform: translateY(-1px);
}

.epd-technical-tabs button.is-active {
  color: #fff;
  background: var(--product-accent);
  border-color: var(--product-accent);
  box-shadow: 0 14px 28px rgba(0, 114, 60, 0.18);
}

.epd-technical-panel {
  padding: clamp(22px, 3vw, 34px);
}

.epd-technical-panel[hidden] {
  display: none;
}

.epd-technical-panel-heading {
  max-width: 760px;
  margin: 0 0 20px;
}

.epd-technical-panel-heading h3 {
  margin: 0 0 8px;
  color: var(--product-ink);
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}

.epd-technical-panel-heading p:last-child {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.62;
}

.epd-technical .epd-table-note {
  margin-top: 18px;
}

.epd-technical > .btn {
  margin-top: 22px;
}

.epd-technical-custom-note {
  display: flex;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  margin-top: 18px;
  background: rgba(234, 243, 238, 0.76);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 12px;
}

.epd-technical-custom-note p {
  max-width: 72ch;
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.62;
}

.epd-technical-custom-note .text-link {
  flex: 0 0 auto;
}

.epd-packaging-reference-note {
  max-width: 86ch;
  padding: 16px 18px;
  margin: 16px 0 0;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.62;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(18, 49, 38, 0.12);
  border-left: 4px solid var(--product-accent);
  border-radius: 12px;
}

@media (max-width: 720px) {
  .epd-technical-tabs {
    grid-template-columns: 1fr;
  }

  .epd-technical-tabs button {
    text-align: left;
  }

  .epd-technical-custom-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

.epd-applications {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.epd-application-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--product-media-bg);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 18px 40px rgba(18, 49, 38, 0.075);
}

.epd-application-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.epd-application-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
  padding: 0;
  margin: 24px 0;
  list-style: none;
}

.epd-application-list li {
  position: relative;
  padding: 11px 12px 11px 31px;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 720;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 7px;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.epd-application-list li::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 8px;
  height: 4px;
  content: "";
  border-bottom: 2px solid var(--product-accent);
  border-left: 2px solid var(--product-accent);
  transform: translateY(-70%) rotate(-45deg);
}

.epd-limitation-note {
  padding: 14px 16px;
  color: var(--product-muted);
  font-size: 12px;
  line-height: 1.58;
  background: rgba(255, 255, 255, 0.68);
  border-left: 3px solid rgba(0, 114, 60, 0.48);
}

.epd-inline-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  align-items: center;
  margin-top: 20px;
  color: var(--product-muted);
  font-size: 13px;
}

.epd-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

.epd-performance-grid article {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.5vw, 32px);
  border-right: 1px solid var(--product-border);
  border-bottom: 1px solid var(--product-border);
  transition: background-color 180ms ease;
}

.epd-performance-grid article:nth-child(3n) {
  border-right: 0;
}

.epd-performance-grid article:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.epd-performance-grid article:hover {
  background: rgba(234, 243, 238, 0.56);
}

.epd-performance-grid span {
  display: block;
  margin-bottom: 18px;
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 820;
}

.epd-performance-grid h3 {
  margin: 0 0 9px;
  font-size: 18px;
}

.epd-performance-grid p {
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.62;
}

.epd-technical-table {
  width: 100%;
  min-width: 760px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--product-surface);
}

.epd-technical-table th,
.epd-technical-table td {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(18, 49, 38, 0.09);
}

.epd-technical-table thead th {
  color: var(--product-accent-deep);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.05em;
  background: var(--product-tint);
  text-transform: uppercase;
}

.epd-technical-table tbody th {
  width: 31%;
  color: var(--product-ink);
  font-weight: 760;
}

.epd-technical-table tbody tr:nth-child(even) {
  background: rgba(247, 249, 247, 0.82);
}

.epd-technical-table tbody tr:last-child th,
.epd-technical-table tbody tr:last-child td {
  border-bottom: 0;
}

.epd-technical > .btn {
  margin-top: 24px;
}

.epd-sample-testing .sample-test-steps {
  margin-top: 0;
}

.epd-sample-testing > .btn {
  margin-top: clamp(30px, 4vw, 44px);
}

.epd-faq-list {
  max-width: 1080px;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
}

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

.epd-faq-list details:last-child {
  border-bottom: 0;
}

.epd-faq-list summary {
  position: relative;
  padding: 20px 56px 20px 20px;
  color: var(--product-ink);
  font-size: 15px;
  font-weight: 760;
  list-style: none;
  cursor: pointer;
}

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

.epd-faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 9px;
  height: 9px;
  content: "";
  border-right: 2px solid var(--product-accent);
  border-bottom: 2px solid var(--product-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}

.epd-faq-list details[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
}

.epd-faq-list details > p {
  max-width: 82ch;
  padding: 0 56px 20px 20px;
  margin: 0;
  color: var(--product-muted);
  line-height: 1.66;
}

.product-detail-rfq {
  display: block !important;
  padding: clamp(34px, 4vw, 56px) !important;
  margin-top: clamp(24px, 3vw, 42px);
  text-align: center;
  background: var(--product-surface) !important;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 18px 50px rgba(18, 49, 38, 0.055);
}

.product-detail-rfq .rfq-copy {
  max-width: 780px;
  margin: 0 auto;
}

.product-detail-rfq .form-panel {
  margin-top: 0;
  text-align: left;
  background: var(--product-page-bg);
  border-color: var(--product-border);
}

.product-detail-rfq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-top: 22px;
}

.product-detail-rfq-links .text-link {
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  color: var(--product-accent-deep);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.25;
  text-decoration: none;
  background: rgba(234, 243, 238, 0.66);
  border: 1px solid rgba(11, 107, 80, 0.14);
  border-radius: 999px;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-detail-rfq-links .text-link::before {
  display: none;
}

.product-detail-rfq-links .text-link::after {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(11, 107, 80, 0.13);
  border-radius: 999px;
}

.product-detail-rfq-links .text-link:hover,
.product-detail-rfq-links .text-link:focus-visible {
  color: var(--product-accent-deep);
  background: #fff;
  border-color: rgba(11, 107, 80, 0.28);
  box-shadow: 0 12px 28px rgba(18, 49, 38, 0.07);
  transform: translateY(-1px);
}

.product-detail-rfq-links .text-link:hover::after,
.product-detail-rfq-links .text-link:focus-visible::after {
  transform: translateX(3px);
}

.product-detail-summary :is(.pud-solution-link, .cce-solution-link, .rte-solution-link, .dfe-solution-link, .epc-custom-link) .text-link {
  padding: 3px 0;
  text-decoration: none;
}

.product-detail-summary :is(.pud-solution-link, .cce-solution-link, .rte-solution-link, .dfe-solution-link, .epc-custom-link) .text-link::before {
  bottom: 0;
}

.product-rfq-disclosure {
  max-width: 980px;
  margin: clamp(24px, 3vw, 34px) auto 0;
}

.product-rfq-disclosure > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.product-rfq-disclosure > summary::-webkit-details-marker {
  display: none;
}

.product-rfq-form-shell {
  margin-top: clamp(22px, 3vw, 34px);
}

.product-related-products .section-heading {
  max-width: 760px;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.product-related-card {
  display: grid;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.product-related-media {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background: var(--product-media-bg);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius);
  box-shadow: 0 12px 30px rgba(18, 49, 38, 0.045);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.product-related-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(10px, 1.4vw, 18px);
}

.product-related-card span {
  color: var(--product-ink);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 780;
  line-height: 1.18;
}

.product-related-card p {
  max-width: 34ch;
  margin: -6px 0 0;
  color: var(--product-muted);
  line-height: 1.58;
}

.product-related-action {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 34px);
}

@media (hover: hover) and (pointer: fine) {
  .product-related-card:hover .product-related-media {
    box-shadow: 0 18px 40px rgba(18, 49, 38, 0.085);
    transform: translateY(-3px);
  }

  .product-related-card:hover span {
    color: var(--product-accent);
  }
}

@media (max-width: 940px) {
  .product-related-grid {
    grid-template-columns: 1fr;
  }
}

.epd-selection-summary {
  padding: 16px;
  margin-top: 22px;
  background: var(--product-tint);
  border: 1px solid rgba(0, 114, 60, 0.16);
  border-radius: 8px;
}

.epd-selection-summary > div {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.epd-selection-summary h3 {
  margin: 0;
  font-size: 14px;
}

.epd-selection-summary p {
  margin: 9px 0 0;
  color: var(--product-accent-deep);
  font-weight: 720;
}

.epd-selection-summary button {
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.epd-form-details {
  padding: 0;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 8px;
}

.epd-form-details summary {
  position: relative;
  padding: 14px 42px 14px 15px;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 760;
  list-style: none;
  cursor: pointer;
}

.epd-form-details summary::after {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid var(--product-accent);
  border-bottom: 2px solid var(--product-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}

.epd-form-details[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
}

.epd-form-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rfq-field-gap, 16px);
  padding: 4px 15px 15px;
}

.epd-application-media:hover img,
.product-gallery-stage:hover img {
  transform: scale(1.012);
}

.epd-application-list li:hover {
  color: var(--product-accent-deep);
  border-color: rgba(0, 114, 60, 0.28);
  transform: translateX(3px);
}

.epd-disclosure-toggle:focus-visible,
.epd-faq-list summary:focus-visible,
.epd-form-details summary:focus-visible,
.epd-selection-summary button:focus-visible {
  outline: 3px solid rgba(0, 114, 60, 0.18);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 34px;
  }

  .product-detail-facts dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-detail-facts dl > div {
    border-bottom: 1px solid var(--product-border);
  }

  .product-detail-facts dl > div:nth-child(3n) {
    border-right: 0;
  }

  .product-detail-facts dl > div:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .product-detail-facts dl > div:first-child {
    padding-left: clamp(12px, 1.5vw, 22px);
  }

  .product-detail-facts dl > div:last-child {
    padding-right: clamp(12px, 1.5vw, 22px);
  }

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

  .epd-direction-panel:nth-child(2) {
    border-right: 0;
  }

  .epd-direction-panel-accent {
    grid-column: 1 / -1;
    border-top: 1px solid var(--product-border);
  }

}

@media (max-width: 980px) {
  .product-detail-hero,
  .epd-applications {
    grid-template-columns: 1fr;
  }

  .product-detail-summary {
    order: 2;
  }

  .product-gallery {
    order: 1;
  }

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

  .epd-performance-grid article,
  .epd-performance-grid article:nth-child(3n) {
    border-right: 1px solid var(--product-border);
    border-bottom: 1px solid var(--product-border);
  }

  .epd-performance-grid article:nth-child(2n) {
    border-right: 0;
  }

  .epd-performance-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

}

@media (max-width: 720px) {
  .product-detail-page > section,
  .product-detail-page > .product-breadcrumb,
  .product-detail-page .product-detail-subnav > div {
    width: calc(100% - 32px);
  }

  .product-detail-page > section {
    padding: 38px 20px;
  }

  .product-detail-page h2 {
    font-size: clamp(29px, 9vw, 38px);
  }

  .product-detail-hero {
    gap: 28px;
    padding: 18px !important;
  }

  .product-detail-summary {
    order: 1;
  }

  .product-gallery {
    order: 2;
  }

  .product-detail-hero h1 {
    font-size: clamp(35px, 11vw, 48px);
  }

  .product-detail-hero .hero-actions,
  .product-detail-hero .hero-actions .btn {
    width: 100%;
  }

  .product-gallery-thumbnails {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
  }

  .product-gallery-thumb {
    flex: 0 0 210px;
    scroll-snap-align: start;
  }

  .epd-purchase-signals,
  .epd-application-list,
  .epd-direction-grid,
  .epd-performance-grid,
  .epd-form-details-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-facts {
    padding: 0 14px !important;
  }

  .product-detail-facts dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail-facts dl > div,
  .product-detail-facts dl > div:nth-child(3n) {
    padding: 16px 10px;
    border-right: 1px solid var(--product-border);
    border-bottom: 1px solid var(--product-border);
  }

  .product-detail-facts dl > div:nth-child(2n) {
    border-right: 0;
  }

  .product-detail-facts dl > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .epd-direction-panel,
  .epd-direction-panel:nth-child(2),
  .epd-direction-panel-accent {
    grid-column: auto;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .epd-direction-panel:last-child {
    border-bottom: 0;
  }

  .epd-matrix-disclosure {
    align-items: flex-start;
    flex-direction: column;
  }

  .epd-disclosure-toggle {
    width: 100%;
    text-align: left;
  }

  .epd-performance-grid article,
  .epd-performance-grid article:nth-child(2n),
  .epd-performance-grid article:nth-child(3n),
  .epd-performance-grid article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .epd-performance-grid article:last-child {
    border-bottom: 0;
  }

  .product-detail-rfq {
    padding: 24px 18px !important;
  }

  .epd-faq-list summary {
    padding: 18px 48px 18px 16px;
  }

  .epd-faq-list details > p {
    padding: 0 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page *,
  .product-detail-page *::before,
  .product-detail-page *::after {
    scroll-behavior: auto !important;
  }

  .product-gallery-stage img,
  .product-gallery-thumb,
  .epd-application-media img,
  .epd-application-list li,
  .epd-disclosure-toggle::after,
  .epd-faq-list summary::after,
  .epd-form-details summary::after {
    transition: none !important;
    transform: none !important;
  }
}
/* Doming resin commercial solution page */
.doming-page {
  background: var(--color-bg);
}

.doming-page > section {
  padding: clamp(64px, 8vw, 108px) clamp(18px, 5vw, 72px);
}

.doming-page h2 {
  max-width: 920px;
}

.doming-page .section-heading {
  max-width: 880px;
  margin-bottom: clamp(30px, 5vw, 52px);
}

.doming-page .section-heading > p:not(.section-kicker),
.doming-application-fit > div > p,
.doming-custom > div > p,
.doming-distributor > div > p {
  color: var(--muted);
  font-size: 17px;
}

.doming-back-link,
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--green);
  font-weight: 800;
  text-underline-offset: 4px;
}

.doming-back-link {
  position: relative;
  margin-bottom: 22px;
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.doming-back-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform 180ms ease;
}

.doming-back-link::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 24px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.36;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease, opacity 180ms ease;
}

.doming-back-link:hover,
.doming-back-link:focus-visible {
  color: var(--green-dark);
}

.doming-back-link:hover,
.doming-back-link:focus-visible {
  transform: translateX(-2px);
}

.doming-back-link:hover .doming-back-icon,
.doming-back-link:focus-visible .doming-back-icon {
  transform: translateX(-4px);
}

.doming-back-link:hover::after,
.doming-back-link:focus-visible::after {
  opacity: 0.62;
  transform: scaleX(1);
}

.doming-hero {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  min-height: auto;
  background: var(--color-bg);
}

.doming-hero.hero--selector {
  grid-template-columns: 1fr;
  padding-bottom: clamp(44px, 6vw, 82px);
}

.doming-hero-copy {
  max-width: 1120px;
}

.doming-hero h1 {
  max-width: 900px;
  font-size: clamp(42px, 5.1vw, 70px);
}

.doming-hero .hero-subtitle {
  max-width: 820px;
}

.doming-hero-showcase {
  position: relative;
  width: 100%;
}

.doming-hero-media,
.doming-editorial-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--green-soft);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(18, 49, 38, 0.11);
}

.doming-hero-media {
  transform: translateY(0);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.hero--selector .doming-hero-media {
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  box-shadow: 0 24px 58px rgba(18, 49, 38, 0.13);
}

.doming-hero-media img,
.doming-editorial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doming-hero-media img {
  transform: scale(1);
  transition: transform 320ms ease;
}

.doming-hero-selector-card {
  position: absolute;
  right: clamp(22px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 52px);
  z-index: 2;
  width: min(390px, calc(100% - 44px));
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-radius: 12px;
  box-shadow: 0 26px 58px rgba(18, 33, 38, 0.18);
  backdrop-filter: blur(10px);
}

.doming-hero-selector-card h2 {
  max-width: none;
  margin-bottom: 8px;
  color: var(--color-heading);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.doming-hero-selector-card p:not(.section-kicker) {
  margin-bottom: 22px;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.55;
}

.doming-trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.doming-trust-row span {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 14px;
  color: var(--ink);
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.doming-trust-row span:first-child {
  padding-left: 0;
  border-left: 0;
}

.doming-application-fit {
  display: grid;
  grid-template-columns: minmax(380px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
  background: var(--color-surface);
}

.doming-application-list,
.doming-capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  padding: 0;
  margin: 28px 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.doming-application-list li,
.doming-capability-list li {
  position: relative;
  padding: 13px 8px 13px 25px;
  border-bottom: 1px solid var(--line);
  font-weight: 750;
}

.doming-application-list li::before,
.doming-capability-list li::before {
  position: absolute;
  left: 2px;
  color: var(--green);
  content: "\2713";
  font-weight: 900;
}

.doming-inline-action {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.doming-inline-action p {
  margin-bottom: 8px;
  color: var(--muted);
}

.doming-selector-section {
  background: var(--color-soft-green);
}

.doming-selection-overview {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(28px, 5vw, 54px);
}

.doming-selection-overview .doming-editorial-media {
  transform: translateY(0);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.doming-selection-overview .doming-editorial-media img {
  transform: scale(1);
  transition: transform 320ms ease;
}

.doming-selection-overview > div {
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.06);
}

.doming-selection-overview > div > p {
  max-width: 720px;
  margin-top: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.doming-selection-overview .doming-application-list {
  gap: 10px;
  margin: 24px 0;
  border-top: 0;
}

.doming-selection-overview .doming-application-list li {
  min-height: 52px;
  padding: 14px 14px 14px 38px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
}

.doming-selection-overview .doming-application-list li::before {
  top: 15px;
  left: 14px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(0, 114, 60, 0.28);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.doming-selection-overview .doming-inline-action {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 8px;
}

.doming-selection-overview .doming-inline-action p {
  margin-bottom: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .doming-selection-overview .doming-editorial-media:hover {
    box-shadow: 0 32px 66px rgba(18, 49, 38, 0.2), 17px 19px 0 rgba(0, 114, 60, 0.12);
    transform: translateY(-4px);
  }

  .doming-selection-overview .doming-editorial-media:hover img {
    transform: scale(1.025);
  }
}

.technical-disclosure {
  margin-top: 22px;
}

.technical-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.technical-disclosure-toggle:hover,
.technical-disclosure-toggle:focus-visible {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.technical-disclosure-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.technical-disclosure-panel {
  margin-top: 14px;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 10px;
  animation: disclosure-fade 220ms ease both;
}

.technical-disclosure-panel[hidden] {
  display: none !important;
}

.technical-disclosure-panel dl {
  display: grid;
  gap: 16px;
  margin: 0;
}

.technical-disclosure-panel dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 0.66fr);
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.technical-disclosure-panel dl > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.technical-disclosure-panel dt {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.technical-disclosure-panel dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@keyframes disclosure-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.doming-requirement-selector {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0, 114, 60, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.08);
}

.selector-stage,
.selector-priority-stage,
.selector-results {
  padding: clamp(22px, 3vw, 34px);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.doming-requirement-selector.is-enhanced .selector-stage {
  padding-top: clamp(22px, 3vw, 34px);
}

.doming-requirement-selector.is-enhanced .selector-stage legend {
  padding-top: clamp(10px, 1.5vw, 18px);
}

.selector-stage legend {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: baseline;
  color: var(--ink);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 800;
  line-height: 1.3;
}

.selector-number {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.selector-question {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.32;
}

.selector-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.selector-options label {
  position: relative;
  cursor: pointer;
}

.selector-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.selector-options span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 40px 10px 14px;
  color: var(--color-heading);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.selector-options span::after {
  position: absolute;
  right: 14px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  content: "";
}

.selector-options input:checked + span {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.selector-options input:checked + span::after {
  display: grid;
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-white);
  content: "\2713";
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  place-content: center;
}

.selector-options input:focus-visible + span {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.selector-options label:hover span {
  border-color: rgba(0, 114, 60, 0.42);
  transform: translateY(-1px);
}

.selector-advisory {
  margin: clamp(20px, 3vw, 30px) clamp(24px, 3.5vw, 40px) 0;
  padding: 18px 20px;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
}

.selector-advisory strong {
  display: block;
  margin-bottom: 4px;
}

.selector-advisory p {
  margin: 0;
  color: var(--muted);
}

.selector-stage-heading,
.selector-results-heading {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 22px;
}

.selector-stage-heading h3,
.selector-results-heading h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
}

.selector-priority-group {
  padding: 0;
  margin: 0;
  border: 0;
}

.selector-priority-group + .selector-priority-group,
.selector-direct-result + .selector-priority-group {
  margin-top: 26px;
}

.selector-priority-group legend {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.selector-direct-result {
  padding: 18px 20px;
  background: var(--green-soft);
  border-radius: 8px;
}

.selector-direct-result p {
  margin: 5px 0 0;
  color: var(--muted);
}

.selector-results {
  background: var(--color-soft-green-light);
  border-bottom: 0;
}

.selector-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.selector-results-grid article {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.selector-results-grid h4 {
  margin: 0;
  font-size: clamp(25px, 2.6vw, 34px);
}

.selector-result-ratio {
  display: inline-block;
  margin: 8px 0 12px;
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
}

.selector-results-grid article > p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.selector-selection-reason {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.selector-empty-state {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.selector-disclaimer {
  max-width: 900px;
  margin: 22px 0 20px;
  padding-left: 16px;
  color: var(--muted);
  border-left: 3px solid var(--green);
  font-size: 14px;
}

.selector-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.selector-result-actions .btn {
  width: auto;
}

.selector-result-actions .is-disabled {
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}

.selector-result-actions .btn-primary.is-disabled {
  box-shadow: 0 8px 20px rgba(0, 114, 60, 0.14);
}

.selector-result-actions .btn-secondary.is-disabled {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.selector-action-status {
  margin: 14px 0 0;
  color: #8a3c32;
  font-size: 14px;
  font-weight: 750;
}

.selector-action-status[hidden],
.doming-selection-summary[hidden],
.selector-recommended-field[hidden],
[data-selector-whatsapp-action][hidden] {
  display: none !important;
}

.doming-systems {
  background: var(--color-surface);
}

.epoxy-formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 42px);
}

.epoxy-formula-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 12px;
  box-shadow: 0 22px 52px rgba(18, 49, 38, 0.1);
}

.epoxy-formula-card .doming-system-content {
  padding: clamp(24px, 4vw, 40px);
}

.epoxy-formula-card h3 {
  font-size: clamp(28px, 3.2vw, 42px);
}

.epoxy-formula-card .system-actions {
  margin-top: auto;
}

.doming-system-comparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.doming-system {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line);
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.doming-system:first-child {
  border-left: 0;
}

.doming-system.is-guided-match {
  background: rgba(234, 242, 238, 0.72);
  box-shadow: inset 0 4px 0 var(--green);
}

.doming-system > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--green-soft);
}

.doming-system-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(22px, 2.5vw, 30px);
}

.system-label {
  margin-bottom: 14px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.doming-system h3 {
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.12;
}

.doming-system-content > p:not(.system-label) {
  color: var(--muted);
}

.system-points {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 22px 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.system-points li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
}

.system-points li::before {
  position: absolute;
  left: 0;
  color: var(--green);
  content: "\2713";
}

.system-compatibility {
  padding: 13px;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  font-size: 13px;
}

.system-actions {
  display: grid;
  gap: 14px;
  align-items: start;
  margin-top: auto;
  padding-top: 24px;
}

.system-actions .btn {
  width: 100%;
}

.doming-comparison {
  background: var(--color-bg);
}

.doming-outdoor-options {
  background: var(--color-bg);
}

.doming-outdoor-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 5vw, 60px);
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  background: var(--green-soft);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 12px;
}

.doming-outdoor-banner h2 {
  max-width: 760px;
}

.doming-outdoor-banner p:not(.section-kicker) {
  max-width: 740px;
  margin-bottom: 0;
  color: var(--muted);
}

.pu-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.pu-option-card {
  padding: clamp(24px, 3vw, 34px);
  background: transparent;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

.pu-option-card:first-child {
  padding-left: 0;
  border-left: 0;
}

.pu-option-card h3 {
  font-size: clamp(22px, 2.2vw, 30px);
}

.pu-option-card p:not(.system-label) {
  color: var(--muted);
}

.pu-option-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  padding: 0;
  margin: 18px 0 22px;
  list-style: none;
}

.pu-option-specs li {
  position: relative;
  padding-left: 17px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pu-option-specs li::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  content: "";
}

.doming-comparison-table {
  min-width: 1040px;
}

.doming-table-action,
.doming-problem-action,
.doming-production-action {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}

.doming-table-action p,
.doming-problem-action p,
.doming-production-action p {
  max-width: 840px;
  margin: 0;
  color: var(--muted);
}

.doming-table-action .btn,
.doming-problem-action .btn,
.doming-production-action .btn {
  flex: 0 0 auto;
}

.doming-problems {
  background: var(--color-bg);
}

.doming-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 88px);
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.doming-problem-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 84px;
  border-top: 1px solid var(--line);
}

.doming-problem-list span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.doming-problem-list strong {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.3;
}

.doming-production {
  background: var(--color-soft-green);
}

.doming-production-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(34px, 5vw, 54px);
}

.doming-production-paths article {
  position: relative;
  min-height: 320px;
  padding: clamp(26px, 4vw, 38px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.07);
  transform: translateY(0);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.doming-production-paths article::after {
  position: absolute;
  right: -42px;
  bottom: -58px;
  width: 180px;
  height: 180px;
  content: "";
  background: radial-gradient(circle, rgba(0, 114, 60, 0.11), transparent 66%);
  pointer-events: none;
}

.doming-production-paths article > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--green);
  background: rgba(0, 114, 60, 0.09);
  border: 1px solid rgba(0, 114, 60, 0.18);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.doming-production-paths h3 {
  margin-top: 22px;
  font-size: clamp(24px, 3vw, 34px);
}

.doming-production-paths p {
  color: var(--muted);
  line-height: 1.65;
}

.doming-production-paths ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.doming-production-paths li {
  position: relative;
  min-height: 44px;
  padding: 11px 12px 11px 32px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(0, 114, 60, 0.12);
  border-radius: 7px;
  font-weight: 700;
}

.doming-production-paths li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--color-primary);
  content: "\2713";
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .doming-production-paths article:hover {
    border-color: rgba(0, 114, 60, 0.26);
    box-shadow: 0 24px 52px rgba(18, 49, 38, 0.12);
    transform: translateY(-4px);
  }
}

.doming-production-placeholder {
  display: grid;
  min-height: clamp(300px, 40vw, 520px);
  padding: 32px;
  place-content: center;
  color: var(--color-white);
  background:
    linear-gradient(180deg, rgba(20, 22, 24, 0.24), rgba(20, 22, 24, 0.3)),
    url("/image/doming-dispensing-production.webp") center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(18, 49, 38, 0.15);
  text-align: center;
}

.doming-production-placeholder span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.doming-production-placeholder p {
  max-width: 620px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.66);
}

.doming-sample {
  background: var(--color-bg);
}

.doming-distributor-list span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.doming-custom {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
  background: var(--color-soft-green);
  color: var(--color-heading);
}

.doming-custom h2 {
  max-width: 780px;
}

.doming-custom .btn {
  margin-top: 26px;
}

.doming-custom .btn-primary {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.doming-custom .btn-primary:hover,
.doming-custom .btn-primary:focus-visible {
  color: var(--color-white);
  background: var(--color-primary-hover);
}

.doming-custom h2,
.doming-custom .section-kicker {
  color: var(--color-heading);
}

.doming-custom-copy > p,
.doming-custom-note {
  color: var(--color-text);
}

.doming-custom-panel {
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(0, 114, 60, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(18, 49, 38, 0.08);
}

.doming-custom-copy {
  order: 2;
}

.doming-custom-panel {
  order: 1;
}

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

.doming-custom .doming-capability-list {
  margin-bottom: 0;
}

.doming-custom .doming-capability-list li {
  color: var(--color-heading);
  border-bottom-color: rgba(0, 114, 60, 0.14);
}

.doming-custom .doming-capability-list li::before {
  color: var(--color-primary);
}

.doming-custom-note {
  margin: 22px 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.58);
  border-left: 3px solid rgba(0, 114, 60, 0.34);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
}

.doming-distributor {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
  color: var(--color-heading);
  background: var(--color-bg);
}

.doming-distributor .section-kicker,
.doming-distributor > div > p {
  color: var(--color-muted);
}

.doming-distributor .btn-secondary {
  margin-top: 20px;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.doming-distributor-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.doming-distributor-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 114, 60, 0.13);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 49, 38, 0.035);
  transform: translateY(0);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.doming-distributor-list span {
  color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .doming-distributor-list li:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 114, 60, 0.25);
    box-shadow: 0 12px 28px rgba(18, 49, 38, 0.08);
    transform: translateY(-2px);
  }
}

.doming-rfq {
  background: var(--color-soft-green);
}

.doming-selection-summary {
  margin-top: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.doming-selection-summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.doming-selection-summary-heading {
  display: flex;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.doming-selection-summary-heading h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
}

.doming-selection-summary dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.doming-selection-summary dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
  padding: 8px 0;
}

.doming-selection-summary dt {
  color: var(--muted);
  font-size: 13px;
}

.doming-selection-summary dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.doming-selection-summary.contact-selection-summary {
  padding: 14px clamp(16px, 2vw, 22px);
}

.optional-technical-details {
  margin-top: 6px;
}

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

.optional-technical-grid label {
  display: grid;
  gap: 8px;
}

.optional-technical-grid span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.selector-recommended-field input[readonly] {
  color: var(--ink);
  background: var(--green-soft);
  cursor: default;
}

@media (max-width: 1180px) {
  .doming-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doming-trust-row span:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .doming-trust-row span:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .doming-system-comparison {
    grid-template-columns: 1fr;
  }

  .hero--selector .doming-hero-media {
    aspect-ratio: 16 / 8;
  }

  .epoxy-formula-grid {
    grid-template-columns: 1fr;
  }

  .doming-system {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .doming-system:first-child {
    border-top: 0;
  }

  .doming-system > img {
    align-self: start;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 940px) {
  .doming-hero,
  .doming-application-fit,
  .doming-custom,
  .doming-distributor {
    grid-template-columns: 1fr;
  }

  .doming-hero {
    min-height: auto;
  }

  .doming-custom-copy,
  .doming-custom-panel {
    order: initial;
  }

  .selector-step-layout {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .selector-options {
    grid-column: 2;
  }

  .doming-system {
    grid-template-columns: 1fr;
  }

  .doming-system > img {
    height: auto;
    min-height: 0;
  }

}

@media (max-width: 760px) {
  .doming-page > section {
    padding: 52px 18px;
  }

  .doming-hero h1 {
    font-size: 40px;
  }

  .doming-hero.hero--selector {
    gap: 24px;
  }

  .doming-hero-showcase {
    display: grid;
    gap: 16px;
  }

  .hero--selector .doming-hero-media {
    aspect-ratio: 4 / 3;
  }

  .doming-hero-selector-card {
    position: static;
    width: 100%;
    padding: 22px;
    backdrop-filter: none;
  }

  .doming-trust-row,
  .doming-selection-overview,
  .doming-application-list,
  .doming-capability-list,
  .doming-problem-list,
  .doming-production-paths {
    grid-template-columns: 1fr;
  }

  .doming-trust-row span,
  .doming-trust-row span:nth-child(3) {
    min-height: 58px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .doming-trust-row span:first-child {
    border-top: 0;
  }

  .selector-options {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .selector-options span {
    width: 100%;
  }

  .selector-stage,
  .selector-priority-stage,
  .selector-results {
    padding: 24px 18px;
  }

  .selector-advisory {
    margin: 18px 18px 0;
  }

  .selector-stage legend,
  .selector-stage-heading,
  .selector-results-heading {
    align-items: flex-start;
  }

  .selector-results-grid,
  .doming-outdoor-banner,
  .optional-technical-grid,
  .pu-option-grid,
  .pu-option-specs {
    grid-template-columns: 1fr;
  }

  .doming-outdoor-banner {
    align-items: stretch;
    padding: 24px 18px;
  }

  .technical-disclosure-panel dl > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .selector-result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .selector-result-actions .btn {
    width: 100%;
  }

  .doming-selection-summary-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .doming-selection-summary dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .pu-option-grid {
    border-bottom: 0;
  }

  .pu-option-card,
  .pu-option-card:first-child {
    padding: 26px 0;
    border-bottom: 1px solid var(--line-strong);
    border-left: 0;
  }

  .doming-table-action,
  .doming-problem-action,
  .doming-production-action {
    align-items: stretch;
    flex-direction: column;
  }

  .doming-table-action .btn,
  .doming-problem-action .btn,
  .doming-production-action .btn {
    width: 100%;
  }

  .doming-production-paths article,
  .doming-production-paths article:first-child {
    min-height: auto;
    padding: 24px 20px;
  }

.doming-production-paths ul {
    grid-template-columns: 1fr;
  }

}

/* Global desktop gutters */
@media (min-width: 1181px) {
  body {
    min-width: var(--desktop-layout-min);
  }

  .navbar,
  .hero,
  .application-solutions,
  .featured-solution,
  .outdoor-doming,
  .product-systems,
  .production-problems,
  .custom-formulation,
  .b2b-support,
  .workflow,
  .export-support,
  .rfq-form,
  .site-footer,
  .solutions-page section,
  .craft-page > section,
  .river-page > section,
  .flooring-page > section,
  .products-page > section,
  .doming-page > section {
    padding-right: var(--desktop-page-gutter);
    padding-left: var(--desktop-page-gutter);
  }

  .privacy-page {
    padding-right: var(--privacy-page-gutter);
    padding-left: var(--privacy-page-gutter);
  }

  .contact-rfq {
    padding: clamp(22px, 2.4vw, 32px);
  }
}

@media (max-width: 1180px) {
  html,
  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .navbar,
  .hero,
  .application-solutions,
  .featured-solution,
  .outdoor-doming,
  .product-systems,
  .production-problems,
  .custom-formulation,
  .b2b-support,
  .workflow,
  .export-support,
  .rfq-form,
  .site-footer,
  .solutions-page section,
  .craft-page > section,
  .river-page > section,
  .flooring-page > section,
  .products-page > section,
  .doming-page > section {
    padding-right: 24px;
    padding-left: 24px;
  }

  .product-detail-page > section,
  .product-detail-page > .product-breadcrumb,
  .product-detail-page .product-detail-subnav > div {
    width: calc(100% - 48px);
  }

  .contact-rfq {
    padding: 22px 18px;
  }
}

@media (min-width: 941px) and (max-width: 1180px) {
  .hero {
    min-height: auto;
    padding-top: clamp(42px, 5vw, 58px);
    padding-bottom: clamp(34px, 4vw, 48px);
  }

  .solutions-hero,
  .solutions-hero.hero--solution-hub {
    min-height: auto;
  }
}

@media (max-width: 1180px) and (hover: hover) and (pointer: fine) {
  .nav-menu {
    gap: 10px;
    font-size: 12px;
  }

  .language-toggle {
    min-width: 74px;
  }

  .logo img {
    width: 108px;
  }
}

@media (max-width: 1180px) and (hover: none), (max-width: 1180px) and (pointer: coarse) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 74px;
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - 96px);
    overflow: auto;
    gap: 4px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu > a,
  .nav-dropdown-link,
  .nav-dropdown-toggle,
  .language-toggle {
    width: 100%;
    min-height: 44px;
    text-align: left;
  }

  .language-menu {
    position: static;
    display: none;
    width: 100%;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }

  .language-select.is-open .language-menu,
  .language-select:focus-within .language-menu {
    display: grid;
  }

  .nav-menu > a,
  .nav-dropdown-link,
  .nav-dropdown-toggle {
    padding: 10px 12px;
  }

  .nav-dropdown-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
  }

  .nav-dropdown-link {
    display: flex;
    align-items: center;
  }

  .nav-dropdown--linked .nav-dropdown-toggle {
    width: 44px;
    margin-left: 0;
    padding: 0;
    text-align: center;
  }

  .nav-dropdown-panel {
    position: static;
    display: none;
    width: 100%;
    margin: 0 0 8px;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown::after {
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-panel {
    display: grid;
  }
}

.product-detail-theme-craft {
  --product-accent: #0b6b50;
  --product-accent-deep: #084b39;
  --product-ink: #122126;
  --product-muted: #657274;
  --product-page-bg: #f7f9f7;
  --product-surface: #ffffff;
  --product-border: rgba(18, 33, 38, 0.12);
  --product-media-bg: #edf5f1;
}

.cce-hero {
  align-items: center;
}

.cce-solution-link {
  margin: 12px 0 0;
  color: var(--product-muted);
  font-size: 14px;
}

.cce-formula-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}

.cce-primary-card,
.cce-secondary-card,
.cce-guidance-callout {
  padding: clamp(24px, 3vw, 38px);
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.07);
}

.cce-secondary-card {
  background: rgba(234, 243, 238, 0.72);
  box-shadow: none;
}

.cce-primary-card h3,
.cce-secondary-card h2 {
  margin: 0 0 14px;
}

.cce-primary-card .btn,
.cce-secondary-card .btn,
.cce-packaging > .btn {
  margin-top: clamp(20px, 2.6vw, 30px);
}

.cce-comparison .epd-table-note,
.cce-technical .epd-table-note,
.cce-operation .epd-table-note,
.cce-packaging .epd-table-note {
  margin-top: 18px;
}

.cce-applications {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.cce-application-media img {
  object-fit: cover;
}

.cce-guidance-callout {
  margin-bottom: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.92), rgba(255, 255, 255, 0.96)),
    var(--product-surface);
}

.cce-guidance-callout strong {
  display: block;
  margin-bottom: 8px;
  color: var(--product-accent-deep);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cce-guidance-callout p {
  max-width: 74ch;
  margin: 0;
  color: var(--product-ink);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.45;
}

.cce-pour-guidance > .text-link {
  display: inline-flex;
  margin-top: 16px;
}

.cce-factor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.cce-factor-grid article {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 247, 0.9)),
    var(--product-surface);
  border: 1px solid rgba(18, 33, 38, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(18, 49, 38, 0.055);
}

.cce-factor-grid article::after {
  content: "";
  position: absolute;
  inset: auto -36px -44px auto;
  width: 108px;
  height: 108px;
  background: radial-gradient(circle, rgba(11, 107, 80, 0.13), rgba(11, 107, 80, 0));
  pointer-events: none;
}

.cce-factor-grid span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 840;
  background: rgba(234, 243, 238, 0.92);
  border: 1px solid rgba(11, 107, 80, 0.16);
  border-radius: 50%;
}

.cce-factor-grid h3 {
  margin: 0 0 9px;
  font-size: clamp(17px, 1.4vw, 20px);
}

.cce-factor-grid p {
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.65;
}

.cce-process-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  overflow: hidden;
}

.cce-process-flow li {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border-right: 1px solid var(--product-border);
}

.cce-process-flow li:last-child {
  border-right: 0;
}

.cce-process-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: -9px;
  z-index: 1;
  width: 18px;
  height: 18px;
  background: var(--product-surface);
  border-top: 1px solid var(--product-border);
  border-right: 1px solid var(--product-border);
  transform: rotate(45deg);
}

.cce-process-flow span {
  display: block;
  margin-bottom: 18px;
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.1em;
}

.cce-process-flow h3 {
  margin: 0 0 9px;
  font-size: clamp(15px, 1.15vw, 18px);
}

.cce-process-flow p {
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.62;
}

.cce-supply-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.cce-supply-copy {
  position: sticky;
  top: 104px;
}

.cce-supply-copy h2 {
  margin-bottom: 14px;
}

.cce-supply-copy > p:not(.section-kicker, .epd-table-note) {
  max-width: 46ch;
  color: var(--product-muted);
  line-height: 1.68;
}

.cce-supply-copy .btn {
  margin-top: clamp(20px, 2.6vw, 30px);
}

.cce-supply-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--product-border);
}

.cce-supply-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px 18px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--product-border);
}

.cce-supply-list span {
  grid-row: span 2;
  color: var(--product-accent);
  font-size: 13px;
  font-weight: 860;
  letter-spacing: 0.08em;
}

.cce-supply-list strong {
  color: var(--product-ink);
  font-size: clamp(16px, 1.2vw, 19px);
}

.cce-supply-list p {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.62;
}

@media (hover: hover) {
  .cce-process-flow li,
  .cce-supply-list li {
    transition: background 220ms ease, transform 220ms ease;
  }

  .cce-process-flow li:hover {
    background: rgba(234, 243, 238, 0.52);
  }

  .cce-supply-list li:hover {
    background: linear-gradient(90deg, rgba(234, 243, 238, 0.54), rgba(234, 243, 238, 0));
    transform: translateX(4px);
  }
}

@media (hover: hover) {
  .cce-factor-grid article {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }

  .cce-factor-grid span {
    transition: color 220ms ease, background 220ms ease, transform 220ms ease;
  }

  .cce-factor-grid article:hover {
    border-color: rgba(11, 107, 80, 0.24);
    box-shadow: 0 22px 48px rgba(18, 49, 38, 0.095);
    transform: translateY(-3px);
  }

  .cce-factor-grid article:hover span {
    color: var(--color-white);
    background: var(--product-accent);
    transform: translateY(-2px) scale(1.04);
  }
}

.cce-notes-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cce-rfq .product-rfq-form-shell {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .cce-formula-layout,
  .cce-applications,
  .cce-factor-grid {
    grid-template-columns: 1fr;
  }

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

  .cce-process-flow li,
  .cce-process-flow li:last-child {
    border-right: 1px solid var(--product-border);
    border-bottom: 1px solid var(--product-border);
  }

  .cce-process-flow li:nth-child(2n),
  .cce-process-flow li:last-child {
    border-right: 0;
  }

  .cce-process-flow li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .cce-process-flow li::after {
    display: none;
  }

  .cce-supply-layout {
    grid-template-columns: 1fr;
  }

  .cce-supply-copy {
    position: static;
  }

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

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

  .cce-process-flow li,
  .cce-process-flow li:nth-child(2n),
  .cce-process-flow li:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .cce-process-flow li:last-child {
    border-bottom: 0;
  }

  .cce-supply-list li {
    grid-template-columns: 42px minmax(0, 1fr);
  }

.cce-notes-list {
  grid-template-columns: 1fr;
}
}

.product-detail-theme-river {
  --product-accent: #0b6b50;
  --product-accent-deep: #084b39;
  --product-ink: #122126;
  --product-muted: #657274;
  --product-page-bg: #f7f9f7;
  --product-surface: #ffffff;
  --product-border: rgba(18, 33, 38, 0.12);
  --product-border-strong: rgba(18, 33, 38, 0.2);
  --product-media-bg: #edf3ee;
}

.rte-hero {
  align-items: center;
}

.rte-solution-link {
  margin: 12px 0 0;
  color: var(--product-muted);
  font-size: 14px;
}

.rte-facts {
  display: grid;
  gap: 14px;
}

.rte-facts-note {
  max-width: 86ch;
  padding: 14px 0 18px;
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid var(--product-border);
}

.rte-positioning-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
}

.rte-positioning-callout,
.rte-reference-panel,
.rte-production-note {
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.94), rgba(255, 255, 255, 0.96)),
    var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.055);
}

.rte-positioning-callout strong {
  display: block;
  margin-bottom: 12px;
  color: var(--product-accent-deep);
  font-size: 13px;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rte-positioning-callout p {
  margin: 0;
  color: var(--product-ink);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.rte-reference-panel .btn {
  margin-top: clamp(22px, 3vw, 34px);
}

.rte-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 10px;
}

.rte-reference-grid div {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-right: 1px solid var(--product-border);
  border-bottom: 1px solid var(--product-border);
}

.rte-reference-grid div:nth-child(3n) {
  border-right: 0;
}

.rte-reference-grid div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.rte-reference-grid dt {
  margin-bottom: 10px;
  color: var(--product-accent);
  font-size: 11px;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rte-reference-grid dd {
  margin: 0;
  color: var(--product-ink);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 760;
  line-height: 1.35;
}

.rte-reference-warning {
  max-width: 92ch;
  padding: clamp(18px, 2vw, 24px) 0 0;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  color: var(--product-ink);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.68;
  border-top: 1px solid var(--product-border-strong);
}

.rte-applications,
.rte-conditions-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.rte-application-media img,
.rte-conditions-media img {
  object-fit: cover;
}

.rte-factor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.rte-factor-grid article {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--product-border);
}

.rte-factor-grid article:last-child {
  border-right: 0;
}

.rte-factor-grid span,
.rte-process-flow span,
.rte-supply-list span {
  color: var(--product-accent);
}

.rte-factor-grid span {
  display: block;
  margin-bottom: clamp(28px, 4vw, 48px);
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.1em;
}

.rte-factor-grid h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.35vw, 21px);
}

.rte-factor-grid p {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.62;
}

.rte-production-note {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(24px, 3vw, 36px);
}

.rte-production-note p {
  max-width: 68ch;
  margin: 0;
  color: var(--product-ink);
  font-weight: 720;
  line-height: 1.6;
}

.rte-boundary > .text-link {
  display: inline-flex;
  margin-top: 20px;
}

.rte-conditions .btn {
  margin-top: clamp(20px, 2.5vw, 30px);
}

.rte-packaging .epd-table-note,
.rte-operation .epd-table-note,
.rte-technical .epd-table-note {
  margin-top: 18px;
}

.rte-rfq .product-rfq-form-shell {
  margin-top: 24px;
}

@media (hover: hover) {
  .rte-factor-grid article {
    transition: background 220ms ease, transform 220ms ease;
  }

  .rte-factor-grid article:hover {
    background: rgba(234, 243, 238, 0.5);
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .rte-positioning-layout,
  .rte-applications,
  .rte-conditions-layout,
  .rte-supply-layout {
    grid-template-columns: 1fr;
  }

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

  .rte-reference-grid div,
  .rte-reference-grid div:nth-child(3n),
  .rte-factor-grid article,
  .rte-factor-grid article:last-child {
    border-right: 1px solid var(--product-border);
    border-bottom: 1px solid var(--product-border);
  }

  .rte-reference-grid div:nth-child(2n),
  .rte-factor-grid article:nth-child(2n) {
    border-right: 0;
  }

  .rte-reference-grid div:nth-last-child(-n + 2),
  .rte-factor-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .rte-production-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .rte-reference-grid,
  .rte-factor-grid {
    grid-template-columns: 1fr;
  }

  .rte-reference-grid div,
  .rte-reference-grid div:nth-child(2n),
  .rte-reference-grid div:nth-last-child(-n + 2),
  .rte-factor-grid article,
  .rte-factor-grid article:nth-child(2n),
  .rte-factor-grid article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .rte-reference-grid div:last-child,
  .rte-factor-grid article:last-child {
    border-bottom: 0;
  }

.rte-production-note .btn {
    width: 100%;
  }
}

.product-detail-theme-flooring {
  --product-accent: #0b6b50;
  --product-accent-deep: #084b39;
  --product-ink: #122126;
  --product-muted: #657274;
  --product-page-bg: #f7f9f7;
  --product-surface: #ffffff;
  --product-border: rgba(18, 33, 38, 0.12);
  --product-border-strong: rgba(18, 33, 38, 0.2);
  --product-media-bg: #eef4f0;
}

.dfe-hero {
  align-items: center;
}

.dfe-solution-link {
  margin: 12px 0 0;
  color: var(--product-muted);
  font-size: 14px;
}

.dfe-facts {
  display: grid;
  gap: 14px;
}

.dfe-facts-note {
  max-width: 86ch;
  padding: 14px 0 18px;
  margin: 0;
  color: var(--product-ink);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.6;
  border-top: 1px solid var(--product-border);
}

.dfe-positioning-layout,
.dfe-coverage-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
}

.dfe-positioning-callout,
.dfe-calculator,
.dfe-coverage-reference {
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.9), rgba(255, 255, 255, 0.96)),
    var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.055);
}

.dfe-positioning-callout strong {
  display: block;
  margin-bottom: 12px;
  color: var(--product-accent-deep);
  font-size: 13px;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dfe-positioning-callout p {
  margin: 0;
  color: var(--product-ink);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.dfe-applications,
.dfe-conditions-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.dfe-application-media img,
.dfe-conditions-media img {
  object-fit: cover;
}

.dfe-layer-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.dfe-layer-list li {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid var(--product-border);
}

.dfe-layer-list li:last-child {
  border-right: 0;
}

.dfe-layer-list span {
  display: block;
  margin-bottom: clamp(24px, 3vw, 38px);
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.1em;
}

.dfe-layer-list strong {
  display: block;
  margin-bottom: 10px;
  color: var(--product-ink);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.2;
}

.dfe-layer-list p,
.dfe-visible-note,
.dfe-warning-note {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.66;
}

.dfe-visible-note {
  max-width: 86ch;
  padding-top: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--product-border);
}

.dfe-calculator {
  display: grid;
  gap: 16px;
}

.dfe-calculator label {
  display: grid;
  gap: 8px;
}

.dfe-calculator span,
.dfe-coverage-reference dt {
  color: var(--product-accent);
  font-size: 11px;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dfe-calculator input,
.dfe-calculator select {
  min-height: 50px;
  padding: 0 14px;
  color: var(--product-ink);
  font: inherit;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 8px;
}

.dfe-calculator-result {
  display: grid;
  gap: 8px;
  padding: 18px 0 0;
  border-top: 1px solid var(--product-border);
}

.dfe-calculator-result strong {
  color: var(--product-ink);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.dfe-coverage-reference dl {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--product-border);
}

.dfe-coverage-reference dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.62fr) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--product-border);
}

.dfe-coverage-reference dd {
  margin: 0;
  color: var(--product-ink);
  font-weight: 760;
}

.dfe-coverage-reference p {
  max-width: 68ch;
  margin: 0;
  color: var(--product-muted);
  line-height: 1.66;
}

.dfe-coverage-reference .btn {
  margin-top: clamp(20px, 2.5vw, 30px);
}

.dfe-limitation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.dfe-limitation-grid article {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--product-border);
}

.dfe-limitation-grid article:last-child {
  border-right: 0;
}

.dfe-limitation-grid span {
  display: block;
  margin-bottom: 12px;
  color: var(--product-ink);
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 820;
  line-height: 1.25;
}

.dfe-limitation-grid p {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.62;
}

.dfe-warning-note,
.dfe-wear-warning {
  padding: clamp(16px, 2vw, 22px);
  margin-top: clamp(20px, 2.5vw, 30px);
  color: var(--product-ink);
  font-weight: 760;
  background: rgba(234, 243, 238, 0.68);
  border: 1px solid rgba(11, 107, 80, 0.18);
  border-left: 4px solid var(--product-accent);
  border-radius: 10px;
}

.dfe-wear-warning[hidden] {
  display: none;
}

.dfe-packaging .epd-table-note,
.dfe-operation .epd-table-note,
.dfe-technical .epd-table-note {
  margin-top: 18px;
}

.dfe-rfq .product-rfq-form-shell {
  margin-top: 24px;
}

@media (hover: hover) {
  .dfe-layer-list li,
  .dfe-limitation-grid article {
    transition: background 220ms ease, transform 220ms ease;
  }

  .dfe-layer-list li:hover,
  .dfe-limitation-grid article:hover {
    background: rgba(234, 243, 238, 0.5);
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .dfe-positioning-layout,
  .dfe-coverage-layout,
  .dfe-applications,
  .dfe-conditions-layout,
  .dfe-supply-layout {
    grid-template-columns: 1fr;
  }

  .dfe-layer-list,
  .dfe-limitation-grid {
    grid-template-columns: 1fr;
  }

  .dfe-layer-list li,
  .dfe-limitation-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .dfe-layer-list li:last-child,
  .dfe-limitation-grid article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .dfe-coverage-reference dl > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dfe-coverage-reference .btn {
    width: 100%;
  }
}

.product-detail-theme-pu {
  --product-accent: #0b6b50;
  --product-accent-deep: #084b39;
  --product-ink: #122126;
  --product-muted: #657274;
  --product-page-bg: #f7f9f7;
  --product-surface: #ffffff;
  --product-border: rgba(18, 33, 38, 0.12);
  --product-border-strong: rgba(18, 33, 38, 0.2);
  --product-media-bg: #eef4f0;
}

.pud-hero {
  align-items: center;
}

.pud-hero-visual {
  position: relative;
}

.pud-hero-visual .product-gallery-stage {
  box-shadow: 0 28px 70px rgba(18, 49, 38, 0.14);
}

.pud-visual-formula-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(92%, 720px);
  margin: clamp(-54px, -4vw, -34px) auto 0;
}

.pud-visual-formula-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(234, 243, 238, 0.9)),
    var(--product-surface);
  border: 1px solid rgba(11, 107, 80, 0.18);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(18, 49, 38, 0.16);
  backdrop-filter: blur(12px);
  transition:
    border-color 220ms ease,
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pud-visual-formula-card::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--product-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(11, 107, 80, 0.1);
}

.pud-visual-formula-card span {
  max-width: calc(100% - 26px);
  color: var(--product-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pud-visual-formula-card strong {
  color: var(--product-ink);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.14;
}

.pud-visual-formula-card p {
  margin: 0;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.56;
}

.pud-visual-formula-card small {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  color: var(--product-accent-deep);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  background: rgba(11, 107, 80, 0.08);
  border: 1px solid rgba(11, 107, 80, 0.13);
  border-radius: 999px;
}

.pud-solution-link,
.pud-substrate-note,
.pud-qualification {
  color: var(--product-muted);
  line-height: 1.66;
}

.pud-solution-link {
  margin: 12px 0 0;
  font-size: 14px;
}

.pud-hero-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(22px, 3vw, 34px) 0 0;
}

.pud-hero-options article {
  padding: clamp(18px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(18, 49, 38, 0.055);
}

.pud-hero-options span,
.pud-formula-copy .section-kicker,
.pud-comparison .section-kicker {
  color: var(--product-accent);
}

.pud-hero-options span {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pud-hero-options strong {
  display: block;
  color: var(--product-ink);
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.2;
}

.pud-hero-options p {
  margin: 10px 0 0;
  color: var(--product-muted);
  font-size: 14px;
  line-height: 1.58;
}

.pud-facts {
  display: grid;
  gap: 14px;
}

.pud-comparison-table-wrap {
  margin-top: clamp(24px, 3vw, 36px);
  overflow-x: auto;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.055);
  scrollbar-color: rgba(11, 107, 80, 0.42) rgba(18, 49, 38, 0.07);
  scrollbar-width: thin;
}

.pud-comparison-table {
  min-width: 860px;
  margin: 0;
}

.pud-comparison-table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.pud-comparison-table col:nth-child(1) {
  width: 18%;
}

.pud-comparison-table col:nth-child(2) {
  width: 18%;
}

.pud-comparison-table col:nth-child(3) {
  width: 10%;
}

.pud-comparison-table col:nth-child(4) {
  width: 17%;
}

.pud-comparison-table col:nth-child(5) {
  width: 17%;
}

.pud-comparison-table col:nth-child(6) {
  width: 20%;
}

.pud-comparison-table thead th {
  padding: 18px 16px;
  color: var(--product-accent-deep);
  font-size: 11px;
  font-weight: 860;
  line-height: 1.22;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: bottom;
  background: rgba(234, 243, 238, 0.86);
  border-bottom: 1px solid rgba(11, 107, 80, 0.16);
}

.pud-comparison-table :is(th, td) {
  padding: clamp(18px, 2.2vw, 26px) 16px;
  vertical-align: top;
  border-right: 1px solid var(--product-border);
}

.pud-comparison-table :is(th, td):last-child {
  border-right: 0;
}

.pud-comparison-table tbody th {
  color: var(--product-ink);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 840;
  line-height: 1.18;
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.64), rgba(255, 255, 255, 0.96)),
    var(--product-surface);
}

.pud-comparison-table tbody td {
  color: var(--product-muted);
  font-size: 14px;
  line-height: 1.58;
  background: var(--product-surface);
}

.pud-comparison-table tbody tr + tr :is(th, td) {
  border-top: 1px solid var(--product-border);
}

.pud-comparison-table tbody td:nth-child(3),
.pud-comparison-table tbody td:nth-child(5) {
  color: var(--product-accent-deep);
  font-weight: 780;
}

.pud-comparison-table th:first-child {
  color: var(--product-accent-deep);
}

.pud-qualification {
  max-width: 92ch;
  padding: clamp(16px, 2vw, 22px);
  margin: clamp(20px, 2.5vw, 30px) 0 0;
  color: var(--product-ink);
  background: rgba(234, 243, 238, 0.68);
  border: 1px solid rgba(11, 107, 80, 0.18);
  border-left: 4px solid var(--product-accent);
  border-radius: 10px;
}

.pud-sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

.pud-formula-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.pud-formula-detail-reverse .pud-formula-copy {
  order: 2;
}

.pud-formula-detail-reverse .pud-formula-media {
  order: 1;
}

.pud-benefit-list,
.pud-application-list,
.pud-notes-list {
  margin: clamp(22px, 3vw, 32px) 0;
}

.pud-formula-media {
  margin: 0;
}

.pud-formula-media img,
.pud-application-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 22px 54px rgba(18, 49, 38, 0.12);
}

.pud-formula-media figcaption,
.pud-application-media figcaption {
  margin-top: 12px;
  color: var(--product-muted);
  font-size: 13px;
  line-height: 1.55;
}

.pud-technical-selector {
  margin-top: clamp(24px, 3vw, 36px);
}

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

.pud-tab-panel[hidden] {
  display: none;
}

.pud-technical-table {
  min-width: 820px;
}

/* Electronic potting compound product page */
.product-detail-theme-potting {
  --product-media-bg: #eef2ef;
}

.epc-hero .product-gallery-stage {
  background:
    radial-gradient(circle at 18% 20%, rgba(18, 33, 38, 0.09), transparent 34%),
    linear-gradient(135deg, rgba(234, 243, 238, 0.86), rgba(255, 255, 255, 0.96));
}

.epc-custom-link {
  max-width: 64ch;
  margin: 18px 0 0;
  color: var(--product-muted);
  line-height: 1.58;
}

.epc-technical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.epc-technical-grid .epd-technical-selector {
  height: 100%;
}

.epc-technical-table {
  min-width: 680px;
}

.epc-positioning,
.epc-applications,
.epc-production,
.epc-custom {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.epc-split-copy > p:not(.section-kicker, .epd-reference-note),
.epc-custom > div > p:not(.section-kicker) {
  max-width: 58ch;
  color: var(--product-muted);
  line-height: 1.68;
}

.epc-positioning-list,
.epc-custom-list,
.epc-notes-list,
.epc-conditions-list {
  align-content: start;
}

.epc-application-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #111a18;
  border: 1px solid rgba(18, 33, 38, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 58px rgba(18, 33, 38, 0.12);
}

.epc-application-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.epc-application-media figcaption {
  padding: 13px 16px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.55;
  background: rgba(18, 33, 38, 0.92);
}

.epc-boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--product-border);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.epc-boundary-grid article {
  padding: clamp(20px, 2.6vw, 30px);
  background: #fff;
}

.epc-boundary-grid span,
.epc-numbered-list span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.08em;
}

.epc-boundary-grid h3 {
  margin: 0 0 10px;
  color: var(--product-ink);
  font-size: clamp(18px, 1.6vw, 22px);
}

.epc-boundary-grid p {
  margin: 0;
  color: var(--product-muted);
  line-height: 1.62;
}

.epc-numbered-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0 0 clamp(22px, 3vw, 32px);
  overflow: hidden;
  list-style: none;
  background: var(--product-border);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.epc-numbered-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  transition:
    background 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.epc-numbered-list span {
  margin: 0;
}

.epc-numbered-list p {
  margin: 0;
  color: var(--product-ink);
  font-weight: 720;
  line-height: 1.35;
}

.epc-production-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.epc-production-grid article {
  padding: clamp(22px, 3vw, 32px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 247, 0.92));
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.epc-production-grid h3 {
  margin: 0 0 16px;
  color: var(--product-ink);
  font-size: clamp(22px, 2vw, 30px);
}

.epc-process-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.epc-supply .cce-supply-list li {
  background: #fff;
}

.epc-custom .btn,
.epc-checklist .btn {
  margin-top: 18px;
}

.epc-rfq .product-detail-rfq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.epc-rfq .product-rfq-form-shell {
  margin-top: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .epc-application-media:hover img {
    transform: scale(1.015);
  }

  .epc-numbered-list li:hover {
    background: rgba(234, 243, 238, 0.5);
    transform: translateX(3px);
  }
}

@media (max-width: 980px) {
  .epc-technical-grid,
  .epc-positioning,
  .epc-applications,
  .epc-production,
  .epc-custom {
    grid-template-columns: 1fr;
  }

  .epc-boundary-grid,
  .epc-process-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .epc-numbered-list,
  .epc-production-grid {
    grid-template-columns: 1fr;
  }
}

.pud-performance-grid,
.pud-production-grid {
  display: grid;
  gap: 0;
  overflow: hidden;
  list-style: none;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.pud-technical,
.pud-performance,
.pud-production,
.pud-operation,
.pud-notes,
.pud-packaging,
.pud-faq {
  position: relative;
}

.pud-technical .section-heading,
.pud-performance .section-heading,
.pud-production .section-heading,
.pud-operation .section-heading,
.pud-notes .section-heading,
.pud-faq .section-heading {
  max-width: 880px;
}

.pud-notes-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
}

.pud-notes-list li {
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px) 42px;
  border: 0;
  border-right: 1px solid var(--product-border);
  border-bottom: 1px solid var(--product-border);
  border-radius: 0;
}

.pud-notes-list li:nth-child(4n) {
  border-right: 0;
}

.pud-notes-list li:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.pud-performance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  margin: clamp(24px, 3vw, 36px) 0 0;
}

.pud-performance-grid li,
.pud-production-grid article {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--product-border);
  border-bottom: 1px solid var(--product-border);
}

.pud-performance-grid li {
  color: var(--product-ink);
  font-weight: 760;
  line-height: 1.3;
}

.pud-performance-grid li:nth-child(3n),
.pud-production-grid article:last-child {
  border-right: 0;
}

.pud-performance-grid li:nth-last-child(-n + 3),
.pud-production-grid article {
  border-bottom: 0;
}

.pud-applications {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.pud-production-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 36px);
}

.pud-production-grid h3 {
  margin: 0 0 16px;
  color: var(--product-ink);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15;
}

.pud-process-flow {
  margin-top: clamp(24px, 3vw, 36px);
}

.pud-supply-layout {
  align-items: center;
}

.pud-supply-copy {
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(135deg, rgba(234, 243, 238, 0.72), rgba(255, 255, 255, 0.94)),
    var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.055);
}

.pud-supply-copy .btn {
  margin-top: clamp(20px, 2.4vw, 30px);
}

.pud-supply-list {
  grid-template-columns: 1fr;
}

.pud-faq .faq-list {
  max-width: 1080px;
  padding: 0;
  margin: clamp(24px, 3vw, 36px) auto 0;
  background: var(--product-surface);
  border: 1px solid var(--product-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18, 49, 38, 0.045);
}

.pud-faq .faq-list details {
  border-color: var(--product-border);
}

.pud-faq-list summary {
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.pud-faq-list details[open] summary,
.pud-faq-list summary:hover {
  color: var(--product-accent-deep);
  background: rgba(234, 243, 238, 0.48);
}

.pud-faq-list details[open] > p {
  background: linear-gradient(180deg, rgba(234, 243, 238, 0.22), rgba(255, 255, 255, 0));
}

.pud-rfq > .section-heading {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.pud-rfq > .section-heading p:not(.section-kicker) {
  margin-right: auto;
  margin-left: auto;
}

.pud-rfq .product-rfq-intro {
  max-width: 780px;
  margin: clamp(20px, 2.5vw, 32px) auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.pud-rfq .product-rfq-form-shell {
  margin-top: 24px;
}

@media (hover: hover) {
  .pud-hero-options article,
  .pud-visual-formula-card,
  .pud-performance-grid li,
  .pud-production-grid article {
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  }

  .pud-hero-options article:hover,
  .pud-visual-formula-card:hover,
  .pud-performance-grid li:hover,
  .pud-production-grid article:hover {
    background: rgba(234, 243, 238, 0.5);
    transform: translateY(-2px);
  }

  .pud-visual-formula-card:hover {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 238, 0.96)),
      var(--product-surface);
    border-color: rgba(11, 107, 80, 0.34);
    box-shadow: 0 28px 62px rgba(18, 49, 38, 0.2);
  }
}

@media (max-width: 900px) {
  .pud-hero-options,
  .pud-visual-formula-cards,
  .pud-formula-detail,
  .pud-applications,
  .pud-production-grid,
  .pud-supply-layout {
    grid-template-columns: 1fr;
  }

  .pud-formula-detail-reverse .pud-formula-copy,
  .pud-formula-detail-reverse .pud-formula-media {
    order: initial;
  }

  .pud-performance-grid {
    grid-template-columns: 1fr;
  }

  .pud-performance-grid li,
  .pud-production-grid article,
  .pud-notes-list li,
  .pud-performance-grid li:nth-child(3n),
  .pud-performance-grid li:nth-last-child(-n + 3),
  .pud-notes-list li:nth-child(4n),
  .pud-notes-list li:nth-last-child(-n + 4) {
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .pud-performance-grid li:last-child,
  .pud-production-grid article:last-child,
  .pud-notes-list li:last-child {
    border-bottom: 0;
  }

  .pud-notes-list {
    grid-template-columns: 1fr;
  }

  .pud-visual-formula-cards {
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 640px) {
  .pud-sample-actions .btn {
    width: 100%;
  }

  .pud-comparison-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .pud-comparison-table {
    display: block;
    min-width: 0;
  }

  .pud-comparison-table colgroup,
  .pud-comparison-table thead {
    display: none;
  }

  .pud-comparison-table tbody,
  .pud-comparison-table tr,
  .pud-comparison-table th,
  .pud-comparison-table td {
    display: block;
  }

  .pud-comparison-table tbody {
    display: grid;
    gap: 14px;
  }

  .pud-comparison-table tbody tr {
    overflow: hidden;
    background: var(--product-surface);
    border: 1px solid var(--product-border);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(18, 49, 38, 0.055);
  }

  .pud-comparison-table tbody tr + tr :is(th, td) {
    border-top: 0;
  }

  .pud-comparison-table tbody th {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .pud-comparison-table tbody td {
    display: grid;
    grid-template-columns: minmax(112px, 0.45fr) minmax(0, 1fr);
    gap: 14px;
    padding: 15px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .pud-comparison-table tbody td:last-child {
    border-bottom: 0;
  }

  .pud-comparison-table tbody td::before {
    content: attr(data-label);
    color: var(--product-accent);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
}