:root {
  --paper: #f4ebdd;
  --card: #fff9ef;
  --ink: #1d2923;
  --green: #315c45;
  --leaf: #77936c;
  --red: #b6462e;
  --gold: #d2a84b;
  --mist: #dce5da;
  --ink-muted: #4c5b51;
  --line: rgba(29, 41, 35, 0.2);
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "IBM Plex Sans", "PingFang TC", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Used only by the repeatable review capture: keep screenshots at complete,
   readable visual states while leaving the visitor experience untouched. */
html[data-visual-capture="settled"] *,
html[data-visual-capture="settled"] *::before,
html[data-visual-capture="settled"] *::after {
  animation: none !important;
  transition: none !important;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(49, 92, 69, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 92, 69, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
  font-family: var(--sans);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--card); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* A grid gap cannot be collapsed away, so the three groups can never touch
     however tight the header gets. */
  column-gap: 28px;
  padding: 0 4vw;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled { background: rgba(244,235,221,.88); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--serif); font-weight: 700; letter-spacing: .05em; }
.brand-copy { display: grid; gap: 2px; line-height: 1; }
.brand-name { white-space: nowrap; }
.brand small { display: block; margin: 0; }
.brand-tagline { font: 10px/1.1 var(--serif); letter-spacing: .18em; }
.brand-domain { font: 9px/1.1 var(--mono); letter-spacing: .1em; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--card); background: var(--red); font-family: var(--serif); }
.site-header nav { display: flex; gap: 32px; font: 12px/1 var(--mono); letter-spacing: .08em; }
.site-header nav a { text-decoration: none; position: relative; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--red); transition:right .25s ease; }
.site-header nav a:hover::after { right:0; }
.product-menu { position:relative; }
.product-menu-toggle { appearance:none; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; }
.product-menu-toggle::after { content:"+"; margin-left:8px; color:var(--red); }
.product-menu-toggle[aria-expanded="true"]::after { content:"−"; }
.product-menu-list { position:absolute; top:calc(100% + 16px); left:50%; width:max-content; min-width:176px; padding:8px; border:1px solid var(--ink); background:var(--card); box-shadow:6px 6px 0 var(--mist); transform:translateX(-50%); }
.product-menu-list a, .product-menu-list span { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 12px; font:11px/1.2 var(--mono); letter-spacing:.04em; }
.product-menu-list a:hover { background:var(--mist); }
.product-menu-list span { color:rgba(29,41,35,.58); cursor:not-allowed; }
.product-menu-list small { color:var(--red); font:9px/1 var(--mono); white-space:nowrap; }
.prototype-tag { justify-self: end; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 999px; font: 10px/1 var(--mono); }

.hero { position: relative; }
.hero-stage { position:relative; }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow, .section-index { font: 11px/1.4 var(--mono); letter-spacing: .14em; }
.eyebrow-badge { display:inline-grid; place-items:center; width:32px; height:32px; margin-right:12px; border:1px solid var(--ink); border-radius:50%; }
.hero h1 { margin: 40px 0 28px; font: 600 clamp(60px,7.2vw,122px)/.98 var(--serif); letter-spacing:-.06em; }
.hero h1 em { font-weight:400; color:var(--green); }
.hero-lede { max-width: 560px; font: 400 clamp(18px,1.55vw,24px)/1.75 var(--serif); }
.hero-actions { display:flex; gap:14px; margin-top:42px; flex-wrap:wrap; }
.button { min-height: 52px; display:inline-flex; align-items:center; justify-content:center; gap:36px; padding:0 24px; border:1px solid var(--ink); text-decoration:none; font: 12px/1 var(--mono); letter-spacing:.06em; transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease; }
.button:hover { transform:translateY(-3px); box-shadow: 5px 5px 0 var(--gold); }
.button-primary { color:var(--card); background:var(--green); border-color:var(--green); }
.button-quiet { background:rgba(255,249,239,.4); }
.hero-available .hero-stage{min-height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:center;gap:6vw;padding:116px 6vw 72px}
.hero-product{display:block;position:relative;overflow:hidden;border:1px solid var(--ink);background:var(--card);box-shadow:18px 18px 0 var(--mist)}
.hero-product-base img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* Scroll scene pieces share the base image's box exactly, so with no transform
   they are invisible over the poster. Mobile and reduced motion never show or
   fetch them. */
