/* ==========================================================
   GENERATED FILE — do not edit.
   Built from src/css/: tokens.css base.css components.css
   Regenerate with: ./tools/build-assets.sh
   ========================================================== */

/* ---------- tokens.css ---------- */
/* ==========================================================================
   Design tokens. Values only — no selectors beyond :root.
   Documented in DESIGN_NOODLESITE.md §3–§5.
   ========================================================================== */

:root {
  /* ---- Palette ------------------------------------------------------
     Drawn from the products themselves: semolina, tomato meat sauce,
     curry, black pepper, konjac jade. */
  --semolina:      #F1E7D0;   /* page ground                            */
  --semolina-deep: #E5D8B9;   /* recessed panels                        */
  --steam:         #FCFAF4;   /* raised panels, form ground             */
  --ink:           #1B1512;   /* body text, dark sections               */
  --tomato:        #BE3A2B;   /* brand red — display type and dark bgs  */
  --curry:         #E09A1E;   /* accent — dark backgrounds ONLY (§3)    */
  --jade:          #5B7F63;   /* decorative strokes only                */
  --pepper:        #4A4038;

  /* Ink at opacity. Raised from the source design's .62 to .65 so small
     text clears 4.5:1 on semolina-deep as well as semolina. */
  --ink-60: rgba(27, 21, 18, .65);
  /* Borders and rules ONLY — 1.92:1, far below text minimum. Never
     put text in this color. */
  --ink-30: rgba(27, 21, 18, .30);
  --ink-12: rgba(27, 21, 18, .12);

  /* Small red text. Plain --tomato is 4.46:1 on semolina, marginally under
     AA; this is 5.51:1. Use --tomato for display sizes, this below 24px. */
  --tomato-ink: #A92E21;

  /* ---- Type --------------------------------------------------------- */
  --display:    "Bodoni Moda", Georgia, "Times New Roman", serif;
  --body:       "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --mono:       "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bodoni has no CJK coverage, so the display role swaps to a serif that
     does. See ARCHITECTURE_DESIGN.md §7 — no CJK webfont is ever loaded
     blocking; these are system faces with a Noto fallback. */
  --display-zh: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --body-zh:    "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
                "Hiragino Sans GB", sans-serif;

  --font-body: var(--body);

  /* ---- Layout ------------------------------------------------------- */
  --container: 1220px;
  --gut:       clamp(20px, 5vw, 64px);
  --rule:      1px solid var(--ink-12);
  --radius:    2px;

  /* ---- Motion ------------------------------------------------------- */
  --t-fast: .18s;
  --t-mid:  .25s;
}

/* Chinese pages lead with the CJK stack. */
:root:lang(zh) { --font-body: var(--body-zh); }

/* ---------- base.css ---------- */
/* ==========================================================================
   Reset, element defaults, typography, accessibility primitives.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--semolina);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gut);
}

section { padding-block: clamp(64px, 9vw, 120px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 18px;
}

/* Unresolved company data. Deliberately loud — these must not reach launch. */
.tbd {
  border-bottom: 1px dotted var(--tomato-ink);
  color: var(--tomato-ink);
  font-family: var(--mono);
  font-size: .92em;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--tomato-ink);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--ink);
  color: var(--semolina);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Chinese typography
   Bodoni has no CJK coverage, and the tight negative tracking that suits
   Latin display type reads as broken in CJK. Both are corrected here rather
   than page by page.
   -------------------------------------------------------------------------- */

html[lang="zh-CN"] body { line-height: 1.75; }

html[lang="zh-CN"] .logo,
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .pagehead h1,
html[lang="zh-CN"] .sec-head h2,
html[lang="zh-CN"] .card h3,
html[lang="zh-CN"] .step h3,
html[lang="zh-CN"] .docs h3,
html[lang="zh-CN"] .gate h3,
html[lang="zh-CN"] .closer h2,
html[lang="zh-CN"] .tile b,
html[lang="zh-CN"] .rail b { font-family: var(--display-zh); letter-spacing: 0; }

html[lang="zh-CN"] .hero h1     { font-size: clamp(34px, 5vw, 64px); line-height: 1.22; font-weight: 500; }
html[lang="zh-CN"] .hero h1 em,
html[lang="zh-CN"] .pagehead h1 em { font-style: normal; font-weight: 600; }
html[lang="zh-CN"] .pagehead h1 { font-weight: 500; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.25; max-width: 20ch; }
html[lang="zh-CN"] .sec-head h2 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.3; font-weight: 500; max-width: 24ch; }
html[lang="zh-CN"] .closer h2   { font-weight: 500; line-height: 1.35; }

