/* Hallmark · genre: modern-minimal · tone: technical · anchor hue: industrial orange · macrostructure: Narrative Workflow within Product Selection Workbench · contrast: pass (40–41) · nav: N11 · footer: Ft3 · mobile: pass (34, 49, 50–57) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
:root {
  --dumpling-color-paper: oklch(98% 0.006 220);
  --dumpling-color-ink: oklch(29% 0.067 247);
  --dumpling-color-muted: oklch(49% 0.024 240);
  --dumpling-color-rule: oklch(88% 0.014 225);
  --dumpling-color-accent: oklch(67% 0.19 42);
  --dumpling-color-accent-dark: oklch(54% 0.17 39);
  --dumpling-color-accent-ink: oklch(99% 0.006 220);
  --dumpling-color-focus: oklch(78% 0.14 220);
  --dumpling-color-hero-text: oklch(91% 0.016 235);
  --dumpling-color-hero-label: oklch(79% 0.17 55);
  --dumpling-color-hero-chip-border: oklch(100% 0 0 / 0.3);
  --dumpling-color-hero-chip: oklch(100% 0 0 / 0.09);
  --dumpling-color-overlay: oklch(20% 0.06 248 / 0.92);
  --dumpling-color-surface: oklch(96% 0.011 224);
  --dumpling-hero-gradient-desktop: linear-gradient(90deg, oklch(22% 0.07 250 / 0.98) 0%, oklch(22% 0.07 250 / 0.89) 38%, oklch(22% 0.07 250 / 0.18) 70%, transparent 100%);
  --dumpling-hero-gradient-mobile: linear-gradient(90deg, oklch(20% 0.065 250 / 0.96), oklch(20% 0.065 250 / 0.76));
  --dumpling-shadow-card: 0 12px 32px oklch(24% 0.04 245 / 0.08);
  --dumpling-font-display: var(--font-display);
  --dumpling-font-body: var(--font-body);
  --dumpling-space-xs: 0.75rem;
  --dumpling-space-2xs: 0.25rem;
  --dumpling-space-sm: 1rem;
  --dumpling-space-md: 1.5rem;
  --dumpling-space-lg: 2rem;
  --dumpling-space-xl: 3rem;
  --dumpling-space-chip-y: 0.5rem;
  --dumpling-space-chip-x: 0.75rem;
  --dumpling-space-hero-top: clamp(3rem, 5vw, 4.5rem);
  --dumpling-space-hero-bottom: clamp(4.5rem, 7vw, 6rem);
  --dumpling-space-hero-mobile-top: 3rem;
  --dumpling-space-hero-mobile-bottom: 4.5rem;
  --dumpling-radius-card: 0.875rem;
  --dumpling-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dumpling-dur-short: 220ms;
}

html,
body.dumpling-category {
  overflow-x: clip;
}

.dumpling-category .dumpling-hero {
  position: relative;
  isolation: isolate;
  min-height: 590px;
  display: grid;
  align-items: center;
  padding: var(--dumpling-space-hero-top) 0 var(--dumpling-space-hero-bottom);
  color: var(--dumpling-color-paper);
  background-image: var(--dumpling-hero-gradient-desktop),
    url("../products/servo-dumpling-gyoza-machine-family/hero-ai-optimized-1600.webp");
  background-position: center;
  background-size: cover;
}

.dumpling-category .dumpling-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 5px;
  background: var(--dumpling-color-accent);
}

.dumpling-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
}

.dumpling-hero__copy {
  min-width: 0;
}

.dumpling-category .dumpling-hero .eyebrow {
  color: var(--dumpling-color-hero-label);
}

.dumpling-category .dumpling-hero h1 {
  max-width: 820px;
  margin: var(--dumpling-space-xs) 0 var(--dumpling-space-sm);
  color: var(--dumpling-color-paper);
  font-family: var(--dumpling-font-display);
  font-size: clamp(2.45rem, 5vw, 4.75rem);
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -0.048em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dumpling-category .dumpling-hero p {
  max-width: 62ch;
  margin: 0 0 var(--dumpling-space-md);
  color: var(--dumpling-color-hero-text);
  font-family: var(--dumpling-font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.dumpling-hero__formats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dumpling-space-chip-y);
  margin-bottom: var(--dumpling-space-lg);
}

.dumpling-hero__formats span {
  padding: var(--dumpling-space-chip-y) var(--dumpling-space-chip-x);
  border: 1px solid var(--dumpling-color-hero-chip-border);
  color: var(--dumpling-color-paper);
  background: var(--dumpling-color-hero-chip);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.dumpling-category .dumpling-hero .button {
  color: var(--dumpling-color-accent-ink);
  white-space: nowrap;
  transition: transform var(--dumpling-dur-short) var(--dumpling-ease-out);
}

.dumpling-category .dumpling-hero .button:hover {
  transform: translateY(-2px);
}

.dumpling-category .dumpling-hero .button:active {
  transform: translateY(0);
}

.dumpling-category .dumpling-hero .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.dumpling-category .dumpling-hero .button:focus-visible,
.dumpling-category .product__media:focus-visible,
.dumpling-category .product__link:focus-visible,
.dumpling-category .product h3 a:focus-visible {
  outline: 3px solid var(--dumpling-color-focus);
  outline-offset: 4px;
}

.dumpling-category .products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dumpling-space-md);
}

.dumpling-category .product--visual {
  min-width: 0;
  padding: 0;
  overflow: clip;
  border-color: var(--dumpling-color-rule);
  border-radius: var(--dumpling-radius-card);
  box-shadow: var(--dumpling-shadow-card);
  transition: border-color var(--dumpling-dur-short) var(--dumpling-ease-out);
}

.dumpling-category .product--visual:hover {
  border-color: var(--dumpling-color-accent);
}

.dumpling-category .product__media {
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-bottom: 1px solid var(--dumpling-color-rule);
  background: var(--dumpling-color-paper);
}

.dumpling-category .product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms var(--dumpling-ease-out);
}

.dumpling-category .product--visual:hover .product__media img {
  transform: scale(1.025);
}

.dumpling-category .product__copy {
  display: flex;
  min-height: 275px;
  flex-direction: column;
  padding: var(--dumpling-space-md);
}

.dumpling-category .product__model {
  color: var(--dumpling-color-accent-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dumpling-category .product--visual h3 {
  margin: var(--dumpling-space-xs) 0 0;
  color: var(--dumpling-color-ink);
  font-size: 1.22rem;
  line-height: 1.28;
}

.dumpling-category .product--visual p {
  margin: var(--dumpling-space-xs) 0 var(--dumpling-space-md);
  color: var(--dumpling-color-muted);
}

.dumpling-category .product__link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: auto;
  color: var(--dumpling-color-accent-dark);
  font-weight: 850;
  white-space: nowrap;
}

.dumpling-category .product__link span {
  margin-left: var(--dumpling-space-chip-y);
  color: inherit;
  transition: transform var(--dumpling-dur-short) var(--dumpling-ease-out);
}

.dumpling-category .product__link:hover span {
  transform: translateX(4px);
}

.dumpling-category .product__media:active img,
.dumpling-category .product h3 a:active,
.dumpling-category .product__link:active {
  opacity: 0.72;
}

.dumpling-category .product__media[aria-disabled="true"],
.dumpling-category .product h3 a[aria-disabled="true"],
.dumpling-category .product__link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.application-proof {
  background: var(--dumpling-color-paper);
}

.application-proof__head {
  max-width: 780px;
}

.application-proof h2,
.customer-fit h2,
.production-path h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.output-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: var(--dumpling-space-md);
  margin-top: var(--dumpling-space-lg);
}

.output-showcase figure,
.production-path__visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: clip;
  border: 1px solid var(--dumpling-color-rule);
  border-radius: var(--dumpling-radius-card);
  background: var(--dumpling-color-paper);
}

.output-showcase img,
.production-path__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.output-showcase__primary {
  min-height: 560px;
}

.output-showcase__secondary {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--dumpling-space-md);
}

.output-showcase__secondary figure {
  min-height: 268px;
}

.output-showcase figcaption {
  position: absolute;
  inset: auto var(--dumpling-space-sm) var(--dumpling-space-sm);
  display: grid;
  max-width: calc(100% - 2rem);
  gap: var(--dumpling-space-2xs);
  padding: var(--dumpling-space-xs) var(--dumpling-space-sm);
  color: var(--dumpling-color-paper);
  background: var(--dumpling-color-overlay);
}

.output-showcase figcaption strong {
  font-family: var(--dumpling-font-display);
  font-size: 1.05rem;
}

.output-showcase figcaption span {
  font-size: 0.86rem;
  line-height: 1.45;
}

.application-proof__note {
  max-width: 82ch;
  margin: var(--dumpling-space-md) 0 0;
  padding-left: var(--dumpling-space-sm);
  border-left: 4px solid var(--dumpling-color-accent);
  color: var(--dumpling-color-muted);
}

.customer-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.72fr);
  gap: var(--dumpling-space-xl);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: var(--dumpling-space-xl);
  border-top: 1px solid var(--dumpling-color-rule);
}

.customer-fit__intro h2 {
  margin: 0 0 var(--dumpling-space-sm);
  color: var(--dumpling-color-ink);
  font-size: clamp(1.85rem, 3vw, 2.7rem);
  line-height: 1.08;
}

.customer-fit__intro p,
.customer-fit__grid p,
.production-path__steps p {
  color: var(--dumpling-color-muted);
}

.customer-fit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dumpling-space-md);
}

.customer-fit__grid article {
  min-width: 0;
  padding: var(--dumpling-space-md);
  border-top: 3px solid var(--dumpling-color-ink);
  background: var(--dumpling-color-surface);
}

.customer-fit__grid h3 {
  margin: 0 0 var(--dumpling-space-xs);
  color: var(--dumpling-color-ink);
  font-size: 1.08rem;
  line-height: 1.3;
}

.customer-fit__grid p {
  margin: 0;
}

.production-path__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.production-path__steps {
  display: grid;
  gap: 0;
  margin: var(--dumpling-space-lg) 0;
  padding: 0;
  list-style: none;
}

.production-path__steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--dumpling-space-sm);
  padding: var(--dumpling-space-sm) 0;
  border-top: 1px solid var(--dumpling-color-rule);
}

.production-path__steps li:last-child {
  border-bottom: 1px solid var(--dumpling-color-rule);
}

.production-path__steps li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: var(--dumpling-color-accent-ink);
  background: var(--dumpling-color-accent-dark);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.production-path__steps h3 {
  margin: 0 0 var(--dumpling-space-2xs);
  color: var(--dumpling-color-ink);
  font-size: 1rem;
}

.production-path__steps p {
  margin: 0;
}

.production-path__link {
  white-space: nowrap;
}

.production-path__visual {
  position: sticky;
  top: 7rem;
  aspect-ratio: 4 / 5;
}

.production-path__visual figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--dumpling-space-sm) var(--dumpling-space-md);
  color: var(--dumpling-color-paper);
  background: var(--dumpling-color-overlay);
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .dumpling-category .dumpling-hero {
    min-height: 540px;
    background-position: 62% center;
  }

  .dumpling-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

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

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

  .output-showcase__primary {
    min-height: 480px;
  }

  .output-showcase__secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .customer-fit,
  .production-path__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-path__visual {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .dumpling-category .dumpling-hero {
    min-height: auto;
    padding: var(--dumpling-space-hero-mobile-top) 0 var(--dumpling-space-hero-mobile-bottom);
    background-image: var(--dumpling-hero-gradient-mobile),
      url("../products/servo-dumpling-gyoza-machine-family/hero-ai-optimized-1600.webp");
    background-position: 70% center;
  }

  .dumpling-hero__grid,
  .dumpling-category .products {
    grid-template-columns: minmax(0, 1fr);
  }

  .dumpling-category .dumpling-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.3rem);
  }

  .dumpling-category .product__copy {
    min-height: 0;
  }

  .output-showcase__primary,
  .output-showcase__secondary figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .output-showcase__secondary,
  .customer-fit__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .output-showcase figcaption {
    inset: auto var(--dumpling-space-xs) var(--dumpling-space-xs);
  }

  .output-showcase figcaption span {
    display: none;
  }

  .customer-fit {
    gap: var(--dumpling-space-lg);
  }

  .production-path__visual {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dumpling-category .product--visual,
  .dumpling-category .product__media img,
  .dumpling-category .product__link span {
    transition-duration: 0.01ms;
  }
}