.hero-scene-back,.hero-scene-soap,.hero-lather{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform-origin:61% 53%}
.hero-lather{opacity:0;z-index:3}
.hero-media-note{position:absolute;right:14px;bottom:10px;margin:0;font:10px/1.4 var(--mono);letter-spacing:.06em;color:var(--card);opacity:0;z-index:4;text-shadow:0 1px 2px rgba(29,41,35,.6)}
.hero-beats{position:relative}
.hero-beat[data-beat]:not([data-beat="1"]){position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden}
.hero-beat-eyebrow{margin:0 0 18px;font:11px/1.4 var(--mono);letter-spacing:.14em;color:var(--red)}
.hero-beat-title{margin:0 0 24px;font:500 clamp(30px,3.2vw,50px)/1.18 var(--serif);letter-spacing:-.04em;color:var(--green)}
/* Layered desktop mode (set by scroll-reveal.js): the hero grows tall and its
   stage sticks, so scrolling drives the camera toward the bar while the copy and
   CTA stay on screen. */
.hero-available.is-layered{min-height:300svh}
.hero-available.is-layered .hero-stage{position:sticky;top:0;min-height:100svh}
.hero-available.is-layered .hero-product{overflow:hidden}
.hero-available.is-layered .hero-beat{transition:opacity .5s ease,visibility .5s}
.hero-available.is-layered .hero-beat.is-active{opacity:1;visibility:visible}
.hero-available.is-layered .hero-beat:not(.is-active){opacity:0;visibility:hidden}
.evidence-band{padding:96px 7vw 112px;background:var(--card);border-block:1px solid var(--line)}
.evidence-band h2{max-width:800px;margin:30px 0 0;font:500 clamp(40px,5vw,78px)/1.12 var(--serif);letter-spacing:-.05em}
.evidence-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.evidence-card{min-height:280px;padding:28px;border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
.evidence-card>span{font:11px/1 var(--mono);color:var(--red)}
.evidence-card h3{margin:38px 0 12px;font:600 27px/1.2 var(--serif)}
.evidence-card p{margin:0;font:15px/1.75 var(--sans);color:rgba(29,41,35,.72)}
.evidence-card>a{margin-top:auto;color:var(--green);font:600 12px/1.4 var(--mono)}
.concierge-entry{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 7vw 96px;background:var(--card)}
.concierge-entry p{max-width:520px;margin:0;font:15px/1.75 var(--sans);color:rgba(29,41,35,.72)}

.manifesto { min-height:80svh; display:grid; place-content:center; padding:100px 9vw; background:var(--green); color:var(--card); position:relative; }
.manifesto .section-index { position:absolute; top:70px; left:7vw; color:var(--gold); }
.manifesto-text { margin:0; font: 400 clamp(38px,5vw,86px)/1.35 var(--serif); letter-spacing:-.045em; }
.manifesto-text span { color:var(--gold); border-bottom:2px solid currentColor; }

section.dumpling-preview { min-height:220svh; display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); grid-template-rows:100svh 120svh; position:relative; border-top:1px solid var(--line); background:var(--card); }
.preview-copy { grid-column:1; grid-row:1; align-self:center; padding:120px 4vw 80px 7vw; }
.preview-copy .section-index { margin:0; color:var(--red); }
.preview-copy h2 { margin:30px 0 24px; font:500 clamp(40px,5vw,76px)/1.12 var(--serif); letter-spacing:-.05em; }
.preview-copy > p:last-child { max-width:470px; margin:0; font:16px/1.85 var(--sans); color:rgba(29,41,35,.72); }
.dumpling-stage { position:sticky; top:0; grid-column:2; grid-row:1 / span 2; height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:start; padding:110px 6vw 60px 3vw; overflow:hidden; border-left:1px solid var(--line); background:var(--paper); }
.dumpling-stage .dumpling-video { width:100%; max-width:860px; }
.loom-meter { display:flex; align-items:center; gap:12px; width:100%; max-width:860px; margin:22px auto 0; color:var(--ink); font:11px/1 var(--mono); letter-spacing:.08em; }
.loom-meter i { flex:1; height:1px; background:var(--line); }
.loom-meter b { color:var(--red); font:inherit; }
.preview-evidence { grid-column:1; grid-row:2; align-self:center; display:grid; gap:0; margin:0 4vw 0 7vw; padding:0; border-top:1px solid var(--ink); list-style:none; }
.preview-evidence > * { padding:18px 0; border-bottom:1px solid var(--line); font:600 16px/1.4 var(--serif); }