/* Latin letterspacing is too tight for CJK at label sizes. */
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .rail div,
html[lang="zh-CN"] .field span,
html[lang="zh-CN"] .contactinfo dt,
html[lang="zh-CN"] .pagehead .crumb,
html[lang="zh-CN"] .gate .go { letter-spacing: .05em; }

html[lang="zh-CN"] .certs b   { font-family: var(--body-zh); font-weight: 700; font-size: 17px; }
html[lang="zh-CN"] .cap b,
html[lang="zh-CN"] .tl__yr    { font-family: var(--body-zh); font-weight: 700; }
html[lang="zh-CN"] .docs ul,
html[lang="zh-CN"] .card ul,
html[lang="zh-CN"] .mk li     { font-family: var(--body-zh); font-size: 13.5px; letter-spacing: 0; }

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

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

/* ---------- components.css ---------- */
/* ==========================================================================
   Components. Documented in DESIGN_NOODLESITE.md §6.
   ========================================================================== */

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

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 11px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--semolina);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--tomato); border-color: var(--tomato); color: var(--semolina); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--semolina); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241, 231, 208, .92);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule);
}
.masthead__in { display: flex; align-items: center; gap: 24px; min-height: 66px; }

.logo { font-family: var(--display); font-size: 23px; white-space: nowrap; }
/* A logo is not translated — the mark is fixed in both languages. */
.logo__cn {
  font-family: var(--display-zh);
  font-weight: 500; font-size: 25px; letter-spacing: .05em;
  display: block; line-height: 1.1;
}
.logo .sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--ink-60); display: block; margin-top: -2px;
}

.masthead nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.masthead nav a {
  font-size: 14px;
  color: var(--ink-60);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--tomato); }
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.masthead nav a.btn { border-bottom-color: var(--ink); }
.masthead nav a.btn[aria-current="page"] { color: var(--semolina); }

/* ---- Language switcher ---- */
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  background: transparent;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--ink);
}
.lang__btn:hover { border-color: var(--ink-30); }
.lang__btn svg { width: 14px; height: 14px; flex: none; opacity: .6; }
.lang__btn .caret { transition: transform var(--t-fast); }
.lang__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 214px;
  background: var(--steam);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(27, 21, 18, .14);
  padding: 6px; display: none; z-index: 60;
}
.lang__menu.open { display: block; }
.lang__opt {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: transparent; border: 0; text-align: left;
  padding: 10px 12px; border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-body); font-size: 15px;
}
.lang__opt:hover { background: var(--semolina); }
.lang__opt small {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-60); margin-left: auto; text-transform: uppercase;
}
.lang__opt[aria-current="true"] { background: var(--semolina-deep); }
.lang__opt[aria-current="true"] small { color: var(--tomato-ink); }

