:root { --cream:#f4efe3; --ink:#1e2b21; --green:#224a35; --acid:#d8f03f; --orange:#e36732; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; text-decoration:none; }
.nav { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid rgba(30,43,33,.22); position:relative; z-index:4; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:900; letter-spacing:.09em; }.brand-mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--acid); font-family:Georgia,serif; font-size:27px; font-style:italic; }.brand small { display:block; margin-top:3px; font-size:9px; letter-spacing:.18em; font-weight:600; }
nav { display:flex; gap:38px; font-size:13px; font-weight:700; } nav a:hover { opacity:.55; }.lang { width:43px; height:43px; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; font-weight:800; }
.hero { min-height:calc(100vh - 92px); display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; }.hero-copy { padding:9vh 5vw 8vh; display:flex; flex-direction:column; align-items:flex-start; position:relative; z-index:2; }.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:900; margin:0 0 28px; }h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(54px,7vw,108px); line-height:.95; letter-spacing:-.055em; margin:0; font-weight:500; }.lead { max-width:600px; font-size:18px; line-height:1.8; margin:34px 0 42px; }.primary { display:inline-flex; align-items:center; gap:32px; background:var(--green); color:white; padding:18px 21px 18px 27px; font-size:12px; font-weight:900; letter-spacing:.09em; }.primary span { background:var(--acid); color:var(--ink); width:31px; height:31px; display:grid; place-items:center; border-radius:50%; font-size:18px; }
.hero-art { position:relative; min-height:650px; background:var(--orange); overflow:hidden; }.sun { position:absolute; width:82%; aspect-ratio:1; border-radius:50%; background:var(--acid); right:-16%; top:-10%; }.plate { position:absolute; width:min(38vw,540px); aspect-ratio:1; border-radius:50%; background:#faf7ec; left:8%; top:18%; box-shadow:0 35px 70px rgba(62,22,6,.28),inset 0 0 0 24px #ece4d0; transform:rotate(-8deg); }.rice { position:absolute; width:43%; height:42%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 2px,#e8ddc8 3px 5px,#fff 6px); left:13%; top:15%; }.greens { position:absolute; width:42%; height:33%; background:repeating-radial-gradient(ellipse at center,#5b7f35 0 7px,#244e32 8px 15px); right:12%; top:20%; border-radius:48% 52% 40% 60%; }.carrot { position:absolute; width:34%; height:25%; background:repeating-linear-gradient(65deg,#e37332 0 12px,#f2a03d 13px 20px); left:18%; bottom:15%; border-radius:55%; }.protein { position:absolute; width:34%; height:29%; right:14%; bottom:15%; border-radius:50%; background:repeating-linear-gradient(-25deg,#9c5531 0 8px,#bf7245 9px 17px); }.leaf { position:absolute; width:88px; height:180px; background:var(--green); border-radius:100% 0 100% 0; z-index:2; }.leaf-a { left:1%; bottom:3%; transform:rotate(-22deg); }.leaf-b { right:3%; bottom:1%; transform:scale(.7) rotate(40deg); }.stamp { position:absolute; right:5%; bottom:7%; width:110px; height:110px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; text-align:center; font-size:14px; line-height:1.15; font-weight:900; transform:rotate(8deg); }
.marquee { overflow:hidden; background:var(--green); color:var(--acid); padding:19px 0; white-space:nowrap; font-weight:900; font-size:15px; letter-spacing:.12em; }.marquee span { display:block; width:max-content; animation:drift 22s linear infinite; }@keyframes drift { to { transform:translateX(-40%); } }
.story { padding:130px 5vw; display:grid; grid-template-columns:80px 1.2fr .8fr; gap:4vw; border-bottom:1px solid rgba(30,43,33,.22); }.section-no { font-family:Georgia,serif; font-size:15px; }.kicker { font-size:11px; font-weight:900; letter-spacing:.18em; margin:0 0 25px; }.story h2,.value-intro h2,.promise h2,.visit h2 { white-space:pre-line; font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.045em; line-height:1.02; margin:0; }.story h2 { font-size:clamp(45px,5vw,78px); }.story h2 em { color:var(--orange); font-weight:500; }.story-copy { padding-top:38px; }.story-copy p { font-size:16px; line-height:1.9; margin:0 0 22px; }.story-copy a { display:inline-block; border-bottom:1px solid; margin-top:12px; padding-bottom:6px; font-size:12px; font-weight:900; letter-spacing:.08em; }
.values { display:grid; grid-template-columns:1.2fr repeat(3,1fr); }.value-intro { padding:80px 5vw; background:var(--green); color:white; min-height:510px; }.value-intro h2 { font-size:clamp(44px,4.2vw,68px); }.value-card { min-height:510px; padding:30px; display:flex; flex-direction:column; border-left:1px solid rgba(30,43,33,.25); }.value-card>span { font-size:11px; font-weight:900; }.value-card h3 { font-family:Georgia,serif; font-size:26px; margin:auto 0 10px; }.value-card p { font-size:14px; line-height:1.7; margin:0; }.lime { background:var(--acid); }.orange { background:var(--orange); }.cream { background:var(--cream); }.mini-illustration { width:120px; height:120px; margin:66px auto 20px; position:relative; }.grain:before { content:""; position:absolute; width:78px; height:78px; border:3px solid var(--ink); border-radius:50%; left:20px; top:20px; box-shadow:inset 0 0 0 13px var(--acid),inset 0 0 0 16px var(--ink); }.grain:after { content:"×"; position:absolute; font:50px/1 Arial; left:43px; top:34px; }.bowl { border-radius:0 0 60px 60px; background:var(--cream); top:24px; height:62px; box-shadow:inset 0 -12px #edc59a; }.bowl:before { content:""; position:absolute; width:100%; height:16px; background:var(--green); border-radius:50%; top:-8px; }.bowl:after { content:"✦"; position:absolute; font-size:42px; color:var(--acid); left:38px; top:-50px; }.leaf-icon { background:var(--green); border-radius:100% 0 100% 0; transform:rotate(-15deg); }.leaf-icon:after { content:""; position:absolute; width:3px; height:130px; background:var(--cream); left:60px; top:7px; transform:rotate(42deg); transform-origin:bottom; }
.promise { display:grid; grid-template-columns:1fr 1fr; min-height:760px; }.promise-art { background:var(--acid); position:relative; display:grid; place-items:center; overflow:hidden; }.big-t { font:italic 500 min(42vw,560px)/1 Georgia,serif; color:var(--green); transform:rotate(-8deg); }.promise-seal { position:absolute; left:9%; bottom:9%; width:110px; height:110px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; text-align:center; font-size:13px; font-weight:900; transform:rotate(-10deg); }.promise-copy { padding:110px 7vw; background:#fffaf0; }.promise h2 { font-size:clamp(45px,4.5vw,72px); }.promise ul { list-style:none; padding:0; margin:65px 0 28px; }.promise li { border-top:1px solid rgba(30,43,33,.3); padding:20px 0; display:grid; grid-template-columns:150px 1fr; gap:20px; }.promise li b { font-size:15px; }.promise li span { font-size:14px; line-height:1.5; }.note { font-size:11px; line-height:1.7; opacity:.62; }
.visit { text-align:center; padding:130px 24px 140px; color:white; background:var(--orange); }.visit h2 { font-size:clamp(52px,7vw,105px); margin-bottom:48px; }.inverse { background:var(--cream); color:var(--ink); }.inverse span { background:var(--green); color:white; }footer { background:var(--green); color:white; padding:48px 5vw; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }footer p,footer>a:last-child { font-size:11px; letter-spacing:.08em; }.footer-brand .brand-mark { background:var(--acid); color:var(--green); }
@media (max-width:800px) { .nav { height:76px; padding:0 20px; } nav { display:none; } .brand { font-size:16px; }.brand-mark { width:38px; height:38px; }.hero { grid-template-columns:1fr; } .hero-copy { padding:70px 24px 64px; } h1 { font-size:56px; } .lead { font-size:16px; } .hero-art { min-height:500px; } .plate { width:78vw; left:8%; top:12%; }.stamp { width:86px; height:86px; font-size:11px; }.story { padding:85px 24px; display:block; }.section-no { margin-bottom:55px; }.story h2 { font-size:47px; }.story-copy { padding-top:42px; }.values { grid-template-columns:1fr; }.value-intro,.value-card { min-height:430px; }.value-intro { padding:70px 24px; }.value-card { border-left:0; border-top:1px solid rgba(30,43,33,.25); }.promise { grid-template-columns:1fr; }.promise-art { min-height:480px; }.big-t { font-size:94vw; }.promise-copy { padding:85px 24px; }.promise h2 { font-size:46px; }.promise li { grid-template-columns:110px 1fr; }.visit { padding:95px 20px 105px; }.visit h2 { font-size:52px; }footer { align-items:flex-start; flex-direction:column; }.marquee span { animation-duration:15s; } }

/* Official Tonhooa visual identity */
:root { --cream:#f7f4ec; --ink:#1e2a22; --green:#536b3c; --acid:#aab56a; --orange:#8c4b3d; }
.brand { gap:0; font-size:0; letter-spacing:0; }
.brand img { display:block; width:178px; height:auto; }
.eyebrow,.kicker { color:var(--green); }
.hero { grid-template-columns:1.02fr .98fr; }
.hero-art { position:relative; background:#dfe3c9; }
.hero-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(24,35,25,.42)); }
.hero-art .stamp { right:6%; top:7%; bottom:auto; width:112px; height:112px; background:rgba(247,244,236,.9); border:1px solid var(--green); color:var(--green); line-height:1.25; letter-spacing:.08em; z-index:2; }
.photo-caption { position:absolute; left:5%; bottom:5%; color:white; z-index:2; font-size:10px; letter-spacing:.16em; font-weight:800; }
.primary span { background:#e4e8c9; }
.marquee { color:#e7ead5; }
.story h2 em { color:var(--green); }
.story-photo { grid-column:2/4; margin:60px 0 0; display:grid; grid-template-columns:1fr 180px; gap:18px; align-items:end; }
.story-photo img { width:100%; height:500px; object-fit:cover; }
.story-photo figcaption { font-size:11px; line-height:1.6; letter-spacing:.08em; }
.lime { background:#cbd4a3; }.orange { background:#d7bea9; }
.promise-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promise-seal { background:rgba(247,244,236,.88); border:1px solid var(--green); color:var(--green); z-index:2; }
.visit { position:relative; isolation:isolate; overflow:hidden; background:var(--green); }
.visit-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.visit:after { content:""; position:absolute; inset:0; background:rgba(25,38,27,.62); z-index:-1; }
.visit .kicker { color:#e7ead5; }
footer { background:#e7ead5; color:var(--ink); }
.footer-brand img { width:165px; }
.value-card { position:relative; isolation:isolate; overflow:hidden; }
.value-card:before { content:""; position:absolute; z-index:-1; width:210px; height:210px; border:1px solid rgba(30,43,33,.28); border-radius:50%; top:78px; right:-78px; }
.value-card>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; }
.value-image { display:block; width:min(100%,250px); height:auto; aspect-ratio:1; margin:38px auto 34px; object-fit:cover; object-position:center; background:#f7f4ec; border:9px solid rgba(247,244,236,.94); border-radius:50%; box-shadow:13px 14px 0 rgba(30,43,33,.14),0 20px 38px rgba(30,43,33,.13); filter:saturate(.92) contrast(.98); }
.value-card:nth-child(3) .value-image { box-shadow:-12px 15px 0 rgba(83,107,60,.2),0 20px 38px rgba(30,43,33,.13); }
.value-card:nth-child(4) .value-image { box-shadow:14px 10px 0 rgba(140,75,61,.15),0 20px 38px rgba(30,43,33,.13); }
.value-card h3 { position:relative; }
.value-card h3:after { content:""; display:block; width:46px; height:2px; margin-top:13px; background:currentColor; opacity:.7; }
.audience,.faq { padding:110px 6vw; border-top:1px solid rgba(30,43,33,.2); }
.audience { background:#e7ead5; }
.audience>h2,.faq>h2 { white-space:pre-line; max-width:980px; margin:0; font:500 clamp(42px,5vw,76px)/1.04 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:62px; background:rgba(30,43,33,.22); border:1px solid rgba(30,43,33,.22); }
.audience-grid article { min-height:260px; padding:30px; background:#e7ead5; }
.audience-grid span { display:grid; place-items:center; width:34px; height:34px; margin-bottom:56px; border:1px solid currentColor; border-radius:50%; font-size:11px; font-weight:900; }
.audience-grid h3,.faq-list h3 { margin:0 0 14px; font:500 24px/1.25 Georgia,"Times New Roman",serif; }
.audience-grid p,.faq-list p { margin:0; font-size:14px; line-height:1.75; }
.faq { background:#f7f4ec; }
.faq-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:62px; }
.faq-list article { padding:28px 0 34px; border-top:1px solid rgba(30,43,33,.35); }
.faq-list article:last-child { grid-column:1/3; max-width:calc(50% - 28px); }
@media (max-width:800px) { .brand img { width:145px; }.story-photo { display:block; margin-top:45px; }.story-photo img { height:330px; }.story-photo figcaption { margin-top:12px; }.hero-art .stamp { width:86px; height:86px; }.footer-brand img { width:150px; } }
@media (max-width:800px) { .value-card { min-height:620px; padding:30px 30px 38px; }.value-card:before { width:260px; height:260px; top:105px; right:-95px; }.value-image { width:min(78vw,320px); aspect-ratio:1; margin:46px auto 42px; object-position:center; } }
@media (max-width:800px) { .audience,.faq { padding:82px 24px; }.audience-grid,.faq-list { grid-template-columns:1fr; }.audience-grid article { min-height:auto; }.audience-grid span { margin-bottom:36px; }.faq-list article:last-child { grid-column:auto; max-width:none; } }

[data-en]{display:none!important} html.en [data-zh]{display:none!important} html.en [data-en]{display:initial!important}
html.en h1 [data-en],html.en h2 [data-en]{display:inline}
.primary>span{background:none;color:inherit;width:auto;height:auto;display:inline;border-radius:0;font-size:inherit}.primary>b{background:#e4e8c9;color:var(--ink);width:31px;height:31px;display:grid;place-items:center;border-radius:50%;font-size:18px}
.facts,.faq{padding:110px 8vw;background:#f7f4ec;border-top:1px solid rgba(30,43,33,.18)}.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(30,43,33,.18);margin-top:45px}.fact{background:#f7f4ec;padding:32px;min-height:190px}.fact b{display:block;font:500 24px/1.2 Georgia,serif;margin-bottom:18px}.fact p,.faq p{font-size:14px;line-height:1.8}.faq{background:#e7ead5}.faq h2,.facts h2{font:500 clamp(42px,5vw,72px)/1.05 Georgia,serif;margin:0}.faq-list{margin-top:45px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.faq article{border-top:1px solid var(--green);padding-top:22px}.faq h3{font:500 22px/1.35 Georgia,serif}@media(max-width:800px){.facts,.faq{padding:80px 24px}.facts-grid,.faq-list{grid-template-columns:1fr}.fact{min-height:auto}}