.story, .service-preview { min-height:500vh; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(380px,.55fr); position:relative; }
.service-preview { min-height:216svh; }
.story-visual { position:sticky; top:0; height:100svh; overflow:hidden; padding:110px 5vw 60px; border-right:1px solid var(--line); background:rgba(244,235,221,.92); }
.story-ai .story-visual, .service-preview .story-visual { background:var(--ink); color:var(--card); }
.chapter-heading { position:relative; z-index:4; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.chapter-heading span { font:10px/1 var(--mono); letter-spacing:.12em; color:var(--red); }
.service-preview .chapter-heading small { font:10px/1 var(--mono); letter-spacing:.12em; color:var(--gold); }
.chapter-heading h2 { margin:0; font:500 clamp(28px,3vw,52px)/1.1 var(--serif); letter-spacing:-.04em; }
.food-stage, .service-stage { position:absolute; inset:190px 4vw 85px; overflow:hidden; }
.visual-state,.service-state { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(28px) scale(.985); transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s linear .8s; }
.visual-state.is-active,.service-state.is-active { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.story-image-state {
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(29,41,35,.12);
  border-radius: clamp(24px, 4vw, 64px);
  background: #eee6d8;
  box-shadow: 0 30px 80px rgba(29,41,35,.10);
  transform: translateY(22px) scale(.985);
}
.story-image-state > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  filter: saturate(.94) contrast(1.02);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.story-image-state.is-active { transform: none; }
.story-image-state.is-active > img { transform: scale(1); filter: saturate(1) contrast(1); }
.story-qr-link {
  position: absolute;
  z-index: 3;
  left: 56.2%;
  top: 35.5%;
  width: clamp(72px, 8.4vw, 118px);
  aspect-ratio: 1;
  border: 5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px rgba(29,41,35,.18);
  opacity: 0;
  transform: translateY(10px) scale(.82);
  transition: opacity .45s ease .35s, transform .7s cubic-bezier(.2,.8,.2,1) .3s;
}
.story-image-state.is-active .story-qr-link { opacity: 1; transform: none; }
.story-qr-crop { position: absolute; inset: 0; overflow: hidden; display: block; }
/* Frames the QR block of the supplied artwork (source-normalised x .239-.759,
   y .362-.602) plus an 8% quiet zone, so the code stays scannable. */
.story-qr-crop img {
  position: absolute;
  width: 165.96%;
  max-width: none;
  height: auto;
  left: -32.84%;
  top: -123.19%;
}
.story-qr-link:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.story-progress { position:absolute; bottom:42px; left:5vw; right:5vw; height:2px; background:var(--line); }.story-progress span { display:block; width:12%; height:100%; background:var(--red); transition:width .7s cubic-bezier(.2,.8,.2,1); }
/* Service preview rail: three mono labels on a dark track and a seal-red lock
   that slides (not fades) to the active step — the motion is the feedback. */
.service-preview .story-progress { display:grid; grid-template-columns:repeat(3,1fr); height:auto; padding:4px; border:1px solid rgba(255,249,239,.22); border-radius:999px; background:rgba(255,249,239,.06); }
.service-preview .story-progress i { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:999px; background:var(--red); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.service-preview .story-progress span { position:relative; z-index:1; display:block; width:auto; height:auto; padding:9px 0; background:transparent; text-align:center; font:10px/1 var(--mono); letter-spacing:.14em; color:rgba(255,249,239,.62); transition:color .3s ease; }
.service-preview .story-progress span.is-active { color:var(--card); }
.story-copy { position:relative; }
.story-step { min-height:100svh; padding:18vh 5vw 12vh; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line); opacity:.35; transition:opacity .35s ease; }
.service-preview .story-step { min-height:72svh; }
.story-step.is-active { opacity:1; }
.story-step>p:first-child { color:var(--red); font:11px/1 var(--mono); letter-spacing:.12em; }
.story-step h3 { margin:28px 0; font:500 clamp(35px,4vw,65px)/1.18 var(--serif); letter-spacing:-.045em; }
.story-step>p:last-child { max-width:480px; margin:0; font:16px/1.8 var(--sans); color:rgba(29,41,35,.72); }

.handoff { min-height:70svh; display:grid; place-content:center; position:relative; overflow:hidden; background:var(--red); color:var(--card); }
.handoff-line { position:absolute; left:-10%; right:-10%; top:50%; height:2px; background:var(--gold); transform:rotate(-6deg); }
.handoff-line::after { content:""; position:absolute; width:42px; height:42px; right:24%; top:-21px; border:2px solid var(--gold); border-radius:50%; background:var(--red); }
.handoff p { position:relative; z-index:1; margin:0; text-align:center; font:400 clamp(44px,6vw,92px)/1.1 var(--serif); }.handoff p span { display:block; margin-bottom:20px; font:11px/1 var(--mono); letter-spacing:.18em; color:var(--gold); }

.story-ai .story-copy, .service-preview .story-copy { background:var(--paper); color:var(--ink); }
.service-stage { display:grid; place-items:center; }
.phone-shell { width:320px; height:600px; border:2px solid var(--card); border-radius:44px; padding:12px; background:#102019; box-shadow:0 36px 80px rgba(0,0,0,.28); position:relative; z-index:3; }
.phone-top { height:44px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:0 10px; font:10px/1 var(--mono); }.phone-top i { width:8px;height:8px;border-radius:50%;background:var(--leaf)}.phone-top span{text-align:center}.phone-top b{text-align:right;letter-spacing:3px}
.phone-screen { height:500px; position:relative; overflow:hidden; border-radius:28px; background:var(--paper); color:var(--ink); }
.phone-home { width:80px; height:4px; border-radius:99px; background:rgba(255,249,239,.5); margin:14px auto 0; }
.service-state { padding:30px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.service-state>strong { font:600 22px/1.3 var(--serif); margin-top:22px; }.service-state>small{font:11px/1.6 var(--sans); margin-top:10px; color:rgba(29,41,35,.65)}
.qr-code { width:180px; height:180px; display:block; padding:12px; overflow:hidden; border:2px solid var(--ink); border-radius:6px; background:var(--card); position:relative; }
/* The 12px inset is a quiet zone around the QR modules. Keep it when changing
   the framing so a camera can distinguish the code from the phone artwork. */
.qr-code-live .story-qr-crop { inset:12px; border-radius:3px; }
/* On narrow screens the copy cards remain in normal flow, so this direct handoff
   is available even when scanning the screen itself is impractical. */
.step-actions { margin-top:30px; }
.qr-code-live:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.scan-beam { position:absolute; z-index:2; left:-8px; right:-8px; height:3px; top:18px; background:var(--red); box-shadow:0 0 20px var(--red); }
.service-info-card { width:100%; padding:24px; border:1px solid var(--ink); background:var(--card); text-align:left; box-shadow:8px 8px 0 var(--mist); }
.service-info-card > span { font:9px/1 var(--mono); letter-spacing:.08em; color:var(--red); }
.service-info-card > strong { display:block; margin:18px 0; font:600 24px/1.3 var(--serif); }
.service-info-card ul { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none; }
.service-info-card li { padding:7px 10px; border:1px solid var(--line); border-radius:99px; font:9px/1 var(--mono); }
.service-info-card small { display:block; font:12px/1.65 var(--sans); color:rgba(29,41,35,.68); }
.service-care-card { border-color:var(--green); }
.system-card { position:absolute; z-index:2; width:200px; padding:18px; border:1px solid rgba(255,249,239,.32); background:rgba(255,249,239,.08); backdrop-filter:blur(10px); }.system-card span{display:block;color:var(--gold);font:8px/1 var(--mono);letter-spacing:.1em}.system-card strong{display:block;margin-top:10px;font:500 17px/1.3 var(--serif)}.system-card i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--red);top:50%}.order-system{left:2%;top:26%}.order-system i{right:-4px}.customer-system{right:1%;bottom:20%}.customer-system i{left:-4px}.claw-guide{position:absolute;z-index:4;right:10%;top:17%;display:flex;align-items:center;gap:10px;font:8px/1 var(--mono);color:var(--gold)}.claw-guide b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:var(--card);font:600 18px/1 var(--serif)}
.system-orbit { position:absolute; width:720px;height:720px;border:1px solid rgba(255,249,239,.1);border-radius:50%; }.system-orbit::before,.system-orbit::after{content:"";position:absolute;border:1px solid rgba(255,249,239,.08);border-radius:50%;inset:70px}.system-orbit::after{inset:150px}.system-orbit span{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold)}.system-orbit span:nth-child(1){left:50%;top:-4px}.system-orbit span:nth-child(2){right:50px;top:72%}.system-orbit span:nth-child(3){left:80px;top:77%}
.story-ai .story-progress { background:rgba(255,249,239,.2); }