/* ---- Mobile menu toggle ---- */
.hamb {
  display: none;
  width: 40px; height: 36px;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 0 9px;
}
.hamb span { display: block; height: 2px; background: var(--ink); transition: transform var(--t-mid), opacity var(--t-fast); }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 104px) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(42px, 6.6vw, 84px);
  line-height: 1.02; letter-spacing: -.015em;
  margin: 0 0 22px;
}
.hero h1 em { font-style: italic; color: var(--tomato); }
.hero__lede { font-size: clamp(17px, 1.5vw, 20px); max-width: 46ch; color: var(--ink-60); margin: 0 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__shot { align-self: stretch; }
.hero__shot img {
  width: 100%; height: 100%;
  min-height: clamp(240px, 32vw, 400px);
  object-fit: cover;
  border: var(--rule);
}

/* Signature: drifting noodle strands. */
.strands { width: 100%; height: clamp(120px, 15vw, 190px); overflow: hidden; }
.strands svg { width: 200%; height: 100%; animation: drift 26s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strands path { fill: none; stroke-linecap: round; }

/* ---- Stat rail ---- */
.rail {
  margin-top: clamp(40px, 6vw, 72px);
  border-block: var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rail div {
  padding: 16px 18px; border-left: var(--rule);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-60);
}
.rail div:first-child { border-left: 0; }
.rail b {
  display: block; font-family: var(--display); font-size: 26px;
  letter-spacing: 0; color: var(--ink); font-weight: 500;
  text-transform: none; margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 44px; }
.sec-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.01em;
  margin: 0; max-width: 20ch;
}
.sec-head p { margin: 0 0 4px auto; max-width: 38ch; color: var(--ink-60); font-size: 15.5px; }
.sec-head .eyebrow { width: 100%; max-width: none; margin: 0 0 -10px; }

/* --------------------------------------------------------------------------
   Family cards
   -------------------------------------------------------------------------- */

.range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border: var(--rule); }
.card { background: var(--semolina); padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 14px; }
.card:hover { background: var(--steam); }
.card__mark { height: 34px; }
.card__mark path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
.card:hover .card__mark path { animation: pull 1.4s ease forwards; }
@keyframes pull { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.card h3 { font-family: var(--display); font-weight: 500; font-size: 23px; line-height: 1.15; }
.card .alt { font-family: var(--mono); font-size: 12px; color: var(--ink-60); letter-spacing: .06em; }
.card p { margin: 0; font-size: 15px; color: var(--ink-60); }
.card ul { margin: auto 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-60); letter-spacing: .02em; }
.card ul li { padding-top: 7px; margin-top: 7px; border-top: var(--rule); }
.card__img { margin: 0; }
.card__img img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--steam); padding: 10px; }

/* --------------------------------------------------------------------------
   Private label — inverted section
   -------------------------------------------------------------------------- */

.oem { background: var(--ink); color: var(--semolina); }
.oem .sec-head h2 { color: var(--steam); }
.oem .sec-head p  { color: rgba(241, 231, 208, .66); }
.oem .eyebrow     { color: rgba(241, 231, 208, .60); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(241,231,208,.18); border: 1px solid rgba(241,231,208,.18); }
.step { background: var(--ink); padding: 24px 20px 28px; min-height: 210px; }
.step b { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--curry); display: block; margin-bottom: 26px; }
.step h3 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0 0 8px; color: var(--steam); }
.step p { margin: 0; font-size: 14.5px; color: rgba(241,231,208,.70); line-height: 1.5; }
.oem__foot { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.oem .btn { background: var(--curry); border-color: var(--curry); color: var(--ink); }
.oem .btn:hover { background: var(--steam); border-color: var(--steam); color: var(--ink); }
.oem__note { font-size: 14.5px; color: rgba(241,231,208,.66); max-width: 44ch; margin: 0; }

/* --------------------------------------------------------------------------
   Proof — certifications + documents
   -------------------------------------------------------------------------- */

.proof { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 5vw, 72px); }
.certs { border-top: var(--rule); }
.certs li { display: flex; gap: 18px; padding: 16px 0; border-bottom: var(--rule); align-items: baseline; }
.certs b { font-family: var(--display); font-size: 19px; font-weight: 500; min-width: 132px; }
.certs span { font-size: 14.5px; color: var(--ink-60); }

.docs { background: var(--steam); border: var(--rule); padding: 28px 26px; }
.docs h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0 0 6px; }
.docs > p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-60); }
.docs ul { font-family: var(--mono); font-size: 13px; line-height: 1.45; }
.docs li { padding: 9px 0; border-top: var(--rule); display: flex; gap: 10px; }
.docs li::before { content: "—"; color: var(--tomato-ink); }

/* Certificate scans */
.scans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.scans a { text-align: center; }
.scans img {
  width: 100%; height: 210px; object-fit: contain;
  background: var(--steam); border: var(--rule); padding: 10px;
  transition: border-color var(--t-fast);
}
.scans a:hover img { border-color: var(--tomato); }
.scans span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-60); }

.certstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--ink-12); border: var(--rule); }
.certstrip div { background: var(--semolina); padding: 20px 14px; text-align: center; font-family: var(--display); font-size: 17px; font-weight: 500; }
html[lang="zh-CN"] .certstrip div { font-family: var(--body-zh); font-weight: 700; font-size: 15px; }

/* --------------------------------------------------------------------------
   Interior page head
   -------------------------------------------------------------------------- */

