:root {
  --leaf: #425f32;
  --leaf-soft: #e5edcf;
  --paper: #fffdf4;
  --line: #dedfcf;
}

body { background-color: var(--paper); }
.site-header { background: rgba(255,253,244,.97); }
.hero .eyebrow, .section-heading .eyebrow { color: var(--leaf); }
.hero-description { max-width: 390px; }
.nature-flavours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.nature-flavours span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #c4d0b7;
  color: var(--leaf);
  border-radius: 25px;
  background: #f5f6e9;
  font-size: 9px;
  line-height: 1.6;
  font-weight: 600;
}
.nature-flavours span::before { content: ''; width: 5px; height: 8px; background: var(--leaf); border-radius: 80% 0 80% 0; transform: rotate(-15deg); }
.hero-buttons { margin-top: 25px; }
.button-dark { background: var(--leaf); border-color: var(--leaf); }
.button-dark:hover { background: #2c4423; }
.citrus-orbit { background: var(--leaf-soft); width: 96%; height: 82%; left: 0; top: 11%; opacity: 1; transform: rotate(-11deg); }
.citrus-orbit::after { border-color: #b5c4a5; }
.hero-product.nature-frame {
  left: 18%;
  top: 0;
  height: 96%;
  width: auto;
  max-width: 86%;
  aspect-ratio: 1122 / 1402;
  transform: rotate(2deg);
  border: 1px solid #6f7c5c;
  border-radius: 48% 48% 9px 9px / 34% 34% 9px 9px;
  overflow: hidden;
  box-shadow: 10px 12px 0 #d8e4be;
}
.nature-frame .hero-cup { width: 100%; height: 100%; object-fit: cover; }
.nature-frame .hero-cup-logo { width: 18%; left: 53.5%; top: 56.5%; transform: translate(-50%,-50%); }
.hero-seal { top: -1%; right: -1%; }
.hero-mot { left: -2%; bottom: 4%; width: 28%; }
.mot-speech { border-color: var(--leaf); }
.hero-art-caption { left: 30%; bottom: -5%; color: var(--leaf); font-size: 7px; letter-spacing: .1em; }
.hero-art-caption .caption-line { background: var(--leaf); }
.hero::before { opacity: .09; }
.product-visual { border-color: #d6d9c9; }
.product-info { border-color: #cfd4c3; }
.product-series { color: var(--leaf); }
.product-note { color: #687360; }
.product-filters button[aria-pressed=true] { background: var(--leaf); border-color: var(--leaf); }
.product-arrow { border-color: #8c9d7b; color: var(--leaf); }

.story { background: #b5e2ee; }
.story-copy .eyebrow, .story-details .detail-number { color: var(--leaf); }
.story-intro, .story-details p { color: #344c3d; }
.story-details, .story-details li { border-color: rgba(66,95,50,.25); }
.story-visual.story-nature { min-height: 640px; }
.nature-story-word {
  position: absolute;
  left: -2%;
  top: -3%;
  font: 700 clamp(72px,7.8vw,120px)/1.12 var(--display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(66,95,50,.32);
  letter-spacing: -.025em;
  z-index: -1;
}
.nature-paper-card {
  position: absolute;
  left: 10%;
  right: 0;
  top: 10%;
  padding: 27px 23px 30px;
  background: var(--paper);
  border: 1px solid #8a987c;
  border-radius: 9px;
  transform: rotate(-4deg);
  box-shadow: 8px 8px 0 rgba(66,95,50,.15);
}
.nature-paper-card > .eyebrow { font-size: 8px; line-height: 1.7; letter-spacing: .1em; color: var(--leaf); text-align: center; }
.nature-paper-card .story-mot-image { position: static; width: 83%; height: auto; margin: 25px auto 0; transform: none; }
.nature-paper-card .story-mot-note { position: static; width: fit-content; margin: 22px auto 0; font-size: 12px; padding: 10px 14px; box-shadow: 3px 3px 0 var(--lemon); border-color: var(--leaf); }
.nature-photo-caption { position: absolute; left: 12%; bottom: 1%; font-size: 11px; color: var(--leaf); transform: rotate(-3deg); max-width: 42ch; }
.nature-visual-note { max-width: none; margin: 0; background: #b5e2ee; padding: 0 var(--gutter) 25px; font-size: 9px; line-height: 1.7; color: #526747; }
.mot-section::after { color: var(--leaf); opacity: .12; }
.mot-stage::before { background: var(--paper); }
.mot-traits { border-color: rgba(66,95,50,.3); }
.mot-traits > div > span { color: var(--leaf); }
.mot-mood-buttons button { background: var(--paper); }
.mot-mood-buttons button[aria-pressed=true] { background: var(--leaf); border-color: var(--leaf); }
.address-card { border-color: #829271; box-shadow: 6px 6px 0 var(--leaf-soft); }
.phone-link { display: flex; flex-direction: column; gap: 1px; }
.phone-link > span { font-size: 8px; text-transform: uppercase; letter-spacing: .13em; color: var(--leaf); }
.phone-link > strong { font-size: 13px; font-weight: 600; }
.cooperate::after { opacity: .1; }
.contact-dialog input, .contact-dialog textarea { border-color: #a8b59a; }
.draft-ready { background: #e5edcf; }
.footer-column a[href^="tel:"] { color: var(--lemon); }

@media (min-width:1600px) {
  .hero-product.nature-frame { top: 0; left: 17%; }
  .story-visual.story-nature { min-height: 720px; }
  .nature-paper-card { top: 12%; }
}
@media (max-width:1100px) {
  .hero-product.nature-frame { left: 17%; height: 94%; max-width: 86%; }
  .hero-art-caption { left: 27%; font-size: 5.5px; }
  .hero-mot { width: 29%; left: -4%; bottom: 3%; }
  .nature-flavours { gap: 6px; }
  .nature-flavours span { font-size: 8px; padding: 5px 8px; }
  .story-visual.story-nature { min-height: 560px; }
  .nature-paper-card { left: 1%; right: -3%; top: 13%; padding: 23px 17px 25px; }
  .nature-paper-card .story-mot-note { font-size: 10px; }
  .nature-photo-caption { left: 2%; font-size: 10px; }
}
@media (max-width:900px) {
  .hero-product.nature-frame { height: 98%; left: 15%; max-width: 90%; }
  .hero-art { height: 51vw; }
  .hero-mot { width: 34%; left: -9%; bottom: -9%; }
  .hero-seal { top: -7%; }
  .hero-art-caption { bottom: -21%; left: 13%; font-size: 5px; }
  .hero-description { max-width: 290px; }
  .nature-flavours span { font-size: 7px; padding: 5px 7px; }
  .story-visual.story-nature { min-height: 520px; }
  .nature-paper-card { padding: 22px 16px; top: 17%; left: -1%; right: -4%; }
  .nature-paper-card > .eyebrow { font-size: 6px; }
  .nature-paper-card .story-mot-image { width: 87%; }
  .nature-paper-card .story-mot-note { font-size: 9px; padding: 10px; }
  .nature-photo-caption { bottom: 1%; font-size: 9px; }
}
@media (max-width:600px) {
  .hero-description { max-width: 34ch; }
  .nature-flavours { margin-top: 16px; gap: 6px; }
  .nature-flavours span { padding: 6px 9px; font-size: 8px; }
  .hero-buttons { margin-top: 20px; }
  .hero-art { height: 111vw; max-height: 570px; margin-top: 43px; }
  .hero-product.nature-frame { left: 14%; top: 0; height: 94%; max-width: 88%; border-radius: 48% 48% 7px 7px / 32% 32% 7px 7px; box-shadow: 6px 7px 0 #d8e4be; }
  .citrus-orbit { width: 96%; height: 82%; top: 9%; left: 0; }
  .hero-mot { left: -2%; bottom: 3%; width: 28%; }
  .hero-seal { top: -2%; right: 1%; }
  .hero-art-caption { left: 19%; bottom: -1%; font-size: 5px; letter-spacing: .06em; gap: 5px; }
  .hero-art-caption .caption-line { width: 11px; }
  .art-spark-one { top: 7%; left: 0; }
  .art-spark-two { bottom: 7%; right: 0; }
  .hero::before { height: 95px; bottom: 48px; }
  .product-visual .product-logo { width: 20%; }
  .story-visual.story-nature { min-height: 125vw; max-height: 700px; }
  .nature-story-word { left: 0; top: -2%; font-size: 22vw; }
  .nature-paper-card { left: 6%; right: 2%; top: 13%; padding: 25px 18px 26px; }
  .nature-paper-card > .eyebrow { font-size: 7px; }
  .nature-paper-card .story-mot-image { width: 83%; margin-top: 20px; }
  .nature-paper-card .story-mot-note { font-size: 10px; padding: 11px 13px; margin-top: 21px; }
  .nature-photo-caption { left: 8%; bottom: 0; max-width: 34ch; font-size: 10px; }
  .nature-visual-note { font-size: 8px; padding-bottom: 22px; }
  .phone-link > span { font-size: 8px; }
  .phone-link > strong { font-size: 13px; }
  .address-card { box-shadow: 5px 5px 0 var(--leaf-soft); }
}
@media (max-width:360px) {
  .hero-art { height: 115vw; }
  .nature-flavours span { font-size: 7px; padding: 6px 8px; }
  .hero-art-caption { font-size: 4.5px; left: 15%; }
  .nature-paper-card { top: 14%; padding: 21px 14px 24px; }
  .nature-paper-card > .eyebrow { font-size: 6px; }
  .nature-paper-card .story-mot-note { font-size: 9px; padding: 10px; }
  .nature-photo-caption { font-size: 9px; max-width: 33ch; }
}

/* Larger fruit tea, with one calm natural language throughout the site. */
.hero-product.nature-frame { height: 99%; left: 16%; }
.nature-photo-scene { width: 100%; height: 100%; position: relative; transform: scale(1.38); transform-origin: 53% 45%; }
.product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 32px; }
.product-visual { aspect-ratio: 1122 / 1402; }
.product-info h3 { font-size: 25px; }
.product-info { padding: 23px 0 21px; }
.product-series { font-size: 9px; }
.product-scene { position: absolute; inset: 0; transform: scale(1.16); transform-origin: 53% 35%; transition: transform .5s ease; }
.product-scene .product-logo { left: 53.5%; top: 56.5%; width: 18%; transform: translate(-50%,-50%); }
.product-visual--jasmine .product-scene .product-logo { left: 53.5%; top: 57%; }
.product-visual--berry .product-scene .product-logo { left: 53.3%; top: 56%; }
.product-visual--milk .product-scene .product-logo { left: 54.3%; top: 57%; }
.product-visual--lychee .product-scene .product-logo { left: 54.3%; top: 56%; }
.product-visual--passion .product-scene .product-logo { left: 53.8%; top: 56.5%; }
.product-open:hover .product-scene { transform: scale(1.2); }
.product-open:hover .product-image { transform: none; }
.product-open:hover .product-logo { transform: translate(-50%,-50%); }
.detail-visual .product-scene { transform: scale(1.13); }
#product-detail { grid-template-columns: 1.2fr 1fr; }
.mot-stage-fruits { position: absolute; right: -3%; bottom: 15%; width: 35%; height: auto; z-index: 1; pointer-events: none; }
#mot-character { z-index: 2; }
.mot-stage-caption { z-index: 3; }
.address-card-top { min-height: 96px; margin-bottom: 22px; gap: 25px; }
.address-card-top .address-fruit-mark { width: 165px; height: 110px; object-fit: contain; flex-shrink: 0; }
.cooperate-action-row { display: flex; align-items: center; gap: 15px; margin-top: 24px; }
.cooperate-action-row .button { margin-top: 0; flex-shrink: 0; }
.cooperate-action-row > img { width: 155px; height: auto; max-width: 38%; }
.privacy-nature-banner { display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: 30px; padding: 12px 30px; min-height: 135px; border: 1px solid #bac6ab; border-radius: 12px; background: #f0f4df; }
.privacy-nature-banner > span { font: 700 27px/1.3 var(--display); max-width: 10ch; color: var(--leaf); }
.privacy-nature-banner > img { width: 235px; height: 140px; object-fit: contain; }
.privacy-main h2 { color: var(--leaf); }
.privacy-main p a { color: var(--leaf); }
.contact-dialog { background: var(--paper); }
.contact-direct { border-color: #bdc9af; }

@media(max-width:1100px) {
  .hero-product.nature-frame { height: 97%; left: 15%; }
  .product-info h3 { font-size: 22px; }
  .cooperate-action-row { gap: 12px; }
  .cooperate-action-row > img { width: 125px; max-width: 31%; }
  .address-card-top .address-fruit-mark { width: 140px; height: 94px; }
}
@media(max-width:900px) {
  .hero-product.nature-frame { height: 100%; left: 14%; }
  .product-grid { gap: 32px 22px; }
  .product-info h3 { font-size: 21px; }
  .product-series { font-size: 8px; }
  .cooperate-action-row { flex-wrap: wrap; }
  .cooperate-action-row > img { width: 140px; max-width: 42%; }
  .address-card-top .address-fruit-mark { width: 115px; height: 80px; }
  .address-card-top { min-height: 80px; gap: 10px; }
}
@media(max-width:600px) {
  .hero { display: flex; flex-direction: column; gap: 0; }
  .hero-content { display: contents; }
  .hero-content > .eyebrow { order: 0; }
  .hero-content > h1 { order: 1; }
  .hero-art { order: 2; width: 100%; height: 110vw; max-height: 530px; margin-top: 27px; margin-bottom: 31px; }
  .hero-description { order: 3; margin-top: 0; max-width: 35ch; }
  .nature-flavours { order: 4; margin-top: 15px; }
  .hero-buttons { order: 5; margin-top: 22px; }
  .hero-product.nature-frame { left: 10%; height: 96%; max-width: 89%; }
  .nature-photo-scene { transform: scale(1.38); }
  .hero-mot { left: -1%; bottom: 4%; width: 28%; }
  .hero-seal { top: -1%; right: 1%; }
  .hero-art-caption { bottom: -3%; left: 15%; font-size: 4.8px; }
  .product-grid { grid-template-columns: 1fr; gap: 34px; }
  .product-visual { aspect-ratio: 1122 / 1402; }
  .product-info h3 { font-size: 23px; min-height: 0; }
  .product-info { padding: 19px 0 20px; align-items: center; }
  .product-series { font-size: 9px; }
  .product-arrow { width: 34px; height: 34px; font-size: 21px; margin-top: 0; }
  .product-visual .product-logo { width: 18%; }
  #product-detail { grid-template-columns: 1fr; }
  .mot-stage-fruits { width: 33%; right: -1%; bottom: 16%; }
  .address-card-top .address-fruit-mark { width: 135px; height: 90px; }
  .address-card-top { min-height: 90px; margin-bottom: 21px; }
  .cooperate-action-row { flex-wrap: nowrap; gap: 10px; }
  .cooperate-action-row > img { width: 110px; max-width: 33%; }
  .cooperate-action-row .button { padding-left: 15px; padding-right: 15px; font-size: 10px; gap: 15px; }
  .privacy-nature-banner { padding: 12px 16px; gap: 10px; min-height: 112px; }
  .privacy-nature-banner > span { font-size: 21px; }
  .privacy-nature-banner > img { width: 145px; height: 100px; max-width: 55%; }
}
@media(max-width:360px) {
  .hero-art { height: 115vw; }
  html[lang=en] .hero h1 { font-size: 42px; }
  .hero-art-caption { font-size: 4.3px; left: 12%; }
  .product-info h3 { font-size: 21px; }
  .address-card-top .address-fruit-mark { width: 115px; height: 80px; }
  .cooperate-action-row .button { font-size: 9px; gap: 11px; padding: 12px; }
  .cooperate-action-row > img { width: 100px; }
  .privacy-nature-banner > span { font-size: 18px; }
}