.product-overview { padding:120px 7vw; border-top:1px solid var(--line); }
.product-overview>.section-index { color:var(--red); }
.product-overview h2 { max-width:900px; margin:30px 0 24px; font:500 clamp(40px,5vw,78px)/1.12 var(--serif); letter-spacing:-.05em; }
.products-lede { max-width:560px; margin:0 0 64px; font:17px/1.8 var(--sans); color:rgba(29,41,35,.72); }
.product-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
.product-card { display:flex; flex-direction:column; padding:34px; background:var(--card); border:1px solid var(--ink); box-shadow:14px 14px 0 var(--mist); }
.product-origin { margin:0; font:10px/1 var(--mono); letter-spacing:.14em; }
.product-origin.is-own { color:var(--green); }
.product-origin.is-partner { color:var(--red); }
.product-card h3 { margin:26px 0 16px; font:600 clamp(25px,2.4vw,33px)/1.25 var(--serif); }
.product-card>p { margin:0 0 28px; font:15px/1.8 var(--sans); color:rgba(29,41,35,.72); }
.product-facts { display:grid; gap:11px; margin:0 0 32px; padding:20px 0 0; border-top:1px solid var(--line); }
.product-facts div { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.product-facts dt { font:10px/1.6 var(--mono); letter-spacing:.1em; color:rgba(29,41,35,.6); }
.product-facts dd { margin:0; font:600 14px/1.6 var(--sans); }
.product-card .button { margin-top:auto; align-self:flex-start; }

.soap-chapter { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); border-top:1px solid var(--line); background:var(--card); }
/* Both columns start at the top and are kept to a similar length by giving the
   visual side the ingredient table: neither centring nor sticky can hide a
   height mismatch this large, so the content is balanced instead. */