.pagehead { padding-block: clamp(56px, 8vw, 96px) clamp(30px, 5vw, 56px); border-bottom: var(--rule); }
.pagehead .crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); margin: 0 0 16px; }
.pagehead h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -.015em;
  margin: 0 0 22px; max-width: 16ch;
}
.pagehead h1 em { font-style: italic; color: var(--tomato); }
.pagehead .lede { font-size: clamp(17px, 1.5vw, 20px); max-width: 52ch; color: var(--ink-60); margin: 0; }

/* --------------------------------------------------------------------------
   About — story, timeline, capabilities
   -------------------------------------------------------------------------- */

.story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 5vw, 72px); }
.story p { margin: 0 0 18px; font-size: 16.5px; }
.story p:last-child { margin-bottom: 0; }
.story .lead { font-size: 19px; line-height: 1.5; }
.story img { width: 100%; object-fit: cover; border: var(--rule); }
.story figure { margin: 0; }
.story figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-60); }

.tl { border-top: 1px solid var(--ink-30); margin-top: 8px; }
.tl__row { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: clamp(16px, 3vw, 40px); padding: 24px 0; border-bottom: var(--rule); align-items: baseline; }
.tl__yr { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1; }
.tl h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.tl p { margin: 0; color: var(--ink-60); font-size: 15.5px; max-width: 62ch; }

.mk { display: flex; flex-wrap: wrap; gap: 9px; }
.mk li { border: 1px solid var(--ink-12); background: var(--steam); padding: 9px 15px; border-radius: var(--radius); font-family: var(--mono); font-size: 13.5px; letter-spacing: .03em; }

.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-12); border: var(--rule); }
.cap { background: var(--semolina); padding: 24px 22px 28px; }
.cap b { display: block; font-family: var(--display); font-size: 32px; font-weight: 500; line-height: 1; margin-bottom: 10px; }
.cap h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.cap p { margin: 0; font-size: 14.5px; color: var(--ink-60); }

.band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border: var(--rule); }
.band img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* --------------------------------------------------------------------------
   Catalog — family menu + product grid
   -------------------------------------------------------------------------- */

.catalog__inner { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }

/* Filled category blocks, matching the original site's product page: the
   active family inverts to the page ground. */
.catside { position: sticky; top: 90px; border: var(--rule); }
.catside a {
  display: block;
  padding: 17px 18px;
  background: var(--pepper);
  color: var(--semolina);
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid rgba(241, 231, 208, .18);
  transition: background var(--t-fast), color var(--t-fast);
}
.catside a:last-child { border-bottom: 0; }
.catside a:hover { background: var(--ink); }
.catside a[aria-current="true"] {
  background: var(--semolina);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tomato);
}
.catside a[aria-current="true"]:hover { background: var(--semolina); }
.catside .n { font-family: var(--mono); font-size: 11px; opacity: .7; margin-left: 5px; }

.catmain { min-width: 0; }
.famsec { scroll-margin-top: 90px; }
.famsec + .famsec { margin-top: clamp(48px, 6vw, 76px); }
/* Tab behaviour only switches on once products.js flags the container, so
   with JS off every family stays visible and indexable. */
.catalog[data-tabs="on"] .famsec { display: none; margin-top: 0; }
.catalog[data-tabs="on"] .famsec.is-active { display: block; }

.famsec__hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-30); margin-bottom: 28px; }
.famsec__hd h2 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 0; }
.famsec__hd .alt { font-family: var(--mono); font-size: 12px; color: var(--ink-60); letter-spacing: .06em; display: block; margin-top: 6px; }
.famsec__hd .sub { margin: 0; max-width: 40ch; font-size: 15px; color: var(--ink-60); }

.prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prodgrid figure { margin: 0; background: var(--steam); border: var(--rule); padding: 22px 20px 24px; display: flex; flex-direction: column; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast); }
.prodgrid figure:hover { border-color: var(--tomato); transform: translateY(-2px); }
.prodgrid img { width: 100%; height: 190px; object-fit: contain; margin-bottom: 16px; }
.prodgrid figcaption { font-size: 14.5px; line-height: 1.45; margin-top: auto; }
.prodgrid .alt { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-60); margin-top: 4px; letter-spacing: .03em; }
html[lang="zh-CN"] .prodgrid .alt { font-family: var(--body); }

/* --------------------------------------------------------------------------
   Online store
   -------------------------------------------------------------------------- */

