/* 育崴首頁識別：公雞 LOGO 的墨色、朱紅與圓弧，沿用既有品牌素材。 */
@font-face {
  font-family:Yuwei Sans;
  src:url('/assets/experience-20261015/yuwei-tc-v2.woff2') format('woff2');
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
}
:root {
  --ink:#292b28;
  --red:#b83d1b;
  --red-hover:#ac3514;
  --paper:#f8f5ed;
  --white:#fffdf8;
  --sand:#eee9dd;
  --muted:#64665d;
  --line:#d9d7cc;
  --dark-line:#54574e;
  --max:1296px;
  --radius:28px;
  --ease:cubic-bezier(.22,.68,.3,1);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:116px;
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Yuwei Sans,'Noto Sans TC',-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei',sans-serif;
  font-size:19px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure,dl,dd {
  margin:0;
}
h1,h2,h3 {
  font-weight:800;
  line-height:1.4;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
svg {
  display:block;
  max-width:100%;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px;
}
::selection {
  background:var(--red);
  color:white;
}
.wrap {
  width:min(calc(100% - 112px),var(--max));
  margin-inline:auto;
}
.mono,.en-label,.image-index {
  font-family:Arial,sans-serif;
  font-size:14px;
  letter-spacing:.15em;
}
.section {
  padding-block:116px;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
}
.section-no {
  font-family:Arial,sans-serif;
  font-size:15px;
  color:var(--red);
  border:1px solid currentColor;
  border-radius:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  letter-spacing:0;
}
.en-label {
  color:var(--muted);
  margin-left:8px;
  font-weight:400;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:60px;
}
.section-head>p {
  color:var(--muted);
  font-size:18px;
  line-height:2;
}
.section h2 {
  font-size:calc(clamp(30px,3.45vw,50px) + 3px);
  letter-spacing:-.035em;
  line-height:1.5;
  margin-top:24px;
}
.skip-link {
  position:fixed;
  z-index:1100;
  top:12px;
  left:20px;
  padding:10px 20px;
  background:var(--ink);
  color:white;
  transform:translateY(-180%);
}
.skip-link:focus {
  transform:none;
}
.reading-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:550;
  pointer-events:none;
}
.reading-progress span {
  display:block;
  height:100%;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
}
/* 主選單預設可見；只有主腳本成功初始化後，才切換為手機選單。 */
.site-header {
  position:relative;
  z-index:500;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header.is-ready {
  position:sticky;
  top:0;
}
.site-header.scrolled {
  box-shadow:0 3px 12px #292b2808;
}
.nav {
  min-height:100px;
  display:flex;
  align-items:center;
  gap:40px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand-mark {
  height:51px;
  width:auto;
}
.brand-name {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand-name img {
  width:77px;
  height:auto;
}
.brand-name>span {
  font-family:Arial,sans-serif;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.16em;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  font-size:17px;
  font-weight:500;
}
.nav-links>a {
  min-height:44px;
  display:flex;
  align-items:center;
  position:relative;
}
.nav-links>a:after {
  position:absolute;
  content:'';
  left:0;
  right:0;
  bottom:5px;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}
.nav-links>a:hover,.nav-links>a[aria-current] {
  color:var(--red);
}
.nav-links>a:hover:after,.nav-links>a[aria-current]:after {
  transform:scaleX(1);
}
.nav-links .portal-link {
  font-size:15px;
  color:var(--muted);
  margin-left:8px;
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-order {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:44px;
  background:var(--ink);
  color:var(--white);
  border-radius:8px;
  padding:8px 22px;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  transition:background .2s;
}
.nav-order:hover {
  background:var(--red);
}
.nav-order span {
  font-size:23px;
}
.burger {
  display:none;
  width:44px;
  height:44px;
  padding:10px;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.burger span {
  height:1.5px;
  width:20px;
  background:var(--ink);
  transition:transform .2s;
}
.burger[aria-expanded=true] span:first-child {
  transform:translateY(3.75px) rotate(45deg);
}
.burger[aria-expanded=true] span:last-child {
  transform:translateY(-3.75px) rotate(-45deg);
}
/* 首屏以真實內容為底，不使用隱藏正文的進場狀態。 */
.hero {
  padding:64px 0 40px;
  overflow:clip;
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.hero-copy {
  padding-bottom:12px;
  min-width:0;
}
.small-mark {
  display:block;
  width:12px;
  height:12px;
  background:var(--red);
  border-radius:7px 7px 7px 0;
}
.hero h1 {
  font-size:calc(clamp(44px,5.35vw,78px) + 3px);
  line-height:1.4;
  font-weight:900;
  letter-spacing:-.06em;
  margin:28px 0;
}
.hero h1>span {
  color:var(--red);
  white-space:nowrap;
}
.hero-lead {
  font-size:19px;
  line-height:2.1;
  color:var(--muted);
}
.hero-cta {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:36px;
  flex-wrap:wrap;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:56px;
  padding:14px 24px;
  border-radius:8px;
  font-size:17px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .2s,transform .2s;
}
.btn svg,.text-link svg {
  width:22px;
  height:22px;
  flex-shrink:0;
}
.btn-primary {
  background:var(--red);
  color:var(--white);
}
.btn-primary:hover {
  background:var(--red-hover);
}
.btn:active {
  transform:translateY(1px);
}
.text-link {
  font-size:17px;
  font-weight:500;
  display:inline-flex;
  gap:20px;
  align-items:center;
  min-height:44px;
}
.text-link:hover {
  color:var(--red);
}
.text-link span {
  font-size:27px;
  font-weight:400;
}
.hero-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:54px;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--muted);
}
.hero-foot .mono {
  font-size:12px;
}
.hero-art {
  position:relative;
  min-width:0;
}
.hero-photo {
  position:relative;
  aspect-ratio:1/.98;
  overflow:hidden;
  border-radius:200px 24px 24px 24px;
  background:var(--sand);
}
.hero-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}
.photo-note {
  position:absolute;
  right:18px;
  bottom:14px;
  color:white;
  background:#292b28ba;
  padding:2px 8px;
  font-size:13px;
  letter-spacing:.08em;
}
.hero-art figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:15px;
  margin-top:18px;
  color:var(--muted);
}
.hero-art figcaption a {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:25px;
  transition:background .2s;
}
.hero-art figcaption a:hover {
  background:var(--sand);
}
.fresh-seal {
  position:absolute;
  left:-28px;
  top:38px;
  width:98px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  border:1px solid var(--red);
  border-radius:50px 50px 16px 16px;
  background:var(--paper);
  color:var(--red);
  transform:rotate(-9deg);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
}
.fresh-seal img {
  width:24px;
  height:auto;
}
.brand-strip {
  background:var(--red);
  color:var(--white);
  margin-top:26px;
}
.brand-strip>.wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:17px;
}
.brand-strip span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-inline:26px;
  font-size:18px;
  font-weight:500;
  letter-spacing:.15em;
}
.strip-flower {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
}
/* 關於育崴：以照片、留白與短段落建立閱讀節奏。 */
.about-grid {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:100px;
  align-items:center;
}
.about-visual {
  padding:0 24px 0 30px;
}
.about-visual figure {
  border-radius:24px 24px 160px 24px;
  overflow:hidden;
  background:var(--sand);
  position:relative;
  aspect-ratio:4/5;
}
.about-visual figure>img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-visual figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  color:var(--white);
  background:#292b28e6;
  padding:18px 26px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:15px;
}
.about-visual figcaption>span+span {
  font-size:12px;
  letter-spacing:.15em;
}
.image-index {
  display:block;
  margin-top:20px;
  color:var(--muted);
  font-size:13px;
}
.about-copy {
  min-width:0;
}
.about-copy h2 {
  margin-top:24px;
}
.about-copy .quote {
  border-left:2px solid var(--red);
  padding-left:20px;
  margin:30px 0;
  font-size:23px;
  font-weight:600;
  line-height:1.85;
  color:var(--ink);
}
.about-copy>p:not(.eyebrow):not(.quote) {
  color:var(--muted);
  font-size:18px;
  margin-top:18px;
  line-height:2.1;
  max-width:33em;
}
.about-sign {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
}
.about-sign img {
  width:65px;
  height:auto;
}
.about-sign span {
  font-size:14px;
  color:var(--muted);
  letter-spacing:.05em;
}
.principles {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:76px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.principles>div {
  padding:26px 24px 28px;
  border-right:1px solid var(--line);
}
.principles>div:first-child {
  padding-left:0;
}
.principles>div:last-child {
  border:0;
  padding-right:0;
}
.principles dt {
  font-size:20px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:16px;
}
.principles dt>span {
  font-family:Arial,sans-serif;
  color:var(--red);
  font-size:14px;
  font-weight:400;
}
.principles dd {
  font-size:15px;
  color:var(--muted);
  margin-top:8px;
}
/* 圖鑑保留原有六部位連動；觸控與鍵盤使用相同資料。 */
.cuts {
  background:var(--sand);
}
.cuts-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
.chart-plate {
  position:sticky;
  top:124px;
  padding:26px 26px 20px;
  border:1px solid #bbbdb1;
  border-radius:160px 160px 16px 16px;
  background:var(--paper);
  padding-top:42px;
}
.plate-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.plate-head b {
  font-size:22px;
  letter-spacing:.05em;
}
.plate-head .mono {
  font-size:12px;
  color:var(--muted);
}
.cut-svg {
  width:100%;
  height:auto;
  margin:14px auto;
}
.cut-svg .zone {
  fill:var(--white);
  stroke:var(--ink);
  stroke-width:2;
  transition:fill .2s;
}
.cut-svg .zsep {
  fill:none;
  stroke:#72776a;
  stroke-width:1.5;
  stroke-dasharray:6 6;
  pointer-events:none;
}
.cut-svg .zlab {
  font-family:inherit;
  font-size:19px;
  font-weight:600;
  fill:var(--ink);
  pointer-events:none;
}
.cut-svg .zlab-en {
  font-family:Arial,sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  fill:var(--muted);
  font-weight:400;
}
.cut-svg .lead-line {
  stroke:#72776a;
  stroke-width:1.3;
  pointer-events:none;
}
.cut-svg .part {
  cursor:pointer;
}
.cut-svg .part.on .zone,.cut-svg .part:focus-visible .zone {
  fill:var(--red);
  stroke:var(--red);
}
.cut-svg .part.on .zlab {
  fill:var(--ink);
}
.cut-svg .part.on[data-part=breast] .zlab {
  fill:var(--white);
}
.cut-svg .part:focus-visible {
  outline:2px solid var(--red);
  outline-offset:6px;
}
.cut-svg .in-detail {
  fill:none;
  stroke:#72776a;
  stroke-width:1.6;
  pointer-events:none;
}
.cut-svg .part.on .in-detail {
  stroke:var(--white);
}
.plate-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:15px;
  letter-spacing:.1em;
}
.plate-foot>span:last-child {
  font-size:27px;
}
.cut-hint {
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
}
.prod-col {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 28px;
}
.prod-card {
  padding:0 0 20px;
  border-bottom:1px solid #c5c8bb;
  min-width:0;
  scroll-margin-top:130px;
  border-radius:12px 12px 0 0;
  transition:border-color .2s,background .2s;
}
.prod-card .top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:Arial,sans-serif;
  margin-bottom:12px;
}
.idx {
  font-size:13px;
  color:var(--red);
  letter-spacing:.1em;
}
.prod-card .en {
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
}
.prod-card .ph {
  background:var(--paper);
  border-radius:12px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  padding:18px;
  transition:background .2s;
}
.prod-card .ph img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .25s var(--ease);
}
.prod-card h3 {
  font-size:23px;
  margin-bottom:8px;
  letter-spacing:.03em;
}
.prod-card p {
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:14px;
}
.prod-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.prod-tag {
  font-size:13px;
  line-height:1.8;
  color:#805127;
  padding:1px 8px;
  border:1px solid #c4b8a4;
  border-radius:4px;
}
.prod-card.lit {
  border-color:var(--red);
}
.prod-card.lit .ph,.prod-card:hover .ph {
  background:var(--white);
}
.prod-card.lit img,.prod-card:hover img {
  transform:translateY(-3px);
}
.prod-card.flash {
  animation:product-focus 1.3s ease-out;
}
.prod-note {
  grid-column:1/-1;
  font-size:15px;
  line-height:2;
  color:var(--muted);
  margin-top:4px;
}
.prod-note b {
  font-weight:500;
  color:var(--ink);
}
@keyframes product-focus {
  0%,60% {
    background:#f9e2d6;
  }
  to {
    background:transparent;
  }
}
/* 冷鏈資訊固定且完整可讀；不以動態數字模擬實際監測。 */
.process {
  background:var(--ink);
  color:var(--paper);
}
.process .section-head>p,.process .en-label {
  color:#c0c3b6;
}
.process .section-no {
  color:#ff9e6f;
}
.process-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}
.cold-panel {
  padding:40px 20px 0;
  text-align:center;
  min-width:0;
}
.cold-range {
  position:relative;
  border:1px solid #777c6d;
  border-radius:180px 180px 20px 20px;
  padding:60px 20px 46px;
}
.cold-range:before {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid var(--dark-line);
  border-radius:inherit;
  pointer-events:none;
}
.cold-range>.mono {
  color:#c0c3b6;
  font-size:13px;
}
.cold-range b {
  display:block;
  font-size:calc(clamp(56px,6.6vw,98px) + 3px);
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.07em;
  color:#ffa875;
  margin:26px 0;
}
.cold-range b>span {
  font-size:calc(.4em + 1.8px);
  vertical-align:top;
  letter-spacing:-.04em;
  margin-left:5px;
  line-height:1.5;
}
.cold-range>p {
  font-size:16px;
  letter-spacing:.13em;
}
.cold-brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:#c0c3b6;
  margin-top:28px;
  text-align:left;
}
.cold-brand>img {
  width:30px;
  height:auto;
  background:var(--paper);
  border-radius:6px;
  padding:4px;
}
.delivery-line {
  height:1px;
  background:#777c6d;
  flex:1;
  position:relative;
}
.delivery-line:after {
  content:'›';
  position:absolute;
  right:-1px;
  top:-14px;
  font-size:23px;
}
.cold-note {
  font-size:13px;
  color:#b1b5a8;
  margin-top:18px;
  text-align:left;
}
.process-steps {
  list-style:none;
  margin:0;
  padding:0;
}
.process-steps>li {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:16px;
  border-bottom:1px solid var(--dark-line);
  padding:28px 0;
}
.process-steps>li:first-child {
  border-top:1px solid var(--dark-line);
}
.step-no {
  font:15px/2.6 Arial,sans-serif;
  color:#ffa875;
}
.process-steps h3 {
  font-size:25px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.process-steps h3>span {
  color:#c0c3b6;
  font-size:13px;
  letter-spacing:.1em;
  font-weight:400;
}
.process-steps p {
  color:#c0c3b6;
  font-size:16px;
  line-height:1.9;
  margin-top:10px;
  max-width:30em;
}
.supply-note {
  margin-top:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--dark-line);
  padding-top:24px;
  gap:20px;
  font-size:16px;
  color:#c0c3b6;
}
.supply-note a {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:44px;
  color:var(--paper);
}
.supply-note a>svg {
  width:22px;
  height:22px;
}
.supply-note a:hover {
  color:#ffa875;
}
/* 聯絡：主要行動、電話與服務資訊放在同一閱讀區域。 */
.contact {
  background:var(--paper);
}
.contact-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:center;
}
.contact h2 {
  font-size:calc(clamp(32px,3.6vw,52px) + 3px);
}
.contact h2>span {
  color:var(--red);
}
.contact-lead {
  font-size:17px;
  color:var(--muted);
  line-height:2;
  margin-top:26px;
}
.contact-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px;
  flex-wrap:wrap;
}
.contact-info {
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
}
.contact-phone {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.contact-phone>span {
  font-size:15px;
  color:var(--muted);
  grid-column:1;
}
.contact-phone>b {
  font-family:Arial,sans-serif;
  font-weight:400;
  font-size:calc(clamp(26px,2.8vw,36px) + 3px);
  line-height:1.5;
  letter-spacing:-.02em;
  grid-column:1;
}
.contact-phone>svg {
  grid-column:2;
  grid-row:1/3;
  width:30px;
  height:30px;
}
.contact-phone:hover {
  color:var(--red);
}
.contact-info dl>div {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  padding-top:20px;
  font-size:15px;
}
.contact-info dt {
  color:var(--muted);
}
.contact-mail {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:16px/1.8 Arial,sans-serif;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  gap:12px;
  overflow-wrap:anywhere;
}
.contact-mail:hover {
  color:var(--red);
}
footer {
  background:#22251f;
  color:#c0c3b6;
  padding:64px 0 28px;
  font-size:15px;
}
.foot-top {
  display:grid;
  grid-template-columns:1.1fr 1fr 1.3fr .75fr;
  gap:38px;
  padding-bottom:40px;
  border-bottom:1px solid var(--dark-line);
}
.foot-badge {
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--paper);
  padding:14px 18px;
  border-radius:10px;
}
.foot-badge .mark {
  width:auto;
  height:42px;
}
.foot-badge .word {
  width:72px;
  height:auto;
}
.foot-tag {
  margin-top:20px;
  font-size:14px;
  line-height:2;
}
.foot-col h3 {
  font-size:15px;
  font-weight:500;
  color:var(--paper);
  letter-spacing:.12em;
  margin:4px 0 20px;
}
.foot-contact {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
  line-height:1.9;
}
.foot-contact a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
}
.foot-contact li {
  display:flex;
  align-items:baseline;
  gap:14px;
}
.foot-contact li>:first-child {
  flex:0 0 36px;
  color:#9ea593;
  font-size:13px;
}
.foot-contact li>:last-child {
  overflow-wrap:anywhere;
}
.foot-links {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
}
.foot-links a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
}
footer a:hover {
  color:var(--white);
}
.foot-bot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:22px;
  font-family:Arial,Yuwei Sans,sans-serif;
  font-size:13px;
  flex-wrap:wrap;
}
.site-credit {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
}
.site-credit>span {
  font-size:14px;
}
.site-credit>img {
  width:148px;
  height:26px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.85;
  transition:filter .2s,opacity .2s;
}
.site-credit:hover>img,.site-credit:focus-visible>img {
  filter:none;
  opacity:1;
}
.back-top {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:200;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:50%;
  font-size:25px;
}
.back-top:hover {
  color:var(--red);
  border-color:var(--red);
}
@media(min-width:1600px) {
  .hero {
    padding-top:80px;
    padding-bottom:56px;
  }
  .hero-grid {
    gap:80px;
  }
  .hero h1 {
    font-size:85px;
  }
  .hero-photo {
    aspect-ratio:1/1.05;
  }
}
@media(max-width:1200px) {
  .wrap {
    width:calc(100% - 72px);
  }
  .nav {
    gap:24px;
  }
  .nav-links {
    gap:22px;
  }
  .nav-links .portal-link {
    display:none;
  }
  .hero-grid {
    gap:40px;
  }
  .hero h1 {
    font-size:calc(5.3vw + 3px);
  }
  .hero-foot {
    flex-wrap:wrap;
    gap:8px;
  }
  .about-grid,.process-grid,.contact-grid {
    gap:60px;
  }
  .about-visual {
    padding-left:0;
    padding-right:0;
  }
  .cuts-grid {
    gap:36px;
  }
  .foot-top {
    gap:24px;
    grid-template-columns:1fr 1fr 1.3fr;
  }
  .foot-col:last-child {
    grid-column:1/-1;
  }
  .foot-links {
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px 24px;
  }
  .principles>div {
    padding-inline:16px;
  }
  .principles dt {
    gap:10px;
    font-size:18px;
  }
}
@media(max-width:960px) {
  .wrap {
    width:calc(100% - 56px);
  }
  .nav {
    min-height:84px;
    flex-wrap:wrap;
    gap:0;
    justify-content:space-between;
  }
  .nav-actions {
    margin-left:auto;
  }
  .nav-links {
    order:3;
    margin:0;
    padding:12px 0;
    flex-basis:100%;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid var(--line);
    font-size:16px;
  }
  .nav-links .portal-link {
    display:flex;
  }
  .is-ready .burger {
    display:flex;
  }
  .is-ready .nav-links {
    display:none;
  }
  .is-ready .nav-links.open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:14px 0 24px;
    gap:0;
  }
  .is-ready .nav-links.open a {
    min-height:48px;
    border-bottom:1px solid var(--line);
    font-size:19px;
    padding-block:8px;
  }
  .is-ready .nav-links.open .portal-link {
    margin:0;
    font-size:16px;
  }
  .nav-links>a:after {
    display:none;
  }
  .site-header.is-ready {
    max-height:100svh;
    overflow:auto;
  }
  .hero {
    padding-top:44px;
  }
  .hero-grid {
    gap:30px;
  }
  .hero h1 {
    font-size:calc(5.2vw + 3px);
  }
  .hero-lead {
    font-size:17px;
  }
  .hero-cta {
    gap:12px;
    margin-top:24px;
  }
  .hero-cta .btn {
    font-size:15px;
    gap:20px;
    padding:12px 16px;
    min-height:50px;
  }
  .hero-cta .text-link {
    font-size:15px;
    gap:10px;
  }
  .hero-foot {
    margin-top:28px;
    font-size:13px;
  }
  .hero-photo {
    aspect-ratio:3/4;
    border-top-left-radius:130px;
  }
  .fresh-seal {
    left:-16px;
    top:24px;
    width:78px;
    height:100px;
    font-size:11px;
    gap:5px;
  }
  .fresh-seal img {
    width:22px;
  }
  .hero-art figcaption {
    font-size:13px;
    gap:10px;
  }
  .brand-strip span {
    padding-inline:12px;
    font-size:15px;
    letter-spacing:.08em;
  }
  .strip-flower {
    width:18px;
    height:18px;
  }
  .section {
    padding-block:84px;
  }
  .section-head {
    margin-bottom:42px;
  }
  .section h2 {
    font-size:37px;
  }
  .en-label {
    font-size:12px;
    margin-left:0;
  }
  .about-grid {
    gap:42px;
  }
  .about-copy .quote {
    font-size:20px;
    padding-left:14px;
    margin-block:24px;
  }
  .about-copy>p:not(.eyebrow):not(.quote) {
    font-size:16px;
  }
  .about-sign {
    gap:16px;
  }
  .about-sign span {
    font-size:13px;
  }
  .principles {
    grid-template-columns:repeat(2,1fr);
    margin-top:48px;
  }
  .principles>div {
    padding:22px 24px!important;
  }
  .principles>div:nth-child(2) {
    border-right:0;
  }
  .principles>div:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .principles dd {
    font-size:15px;
  }
  .cuts-grid {
    grid-template-columns:.85fr 1.15fr;
    gap:28px;
  }
  .chart-plate {
    padding-inline:16px;
    top:108px;
    border-top-left-radius:120px;
    border-top-right-radius:120px;
  }
  .plate-head b {
    font-size:19px;
  }
  .plate-head .mono {
    font-size:11px;
  }
  .prod-col {
    gap:20px;
  }
  .prod-card .ph {
    height:124px;
    padding:14px;
  }
  .prod-card h3 {
    font-size:21px;
  }
  .prod-card p {
    font-size:14px;
  }
  .prod-tag {
    padding-inline:5px;
  }
  .plate-foot {
    font-size:13px;
    letter-spacing:0;
  }
  .process-grid {
    gap:40px;
  }
  .cold-panel {
    padding-inline:0;
  }
  .cold-range {
    padding:50px 14px 40px;
  }
  .cold-range b {
    font-size:71px;
  }
  .cold-brand {
    font-size:13px;
    gap:8px;
  }
  .process-steps h3 {
    font-size:23px;
    gap:14px;
  }
  .process-steps p {
    font-size:15px;
  }
  .process-steps>li {
    gap:8px;
    padding-block:24px;
  }
  .contact-grid {
    gap:42px;
  }
  .contact-info {
    padding:24px;
  }
  .contact-actions {
    gap:16px;
  }
  .contact-actions .btn {
    padding-inline:18px;
    gap:18px;
    font-size:16px;
  }
  .contact-actions .text-link {
    font-size:15px;
    gap:12px;
  }
  .contact-info dl>div {
    gap:12px;
    grid-template-columns:62px 1fr;
    font-size:14px;
  }
  .contact-mail {
    font-size:15px;
  }
  .foot-top {
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .foot-col:last-child {
    grid-column:auto;
  }
  .foot-links {
    flex-direction:column;
    gap:10px;
  }
  .foot-bot {
    gap:12px;
  }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:100px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .nav {
    min-height:78px;
  }
  .brand-mark {
    height:42px;
  }
  .brand-name img {
    width:63px;
  }
  .brand-name>span {
    font-size:10px;
  }
  .brand {
    gap:9px;
  }
  .nav-actions {
    gap:10px;
  }
  .nav-order {
    font-size:14px;
    padding:8px 14px;
    gap:12px;
  }
  .nav-order span {
    font-size:20px;
  }
  .hero {
    padding-top:32px;
    padding-bottom:22px;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
  .hero-copy {
    padding:0;
  }
  .hero .eyebrow {
    font-size:14px;
  }
  .hero h1 {
    font-size:calc(clamp(38px,8.6vw,58px) + 3px);
    line-height:1.45;
    margin:18px 0;
  }
  .hero-lead {
    font-size:17px;
    line-height:1.9;
  }
  .hero-lead br:nth-of-type(2) {
    display:none;
  }
  .hero-cta {
    gap:24px;
    margin-top:24px;
  }
  .hero-cta .btn {
    font-size:16px;
    gap:20px;
    min-height:52px;
    padding-inline:20px;
  }
  .hero-cta .text-link {
    font-size:15px;
    gap:10px;
  }
  .hero-foot {
    margin-top:26px;
    flex-wrap:nowrap;
    gap:10px;
    font-size:12px;
    padding-top:16px;
  }
  .hero-foot .mono {
    font-size:10px;
    letter-spacing:.07em;
  }
  .hero-art {
    margin-left:18px;
  }
  .hero-photo {
    aspect-ratio:1/.92;
    border-radius:140px 20px 20px 20px;
  }
  .fresh-seal {
    left:-18px;
    top:22px;
    width:78px;
    height:98px;
  }
  .hero-art figcaption {
    margin-top:10px;
    font-size:13px;
  }
  .hero-art figcaption a {
    width:44px;
    height:44px;
    flex-shrink:0;
  }
  .brand-strip {
    margin-top:8px;
  }
  .brand-strip>.wrap {
    width:100%;
    padding:14px 12px;
  }
  .brand-strip span {
    font-size:13px;
    padding:0 8px;
    letter-spacing:.08em;
    gap:8px;
  }
  .strip-flower {
    width:15px;
    height:15px;
  }
  .section {
    padding-block:64px;
  }
  .eyebrow {
    font-size:14px;
    gap:10px;
    flex-wrap:wrap;
  }
  .section-no {
    width:24px;
    height:24px;
    font-size:13px;
  }
  .section .en-label {
    font-size:11px;
  }
  .section h2 {
    font-size:calc(clamp(28px,7.1vw,40px) + 3px);
    margin-top:20px;
  }
  .section-head {
    display:block;
    margin-bottom:32px;
  }
  .section-head>p {
    font-size:16px;
    margin-top:20px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .about-copy {
    order:-1;
  }
  .about-copy .quote {
    font-size:21px;
    margin-block:24px;
  }
  .about-copy>p:not(.eyebrow):not(.quote) {
    font-size:17px;
    max-width:100%;
    line-height:2;
  }
  .about-sign {
    margin-top:26px;
  }
  .about-visual {
    padding:0 22px 0 0;
    max-width:460px;
    margin:auto;
  }
  .about-visual figure {
    aspect-ratio:1/.92;
    border-bottom-right-radius:110px;
  }
  .about-visual figcaption {
    font-size:14px;
    padding:14px 20px;
  }
  .principles {
    margin-top:34px;
  }
  .principles>div {
    padding:20px 14px!important;
  }
  .principles>div:nth-child(odd) {
    padding-left:0!important;
  }
  .principles>div:nth-child(even) {
    padding-right:0!important;
  }
  .principles dt {
    font-size:18px;
    gap:10px;
  }
  .principles dd {
    font-size:14px;
    line-height:1.9;
    margin-top:8px;
  }
  .cuts-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .chart-plate {
    position:static;
    max-width:420px;
    width:100%;
    margin:auto;
    padding:34px 24px 16px;
    border-radius:160px 160px 14px 14px;
  }
  .plate-head b {
    font-size:21px;
  }
  .plate-head .mono {
    font-size:12px;
  }
  .cut-svg {
    max-width:330px;
    margin-block:12px;
  }
  .plate-foot {
    font-size:14px;
  }
  .prod-col {
    gap:24px 20px;
  }
  .prod-card .ph {
    height:130px;
    padding:12px;
    margin-bottom:14px;
  }
  .prod-card h3 {
    font-size:21px;
  }
  .prod-card p {
    font-size:15px;
  }
  .prod-card .en {
    font-size:12px;
    letter-spacing:.01em;
  }
  .prod-card .idx {
    font-size:12px;
  }
  .prod-tag {
    font-size:12px;
    padding-inline:6px;
  }
  .prod-note {
    font-size:15px;
    margin-top:0;
  }
  .process-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .cold-panel {
    padding:0 20px;
    max-width:440px;
    width:100%;
    margin:auto;
  }
  .cold-range {
    padding:40px 16px 34px;
    border-radius:150px 150px 18px 18px;
  }
  .cold-range b {
    font-size:87px;
    margin:20px 0;
  }
  .cold-range>p {
    font-size:15px;
  }
  .cold-brand {
    margin-top:24px;
    font-size:13px;
  }
  .cold-note {
    font-size:12px;
  }
  .process-steps>li {
    padding-block:24px;
    grid-template-columns:32px 1fr;
    gap:12px;
  }
  .process-steps h3 {
    font-size:23px;
  }
  .process-steps p {
    font-size:16px;
  }
  .supply-note {
    margin-top:34px;
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    font-size:15px;
  }
  .supply-note a {
    font-size:16px;
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .contact-lead {
    font-size:16px;
    margin-top:22px;
  }
  .contact-actions {
    margin-top:24px;
    gap:24px;
  }
  .contact-actions .btn {
    font-size:16px;
    min-height:52px;
  }
  .contact-info {
    padding:24px;
  }
  .contact-phone>b {
    font-size:35px;
  }
  .contact-info dl>div {
    font-size:15px;
    grid-template-columns:72px 1fr;
    gap:18px;
  }
  .contact-mail {
    font-size:16px;
  }
  footer {
    padding:42px 0 24px;
  }
  .foot-top {
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
    padding-bottom:28px;
  }
  .foot-top>div:first-child {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:20px;
  }
  .foot-tag {
    margin:0;
    font-size:13px;
  }
  .foot-badge {
    padding:10px 14px;
    gap:10px;
    flex-shrink:0;
  }
  .foot-badge .mark {
    height:32px;
  }
  .foot-badge .word {
    width:55px;
  }
  .foot-col:nth-child(3) {
    grid-column:1/-1;
    grid-row:3;
  }
  .foot-col:last-child {
    grid-column:2;
    grid-row:2;
  }
  .foot-col h3 {
    font-size:14px;
    margin-bottom:16px;
  }
  .foot-contact {
    font-size:14px;
    gap:10px;
  }
  .foot-contact li {
    gap:12px;
  }
  .foot-links {
    font-size:14px;
    gap:8px;
  }
  .foot-bot {
    padding-top:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    font-size:13px;
  }
  .site-credit {
    gap:12px;
  }
  .site-credit>span {
    font-size:13px;
  }
  .site-credit>img {
    width:140px;
    height:auto;
  }
  .back-top {
    bottom:14px;
    right:12px;
    width:44px;
    height:44px;
    font-size:23px;
  }
}
@media(max-width:360px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .nav-order {
    padding:8px 10px;
    gap:8px;
  }
  .nav-actions {
    gap:8px;
  }
  .brand {
    gap:7px;
  }
  .hero h1 {
    font-size:calc(8.6vw + 3px);
  }
  .hero-cta {
    gap:16px;
  }
  .hero-cta .btn {
    padding-inline:16px;
    font-size:15px;
    gap:16px;
  }
  .hero-cta .text-link {
    font-size:14px;
  }
  .brand-strip span {
    padding-inline:5px;
    font-size:12px;
  }
  .strip-flower {
    width:13px;
    height:13px;
  }
  .principles dt {
    font-size:17px;
  }
  .prod-col {
    gap:20px 14px;
  }
  .prod-card .ph {
    height:110px;
  }
  .prod-card h3 {
    font-size:20px;
  }
  .prod-card p {
    font-size:14px;
  }
  .prod-tag {
    font-size:11px;
    padding-inline:5px;
  }
  .contact-actions {
    gap:16px;
  }
  .contact-phone>b {
    font-size:31px;
  }
  .foot-top {
    gap:24px 14px;
  }
  .foot-tag {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .prod-card.flash {
    outline:2px solid var(--red);
    outline-offset:4px;
  }
}
@media(forced-colors:active) {
  .btn,.nav-order,.fresh-seal,.brand-strip,.site-credit {
    border:1px solid ButtonText;
  }
  .cut-svg .zone {
    fill:Canvas;
    stroke:CanvasText;
  }
  .cut-svg .zlab {
    fill:CanvasText;
  }
}
@media print {
  .site-header,.back-top,.brand-strip,.reading-progress,#brand-intro,.hero-cta,.contact-actions {
    display:none!important;
  }
  .section {
    padding-block:28px;
  }
  .wrap {
    width:100%;
  }
  .hero {
    padding-top:0;
  }
  .hero-art {
    max-width:360px;
  }
  .process {
    background:white;
    color:black;
  }
  .process * {
    color:black!important;
  }
  .chart-plate {
    position:static;
  }
  .contact-grid,.process-grid {
    gap:24px;
  }
  footer {
    background:white;
    color:black;
  }
  .site-credit img {
    filter:brightness(.3);
  }
}