.soap-visual { padding:110px 4vw 70px 7vw; border-right:1px solid var(--line); }
.soap-visual .chapter-heading { flex-direction:column; align-items:start; gap:14px; }
.product-overview, .soap-chapter { scroll-margin-top:84px; }
#maker, #responsibility { scroll-margin-top:100px; }
.lime-soap-video { position:relative; margin-top:44px; border:1px solid var(--ink); box-shadow:16px 16px 0 var(--mist); }
.lime-soap-video-media { display:block; width:100%; aspect-ratio:16/9; background:var(--ink); }
.lime-soap-video[data-variant="portrait"] .lime-soap-video-media { aspect-ratio:9/16; max-height:76svh; margin:0 auto; width:auto; }
.media-note { margin:20px 0 0; font:11px/1.7 var(--mono); color:var(--ink-muted); }
.soap-copy { padding:110px 7vw 70px 4vw; }
.soap-eyebrow { margin:0; color:var(--red); font:11px/1 var(--mono); letter-spacing:.12em; }
.soap-copy h3 { margin:28px 0; font:500 clamp(29px,3.1vw,48px)/1.2 var(--serif); letter-spacing:-.04em; }
.soap-copy>p { max-width:480px; margin:0 0 34px; font:16px/1.8 var(--sans); color:rgba(29,41,35,.72); }
.soap-facts { list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line); }
.soap-facts li { padding:18px 0; border-bottom:1px solid var(--line); }
.soap-facts span { display:block; font:10px/1.4 var(--mono); letter-spacing:.12em; color:var(--red); }
.soap-facts b { display:block; margin:9px 0 5px; font:600 20px/1.3 var(--serif); }
.soap-facts small { font:12px/1.6 var(--sans); color:var(--ink-muted); }
.soap-offer { display:grid; gap:10px; margin:0 0 22px; }
.soap-offer div { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:14px 16px; border:1px solid var(--line); background:var(--paper); }
.soap-offer span { font:10px/1.4 var(--mono); letter-spacing:.1em; color:var(--red); }
.soap-offer strong { font:600 15px/1.5 var(--sans); }
.soap-ingredients { margin:0 0 32px; padding:18px 20px; background:var(--paper); border:1px solid var(--line); }
.soap-ingredients summary { cursor:pointer; font:12px/1.5 var(--mono); letter-spacing:.08em; }
.soap-ingredients p { margin:16px 0 0; font:14px/1.85 var(--sans); color:rgba(29,41,35,.72); }
.soap-ingredients .ingredients-main { font-weight:600; color:var(--ink); }
.soap-ingredients .ingredients-note { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.soap-disclosure { display:grid; gap:10px; margin:0 0 30px; }
.soap-disclosure p { margin:0; padding:16px 18px; border:1px solid var(--line); background:var(--paper); font:600 14px/1.6 var(--sans); }
.soap-disclosure span { display:block; font:400 10px/1.6 var(--mono); letter-spacing:.1em; color:var(--red); }
.soap-disclosure small { display:block; margin-top:4px; font:400 14px/1.6 var(--sans); color:var(--ink-muted); }

.prototype { min-height:100svh; padding:120px 7vw; background:var(--card); }
.prototype>.section-index { color:var(--red); }.prototype h2{max-width:1000px;margin:32px 0 70px;font:500 clamp(50px,6vw,94px)/1.1 var(--serif);letter-spacing:-.05em}.prototype-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-bottom:70px}.prototype-grid article{min-height:300px;padding:30px;border-right:1px solid var(--line)}.prototype-grid article:last-child{border-right:0}.prototype-grid span{font:11px/1 var(--mono);color:var(--red)}.prototype-grid h3{margin:80px 0 20px;font:600 25px/1.2 var(--serif)}.prototype-grid p{font:15px/1.8 var(--sans);color:rgba(29,41,35,.7)}
.motion-reel{display:grid;grid-template-columns:320px 1fr;gap:50px;align-items:start;margin:0 0 90px;padding:32px;border:1px solid var(--ink);background:var(--paper);box-shadow:14px 14px 0 var(--mist)}.motion-reel video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink)}.reel-heading{position:sticky;top:110px}.reel-heading span{font:10px/1 var(--mono);color:var(--red);letter-spacing:.12em}.reel-heading strong{display:block;margin:22px 0;font:600 30px/1.25 var(--serif)}.reel-heading p{font:14px/1.75 var(--sans);color:rgba(29,41,35,.68)}
footer { min-height:220px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:50px; padding:50px 5vw; color:var(--card); background:var(--ink); font:10px/1.5 var(--mono); }