.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border: var(--rule); }
.gate { background: var(--semolina); padding: 30px 26px 34px; display: flex; flex-direction: column; gap: 12px; transition: background var(--t-fast); }
.gate:hover { background: var(--steam); }
.gate h3 { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 0; line-height: 1.1; }
.gate .region { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.gate p { margin: 0; font-size: 15px; color: var(--ink-60); }
.gate .go { margin-top: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tomato-ink); }
.gate--soon { background: var(--semolina-deep); }
.gate--soon .go { color: var(--ink-60); }

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

.contact__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px, 5vw, 72px); }

.contactinfo dl { margin: 0; border-top: var(--rule); }
.contactinfo dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); padding-top: 16px; }
.contactinfo dd { margin: 2px 0 16px; font-size: 16.5px; border-bottom: var(--rule); padding-bottom: 16px; }
.contactinfo .alt { font-family: var(--mono); font-size: 13px; color: var(--ink-60); }

.form { background: var(--steam); border: var(--rule); padding: clamp(22px, 3vw, 34px); }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--semolina); border: 1px solid var(--ink-30);
  border-radius: var(--radius); padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--tomato-ink); outline-offset: 1px; }
.field textarea { min-height: 118px; resize: vertical; }
.field .req { color: var(--tomato-ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-family: var(--mono); font-size: 12px; color: var(--ink-60); margin: 14px 0 0; }

.form__status { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; display: none; }
.form__status.is-ok   { display: block; background: rgba(91,127,99,.14);  border: 1px solid var(--jade); }
.form__status.is-err  { display: block; background: rgba(169,46,33,.10); border: 1px solid var(--tomato-ink); color: var(--tomato-ink); }

/* --------------------------------------------------------------------------
   Closer + footer
   -------------------------------------------------------------------------- */

.closer { background: var(--ink); color: var(--semolina); text-align: center; }
.closer h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.8vw, 46px); margin: 0 auto 16px; max-width: 20ch; color: var(--steam); line-height: 1.1; }
.closer p { margin: 0 auto 28px; max-width: 50ch; color: rgba(241,231,208,.70); font-size: 16px; }
.closer .btn { background: var(--curry); border-color: var(--curry); color: var(--ink); }
.closer .btn:hover { background: var(--steam); border-color: var(--steam); color: var(--ink); }

footer { background: var(--ink); color: rgba(241,231,208,.72); padding-block: 44px; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a:hover { color: var(--semolina); }
footer .alt { font-family: var(--mono); font-size: 12.5px; color: rgba(241,231,208,.55); }

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

@media (max-width: 1100px) {
  .masthead nav a:not(.btn) { display: none; }
  .masthead nav { gap: 12px; }
  .hamb { display: flex; }

  .masthead .nav-links {
    position: fixed; top: 66px; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--steam);
    padding: 6px var(--gut) 22px;
    border-top: var(--rule);
    box-shadow: 0 14px 28px rgba(27,21,18,.16);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s, transform .22s, visibility .22s;
    z-index: 48;
  }
  .masthead .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .masthead .nav-links a { display: block; padding: 15px 2px; border-bottom: var(--rule); font-size: 16px; color: var(--ink); }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail div:nth-child(3) { border-left: 0; }
  .rail div:nth-child(-n+2) { border-bottom: var(--rule); }

  .range { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .proof, .contact__grid, .story { grid-template-columns: 1fr; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .band, .gates { grid-template-columns: 1fr; }
  .tl__row { grid-template-columns: 1fr; gap: 6px; }
  .scans { grid-template-columns: repeat(2, 1fr); }
  .certstrip { grid-template-columns: repeat(3, 1fr); }

  .catalog__inner { grid-template-columns: 1fr; gap: 20px; }
  .catside { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .catside::-webkit-scrollbar { display: none; }
  .catside a { flex: none; padding: 12px 16px; border-bottom: 0; white-space: nowrap; }
  .catside a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--tomato); padding-left: 16px; }
  .prodgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 660px) {
  body { font-size: 16px; }
  .range, .steps { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .certs li { flex-direction: column; gap: 4px; }
  .certs b { min-width: 0; }
  .lang__btn .lang__label { display: none; }
  .caps { grid-template-columns: 1fr; }
  .certstrip { grid-template-columns: repeat(2, 1fr); }
  .prodgrid img { height: 150px; }
  footer .wrap { flex-direction: column; gap: 14px; }
}