@media (max-width: 1000px) {
  .site-header { grid-template-columns:1fr auto 1fr; }.site-header nav{display:flex}.site-header nav > a{display:none}
  .story,.service-preview{grid-template-columns:1fr;min-height:auto}.story-visual{position:sticky;top:0;height:72svh;border-right:0;border-bottom:1px solid var(--line);z-index:3;padding-top:90px}.story-copy{z-index:4}.story-step{min-height:72svh;padding:12vh 8vw;background:rgba(244,235,221,.94);backdrop-filter:blur(14px)}.food-stage,.service-stage{inset:150px 3vw 56px}.story-progress{bottom:24px}.phone-shell{transform:scale(.78)}.system-card{display:none}
  .service-preview { display:block; min-height:0; }
  /* The decorative orbit is deliberately wider than the phone. Clip it to the
     service panel so it does not turn into horizontal document overflow. */
  .service-preview .story-visual { position:static; height:auto; padding:90px 8vw 38px; overflow:hidden; }
  .service-preview .service-stage { position:relative; inset:auto; min-height:600px; margin-top:34px; overflow:visible; }
  .service-preview .phone-shell { transform:none; }
  .service-preview .story-progress { display:none; }
  .service-preview .story-copy { z-index:auto; }
  .service-preview .story-step { min-height:0; padding:52px 8vw; opacity:1; background:var(--paper); backdrop-filter:none; }
  .product-cards{grid-template-columns:1fr}.soap-chapter{grid-template-columns:minmax(0,1fr)}.soap-visual{padding:90px 7vw 50px;border-right:0;border-bottom:1px solid var(--line)}.soap-copy{padding:70px 7vw}.soap-disclosure p,.soap-disclosure small{font-size:15px}
  section.dumpling-preview { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }.preview-copy { padding-left:7vw; }.dumpling-stage { padding-right:4vw; }.dumpling-stage .dumpling-video, .loom-meter { width:100%; max-width:720px; }.preview-evidence { margin-left:7vw; }
  .motion-reel{grid-template-columns:1fr}.reel-heading{position:static}.prototype-grid{grid-template-columns:1fr}.prototype-grid article{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}.prototype-grid h3{margin-top:45px}footer{grid-template-columns:1fr;gap:20px}
}
@media (max-width: 767px) {
  .hero-copy{min-width:0}
  section.dumpling-preview { min-height:0; display:block; }.preview-copy { padding:88px 25px 36px; }.preview-copy h2 { font-size:40px; }.dumpling-stage { position:relative; top:auto; display:block; height:auto; padding:20px 20px 42px; overflow:visible; border:0; }.dumpling-stage .dumpling-video { width:min(100%, 520px); margin:auto; }.loom-meter { width:min(100%, 520px); }.preview-evidence { display:grid; margin:0 25px 72px; }
}
@media (max-width: 640px) {
  .site-header{height:68px;padding:0 18px;grid-template-columns:1fr auto}.prototype-tag{display:none}.brand-mark{width:34px;height:34px}.hero h1{font-size:54px}.hero-lede{font-size:17px}.manifesto{padding:100px 25px}.manifesto-text{font-size:38px}.story-visual{height:65svh;padding:82px 20px 30px}.chapter-heading{align-items:start;flex-direction:column;gap:9px}.chapter-heading h2{font-size:27px}.food-stage,.service-stage{inset:145px 10px 42px}.story-image-state > img { object-position: 50% 50%; }.story-qr-link { left: 56%; top: 37%; width: 70px; border-width: 3px; }.story-step{min-height:65svh;padding:10vh 25px}.story-step h3{font-size:38px}.phone-shell{transform:scale(.62)}.claw-guide{right:1%;top:12%}.system-orbit{width:470px;height:470px}.prototype{padding:90px 25px}.prototype h2{font-size:48px}
  .hero-available .hero-stage{min-height:auto;grid-template-columns:1fr;padding:104px 20px 48px;gap:32px}
  .hero-product-base img{aspect-ratio:4/5}
  .hero-scene-back,.hero-scene-soap,.hero-lather,.hero-media-note,.hero-beat[data-beat]:not([data-beat="1"]){display:none}
  .evidence-band{padding:72px 20px 84px;overflow:hidden}
  .evidence-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin-inline:-20px;padding:0 20px 18px}
  .evidence-card{flex:0 0 86vw;scroll-snap-align:start}
  .concierge-entry{align-items:flex-start;flex-direction:column;padding:0 20px 72px}
  .product-overview{padding:90px 25px}.product-card{padding:26px;box-shadow:8px 8px 0 var(--mist)}.soap-visual{padding:80px 25px 40px}.soap-copy{padding:56px 25px}.lime-soap-video{box-shadow:8px 8px 0 var(--mist)}
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene-back,.hero-scene-soap,.hero-lather,.hero-media-note,.hero-beat[data-beat]:not([data-beat="1"]){display:none}
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .story-image-state, .story-image-state > img, .story-qr-link { transform: none; transition-property: opacity, visibility; }
  section.dumpling-preview { min-height:0; display:block; }.preview-copy { padding:100px 7vw 36px; }.dumpling-stage { position:relative; top:auto; height:auto; display:block; padding:20px 7vw 42px; border:0; overflow:visible; }.dumpling-stage .dumpling-video, .loom-meter { width:min(100%, 720px); margin-inline:auto; }.preview-evidence { margin:0 7vw 72px; }
}

/* Line-by-line reveal (scroll-reveal.js). The wrapper clips the drifting line;
   the vertical padding/negative margin pair gives tight-leading serif glyphs
   room so ascenders and descenders are not cut. nowrap keeps a measured line
   from re-breaking inside itself; the module unsplits on width change. */
.reveal-line { display:inline-block; overflow:hidden; vertical-align:bottom; white-space:nowrap; padding:.14em 0 .2em; margin:-.14em 0 -.2em; max-width:100%; }
.reveal-line-inner { display:inline-block; will-change:transform; }
/* Cards lift on hover so the dealt pile still feels like paper. */
@media (hover:hover) and (min-width:768px) {
  .evidence-card, .product-card { transition:transform .35s ease, box-shadow .35s ease; }
  .evidence-card:hover { transform:translateY(-4px); }
  .product-card:hover { transform:translateY(-4px); box-shadow:18px 18px 0 var(--mist); }
}

/* Language switch. Sits with the status badge so the header keeps one right-hand
   cluster rather than two competing anchors. */
/* The header is a three-column grid; without this the right-hand group starts at
   its column's left edge and collides with the last nav item. */
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.lang-switch button { white-space: nowrap; }
/* The badge repeats what the hero already says, so it is the first thing to go
   when the header runs out of room — order lookup is not. */
@media (max-width: 1400px) { .prototype-tag { display: none; } }
.lang-switch { display: inline-flex; border: 1px solid rgba(29, 41, 35, .28); }
.lang-switch button {
  padding: 6px 12px; border: 0; background: transparent; cursor: pointer;
  font: 11px/1 var(--mono); letter-spacing: .08em; color: inherit;
}
.lang-switch button.is-active { background: var(--ink); color: var(--card); }
.lang-switch button:not(.is-active):hover { background: var(--mist); }
@media (max-width: 767px) {
  .header-right { gap: 8px; }
  .product-menu-toggle, .header-orders, .lang-switch button { min-width:44px; min-height:44px; }
  .lang-switch button { padding: 0; }
}

/* A site that takes money owes the visitor a route to support, their order, and
   the terms — from any page, without hunting. */
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 18px 0 10px; font-size: 13px;
}
.footer-links a { color: inherit; text-underline-offset: 4px; }
.footer-legal { font-size: 12px; opacity: .7; }

/* A product that cannot be bought must not offer a button that looks like it can. */
.card-status { margin: 0 0 10px; font: 700 12px/1.5 var(--mono, monospace); letter-spacing: .04em; opacity: .75; }
.button-disabled {
  display: inline-block; padding: 12px 20px; border: 1px solid currentColor;
  opacity: .45; cursor: not-allowed; font-weight: 700;
}

/* Returning customers look for their order more often than they re-read the
   story, and the footer link is a long scroll from where they land. */
.header-orders {
  color: inherit; font: 600 13px/1 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  white-space: nowrap;
}
.header-orders:hover { color: var(--red, #b6462e); }

@media (max-width: 640px) {
  .site-header { grid-template-columns:minmax(0, 1fr) auto auto; column-gap:4px; padding:0 8px; }
  .brand { min-width:0; gap:8px; }
  .brand-tagline, .brand-domain { display:none; }
  .site-header nav { gap:0; }
  .product-menu-toggle { min-width:48px; padding:0; font-size:10px; letter-spacing:0; }
  .header-right { min-width:0; gap:4px; }
  .header-orders { width:44px; padding:0; font-size:0; text-decoration:none; }
  .header-orders::after { content:"訂單"; font:600 11px/1 var(--sans); }
  html[lang="en"] .header-orders::after { content:"Order"; }
  .lang-switch button { width:44px; }
}