/* ==========================================================================
  Ki Vibration Matcha — Design System
  Palette: washi paper, vibrant matcha green, butterfly-pea blue,
            brushed gold. Signature motif: the enso (円相) circle.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

:root{
  --ink:        #17240F;
  --ink-soft:   #3A4A31;
  --matcha:     #5C8A34;
  --matcha-deep:#2F4A1E;
  --matcha-bright:#9CCB3B;
  --matcha-foam:#E7EFD6;
  --washi:      #F7F4E9;
  --washi-deep: #EFE9D6;
  --paper-line: rgba(23,36,15,0.10);
  --butterfly:  #4A4FA0;
  --butterfly-soft:#EDEBFA;
  --gold:       #AD8A3F;
  --white:      #FFFEFB;

  --font-display: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-body: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;

  --max-w: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--washi);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,36,15,0.045) 1px, transparent 0);
  background-size:22px 22px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--matcha-deep);
  font-weight:600;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--deep{ background:var(--matcha-deep); color:var(--matcha-foam); }
.section--deep h1,.section--deep h2,.section--deep h3{ color:var(--white); }
.section--washi-deep{ background:var(--washi-deep); }
.promise-section{
  position:relative; isolation:isolate; overflow:hidden;
  padding-top:72px;
  padding-bottom:64px;
}
.promise-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.promise-section > .wrap{
  position:relative;
  z-index:1;
}
.promise-glow{ position:absolute; border-radius:50%; filter:blur(8px); pointer-events:none; z-index:0; }
.promise-glow--one{ width:360px; height:360px; left:-210px; top:18%; background:rgba(156,203,59,.08); }
.promise-glow--two{ width:420px; height:420px; right:-260px; bottom:4%; background:rgba(255,255,255,.035); }
.promise-intro{ margin:0 auto 42px; text-align:center; position:relative; z-index:1; }
.promise-intro h2{ letter-spacing:-.015em; }
.promise-intro .lede{ margin:0 auto; font-size:1.03rem; }
.promise-eyebrow{ display:flex; justify-content:center; align-items:center; gap:12px; margin:0 0 14px; font-size:.67rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
.promise-eyebrow span{ width:32px; height:1px; }
.promise-orbit{ gap:28px; position:relative; }
.promise-side{ display:flex; flex-direction:column; position:relative; }
.promise-side--left::after,.promise-side--right::before{ content:""; position:absolute; top:50%; width:38px; border-top:1px solid rgba(156,203,59,.34); pointer-events:none; }
.promise-side--left::after{ right:-28px; }
.promise-side--right::before{ left:-28px; }
.promise-node{ position:relative; }
.promise-node-button{ width:100%; align-items:center; text-align:left; cursor:pointer; font:inherit; }
.promise-node-button:focus-visible{ outline:2px solid var(--matcha-bright); outline-offset:4px; }
.promise-node-number{ border-radius:50%; display:grid; place-items:center; font-weight:700; letter-spacing:.08em; flex:none; }
.promise-node-copy{ min-width:0; display:block; }
.promise-node-copy strong{ display:block; font-family:var(--font-display); font-weight:600; }
.promise-node-copy small{ display:block; text-transform:uppercase; transition:color .25s ease; }
.promise-node-arrow{ border:1px solid rgba(255,255,255,.3); border-radius:50%; display:grid; place-items:center; font-size:1rem; transition:transform .3s ease,background .3s ease,color .3s ease; }
.promise-node-button:hover .promise-node-arrow{ transform:rotate(12deg); }
.promise-center{ min-height:360px; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.promise-enso-ring{ position:absolute; width:290px; height:290px; border:1px solid rgba(156,203,59,.2); border-radius:50%; }
.promise-enso-ring::before{ content:""; position:absolute; inset:22px; border:1px dashed rgba(255,255,255,.13); border-radius:50%; }
.promise-bowl{ width:220px; height:220px; border-radius:50%; overflow:hidden; position:relative; border:8px solid rgba(247,244,233,.85); box-shadow:0 28px 55px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.16); background:var(--matcha-foam); }
.promise-bowl::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%,transparent 30%,rgba(10,25,7,.25) 100%); pointer-events:none; }
.promise-bowl img{ width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.9) contrast(.95); }
.promise-bowl-label{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; align-content:center; text-align:center; color:var(--white); font-family:var(--font-display); font-size:1.25rem; line-height:.95; text-shadow:0 2px 10px rgba(0,0,0,.45); letter-spacing:.08em; }
.promise-bowl-label em{ font-size:.8rem; letter-spacing:.12em; }
.promise-center-note{ margin-top:18px; color:rgba(255,255,255,.55); font-size:.61rem; letter-spacing:.28em; text-transform:uppercase; }
.promise-footer{ margin:42px auto 0; text-align:center; }
.promise-footer-mark{ display:block; border-radius:50%; line-height:24px; }
.promise-footer p{ margin:0; font-family:var(--font-display); }
.promise-source{ display:none; }
.promise-modal[hidden]{ display:none; }
.promise-modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; }
.promise-modal-backdrop{ position:absolute; inset:0; backdrop-filter:blur(8px); animation:promise-fade-in .22s ease both; }
.promise-modal-card{ position:relative; width:min(680px,100%); max-height:min(78vh,720px); overflow:auto; padding:48px 48px 46px; border:1px solid rgba(156,203,59,.3); color:var(--ink); animation:promise-modal-in .3s cubic-bezier(.2,.8,.2,1) both; }
.promise-modal-close{ position:absolute; top:16px; right:16px; width:42px; height:42px; border:1px solid rgba(23,36,15,.18); border-radius:50%; background:rgba(255,255,255,.5); color:var(--matcha-deep); font-size:1.5rem; line-height:1; cursor:pointer; transition:transform .25s ease,background .25s ease; }
.promise-modal-close:hover{ transform:rotate(8deg); background:var(--white); }
.promise-modal-close:focus-visible{ outline:2px solid var(--matcha-deep); outline-offset:3px; }
.promise-modal-number{ display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(47,74,30,.28); color:var(--matcha-deep); font-size:.7rem; font-weight:700; letter-spacing:.08em; margin-bottom:20px; }
.promise-modal-card h3{ max-width:16ch; margin:0 0 18px; color:var(--matcha-deep); font-size:clamp(1.8rem,4vw,2.7rem); }
.promise-modal-body{ color:var(--ink-soft); font-size:1rem; line-height:1.78; }
.promise-modal-body p{ margin:0; }
.promise-modal-body p + p{ margin-top:18px; }
.promise-modal-body p:first-child::first-letter{ font-family:var(--font-display); color:var(--matcha-deep); }
.field-finish{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(156,203,59,0.12), transparent 28%),
    linear-gradient(180deg, #f7f2e7 0%, #f4efe5 100%);
  padding:clamp(56px,7vw,96px) 0 clamp(54px,7vw,86px);
  color:var(--ink);
  overflow:hidden;
}

.field-finish::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(23,36,15,0.06) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255,255,255,0.5) 0.7px, transparent 0.7px);
  background-position:0 0, 8px 8px;
  background-size:18px 18px;
  opacity:.18;
  pointer-events:none;
}

.field-finish > *{ position:relative; z-index:1; }

.field-finish-intro{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
}

.field-finish-intro h2{
  margin:0;
  font-size:clamp(2.8rem,4vw,5rem);
  line-height:0.92;
  letter-spacing:-.045em;
  color:var(--ink);
}

.field-finish-intro .lede{
  margin-top:18px;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.7;
}

.field-finish-list{
  display:grid;
  gap:0;
}

.field-step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr);
  align-items:center;
  min-height:620px;
  border-top:1px solid rgba(23,36,15,.08);
  background:rgba(255,255,255,.10);
}

.field-step:nth-child(even){
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.8fr);
}

.field-step-media{
  position:relative;
  height:100%;
  min-height:620px;
  overflow:hidden;
  background:#dfe6d0;
}

.field-step:nth-child(even) .field-step-media{ order:2; }

.field-step:nth-child(even) .field-step-copy{ order:1; }

.field-step-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.08);
}

.field-step-media--land video{
  transform:scale(1.18);
}

.field-step-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,22,15,.04), rgba(13,22,15,.42));
}

.field-step-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:620px;
  padding:38px 0;
}

.field-step-copy-inner{
  max-width:500px;
  padding-left:clamp(24px,4vw,64px);
  padding-right:clamp(24px,4vw,64px);
}

.field-step:nth-child(even) .field-step-copy-inner{
  padding-left:clamp(24px,4vw,64px);
  padding-right:clamp(24px,4vw,64px);
}

.field-step-kicker{
  margin:0 0 12px;
  color:var(--ink);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.field-step-copy h3{
  margin:0 0 12px;
  font-size:clamp(2.1rem,2.4vw,3.4rem);
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--ink);
}

.field-step-copy p{
  margin:0;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.8;
}

.field-step-region{
  margin-top:18px;
  color:var(--ink);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

.field-step-jp{
  margin-top:10px;
  color:var(--matcha-deep);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.08em;
}

.field-finish-closing{
  margin-top:36px;
  text-align:center;
  padding-top:28px;
  border-top:1px solid rgba(23,36,15,.12);
}

.field-finish-closing p{
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(1.8rem,2vw,2.5rem);
  line-height:1;
  letter-spacing:-.04em;
}

.field-finish-closing p + p{
  margin-top:8px;
}

.field-finish-tagline{
  margin-top:12px !important;
  font-size:1rem !important;
  letter-spacing:0 !important;
  font-family:var(--font-body) !important;
  text-transform:none !important;
}

@media (max-width:980px){
  .field-step{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    min-height:auto;
  }

  .field-step:nth-child(even){
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
  }

  .field-step-copy,
  .field-step:nth-child(even) .field-step-copy{
    order:1;
    min-height:auto;
    padding:0;
    width:100%;
  }

  .field-step-media,
  .field-step:nth-child(even) .field-step-media{
    order:2;
    min-height:auto;
    width:100%;
  }

  .field-step-media{
    height:440px;
  }

  .field-step-copy-inner{
    max-width:none;
    padding:26px 20px 32px;
  }
}

@media (max-width:900px){
}

@media (max-width:640px){
  .field-finish-intro h2{ font-size:clamp(2.2rem,11vw,3rem); }
  .field-finish-intro .lede{ font-size:1rem; }
  .field-step-media{ height:320px; }
  .field-step-copy h3{ font-size:1.75rem; }
  .field-step-region{ letter-spacing:.1em; }

  .ki-knowledge{
    padding-top:40px;
  }

  .ki-knowledge__faq summary{
    align-items:flex-start;
  }

  .ki-knowledge__index{
    flex-shrink:0;
  }

  .ki-knowledge__question{
    flex:1 1 auto;
  }

  .ki-knowledge__toggle{
    flex-shrink:0;
  }
}

body.promise-modal-open{ overflow:hidden; }
@keyframes promise-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes promise-modal-in{ from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px; background:var(--gold);
  display:inline-block;
}
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:60ch; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- enso (circle) motif ---------- */
.enso{ display:block; }
.enso path{
  fill:none;
  stroke:currentColor;
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:760;
  stroke-dashoffset:760;
  animation:draw-enso 1.6s cubic-bezier(.4,.1,.2,1) forwards;
}
@keyframes draw-enso{ to{ stroke-dashoffset:0; } }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(247,244,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--paper-line);
}
.nav{
  max-width:var(--max-w); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:36px; height:36px; object-fit:contain; display:block; }
.brand .enso{ width:34px; height:34px; color:var(--matcha-deep); }
.brand .enso path{ animation:none; stroke-dashoffset:0; }
.brand-name{ font-family:var(--font-display); font-size:1.05rem; color:var(--matcha-deep); line-height:1.15; }
.brand-name small{ display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a{
  display:block; padding:10px 14px; font-size:.86rem; font-weight:500;
  color:var(--ink-soft); border-radius:var(--radius); position:relative;
  transition:color .25s ease;
}
.nav-links a:hover{ color:var(--matcha-deep); }
.nav-links a.is-active{ color:var(--matcha-deep); font-weight:700; }
.nav-links a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--matcha-bright);
}
.nav-right{ display:flex; align-items:center; gap:10px; }

.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--white); border:1px solid var(--paper-line); padding:8px 12px;
  border-radius:20px; font-size:.8rem; font-weight:600; color:var(--matcha-deep);
  cursor:pointer;
}
.lang-btn svg{ width:13px; height:13px; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--white); border:1px solid var(--paper-line);
  border-radius:8px; min-width:190px; padding:6px;
  box-shadow:0 12px 28px rgba(23,36,15,0.12);
  display:none; flex-direction:column; gap:2px;
}
.lang-menu.is-open{ display:flex; }
.lang-menu button{
  text-align:left; background:none; border:0; padding:10px 12px; border-radius:6px;
  font-size:.85rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:10px;
}
.lang-menu button:hover{ background:var(--matcha-foam); }
.lang-menu button[aria-disabled="true"]{ color:#b3ac98; cursor:default; }
.lang-menu button[aria-disabled="true"]:hover{ background:none; }
.lang-menu .soon{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); }
.lang-menu button.is-current{ font-weight:700; color:var(--matcha-deep); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:30px; font-size:.86rem; font-weight:700;
  letter-spacing:.02em; border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{ background:var(--matcha-deep); color:var(--white); }
.btn-primary:hover{ background:var(--matcha); transform:translateY(-2px); box-shadow:0 10px 22px rgba(47,74,30,0.25); }
.btn-ghost{ background:transparent; border-color:var(--matcha-deep); color:var(--matcha-deep); }
.btn-ghost:hover{ background:var(--matcha-deep); color:var(--white); }
.btn-on-deep{ border-color:rgba(255,255,255,0.5); color:var(--white); }
.btn-on-deep:hover{ background:var(--white); color:var(--matcha-deep); }

.menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--matcha-deep); margin:5px 0; transition:transform .2s ease, opacity .2s ease; }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100vh - 72px); padding:110px 0 100px;
  display:flex; align-items:center;
  background:var(--matcha-deep);
  color:var(--white);
}
.hero-background{ position:absolute; z-index:-1; inset:0; overflow:hidden; background:rgba(24,45,13,.7); }
.hero-background::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(19,39,10,.9) 0%,rgba(30,58,16,.62) 48%,rgba(19,39,10,.76) 100%); }
.hero-grid{ position:relative; z-index:1; display:block; width:100%; }
.hero h1{ font-size:clamp(2.7rem,5.6vw,4.8rem); max-width:16ch; color:var(--white); line-height:1.08; text-shadow:0 2px 18px rgba(10,25,5,.35); }
.hero .eyebrow{ color:var(--matcha-bright); }
.hero .eyebrow::before{ background:var(--matcha-bright); }
.hero .lede{ font-size:1.2rem; color:rgba(255,255,255,.94); max-width:42ch; text-shadow:0 1px 10px rgba(10,25,5,.35); }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:46px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--matcha-bright); }
.hero-stat span{ font-size:.78rem; color:rgba(255,255,255,.8); letter-spacing:.03em; }
.hero .btn-primary{ background:var(--ink); }
.hero .btn-ghost{ border-color:rgba(255,255,255,.7); color:var(--white); }
.hero .btn-ghost:hover{ background:var(--white); color:var(--matcha-deep); }
.hero-background .hero-carousel-track{ display:flex; height:100%; width:max-content; gap:0; transform:translateX(-50%); animation:hero-scroll 38s linear infinite; }
.hero-background .hero-carousel-track img{ width:clamp(260px,29vw,420px); height:100%; object-fit:cover; flex:0 0 auto; opacity:.78; }
@keyframes hero-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--white); border:1px solid var(--paper-line); border-radius:10px;
  padding:30px; transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(23,36,15,0.09); }
.card .icon-ring{
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--matcha-bright);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--matcha-deep); font-size:1.2rem;
}
.card h3{ font-size:1.08rem; margin-bottom:.4em; }
.card p{ color:var(--white); font-size:.94rem; margin-bottom:0; }

.placecard{
  position:relative; isolation:isolate; overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; align-self: start;
  padding:0; border-color:rgba(255,255,255,.22); color:var(--white); background:var(--matcha-deep);
}
.placecard-toggle{
  position:relative; isolation:isolate; min-height:300px; width:100%; margin:0; padding:30px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  border:0; color:var(--white); text-align:left; cursor:pointer;
  background-color:var(--matcha-deep); background-size:cover; background-position:center;
  box-shadow:inset 0 -100px 100px rgba(8,20,5,.24); font:inherit;
}
.placecard-toggle::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(180deg,rgba(10,27,8,.08) 20%,rgba(10,25,7,.82) 100%);
}
.placecard:nth-child(1) .placecard-toggle{ background-image:url("../placecard images/pla_1.png"); }
.placecard:nth-child(2) .placecard-toggle{ background-image:url("../placecard images/pla_2.png"); }
.placecard:nth-child(3) .placecard-toggle{ background-image:url("../collection_2.png"); }
.placecard:nth-child(4) .placecard-toggle{ background-image:url("../collection_3.png"); }
.placecard .icon-ring{ position:relative; z-index:1; margin-bottom:16px; border-color:rgba(255,255,255,.72); color:var(--white); }
.placecard-title{ position:relative; z-index:1; color:var(--white); text-shadow:0 1px 8px rgba(0,0,0,.45); font-family:var(--font-display); font-size:1.15rem; font-weight:600; line-height:1.25; }
.placecard-chevron{ position:absolute; z-index:1; top:22px; right:22px; width:12px; height:12px; border-right:2px solid var(--white); border-bottom:2px solid var(--white); transform:rotate(45deg); transition:transform .25s ease; }
.placecard-toggle[aria-expanded="true"] .placecard-chevron{ transform:rotate(225deg); }
.placecard-panel{ padding:24px 30px 28px; background:var(--matcha-deep); color:rgba(255,255,255,.9); }
.placecard-panel p{ margin:0; font-size:.94rem; line-height:1.65; }
.placecard-panel .placecard-tagline{ color:var(--matcha-bright); font-family:var(--font-display); margin-bottom:16px; }
.placecard-panel ul{ margin:16px 0 0; padding-left:20px; }
.placecard-panel li{ margin-top:10px; font-size:.94rem; line-height:1.6; }
.placecard-toggle:focus-visible{ outline:3px solid var(--matcha-bright); outline-offset:-6px; }

.origin-showcase{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(146,184,59,0.08), transparent 24%),
    linear-gradient(180deg, #f7f2e7 0%, #f0ead8 100%);
  color:var(--ink);
  overflow:hidden;
  padding:clamp(56px,7vw,96px) 0 clamp(70px,8vw,120px);
}

.origin-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url('../Background/leaf-pattern.png') center/cover no-repeat;
  opacity:0.08;
  pointer-events:none;
}

.origin-showcase__wrap{ position:relative; z-index:1; }

.origin-showcase__intro{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:26px;
  align-items:center;
  margin-bottom:26px;
}

.origin-showcase__copy .eyebrow{
  margin:0 0 12px;
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.16em;
  font-weight:700;
  text-transform:uppercase;
}

.origin-showcase__copy h2{
  margin:0;
  font-size:clamp(3.2rem,5vw,6rem);
  line-height:.9;
  letter-spacing:-.06em;
  color:var(--ink);
}

.origin-showcase__note{
  max-width:64ch;
  margin-top:18px;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.7;
}

.origin-showcase__map{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border-radius:22px;
  background:#e8f1df;
  box-shadow:0 18px 36px rgba(24,33,22,.08);
}

.origin-showcase__map img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.origin-showcase__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.origin-card,
.collection-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(23,36,15,.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(26,33,22,.05);
}

.origin-card__media,
.collection-card__media{
  position:relative;
  height:260px;
  overflow:hidden;
  background:#e8efe0;
}

.origin-card__media img,
.collection-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.origin-card__body,
.collection-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px 22px;
}

.origin-card__body{ min-width:0; }

.origin-card__number,
.collection-card__number{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--matcha-deep);
  margin-bottom:10px;
}

.origin-card__region,
.collection-card__region{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:8px;
}

.origin-card__region span{ display:block; font-size:.65rem; letter-spacing:.12em; color:var(--ink-soft); }

.origin-card h3,
.collection-card h3{
  margin:0 0 10px;
  font-size:clamp(1.6rem,2vw,2.4rem);
  line-height:1.04;
  letter-spacing:-.04em;
  color:var(--ink);
}

.origin-card__name-ja{ display:block; font-size:.92em; line-height:1.2; }
.origin-card__name-en{ display:block; margin-top:3px; font-size:.78em; line-height:1.15; }

.origin-card p,
.collection-card p{
  margin:0;
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.7;
}

.origin-card__meta,
.collection-card__body .pill-row{
  margin-top:18px;
}

.origin-card__meta > span{
  display:block;
  margin-bottom:10px;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:700;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  letter-spacing:.02em;
  font-weight:600;
}

.origin-card__footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(23,36,15,.08);
  color:var(--ink-soft);
  font-size:.67rem;
  line-height:1.5;
}

.origin-card__footer span{ display:inline-block; }

.origin-card__body .cta-button{
  width:100%;
  height:48px;
  min-height:48px;
  margin-top:auto;
  padding:8px 10px;
  font-size:.72rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(180deg, #6f9f3d, #2f4a1e);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 10px 20px rgba(47,74,30,.18);
}

.cta-button--light{
  background:linear-gradient(180deg, #7ba746, #4b7b32);
}

.origin-showcase__collection{
  display:grid;
  grid-template-columns:0.78fr 1.8fr;
  gap:22px;
  margin-top:34px;
  align-items:stretch;
}

.origin-showcase__collection-copy{
  padding:18px 18px 0 0;
}

.origin-showcase__collection-copy .eyebrow{
  margin:0 0 10px;
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.18em;
  font-weight:700;
  text-transform:uppercase;
}

.origin-showcase__collection-copy h2{
  margin:0;
  font-size:clamp(2.8rem,4vw,4.6rem);
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--ink);
}

.origin-showcase__collection-copy p{
  margin-top:14px;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.7;
}

.origin-showcase__collection-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}

.collection-card--blue .collection-card__media{ background:#dce7ff; }
.collection-card--sencha .collection-card__media{ background:#edf6de; }
.collection-card--gyokuro .collection-card__media{ background:#edf6de; }
.collection-card--hojicha .collection-card__media{ background:#efe0d4; }

.collection-card__body .pill-row{ margin-bottom:12px; }
.collection-card__body .cta-button{ margin-top:auto; }

@media (max-width:1100px){
  .origin-showcase__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .origin-showcase__collection{ grid-template-columns:1fr; }
  .origin-showcase__collection-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width:1101px){
  .origin-card__media{ height:150px; }
  .origin-card__body{ padding:12px 14px 14px; }
  .origin-card__number{ margin-bottom:7px; font-size:.68rem; }
  .origin-card__region{ margin-bottom:6px; font-size:.58rem; letter-spacing:.12em; }
  .origin-card__region span{ font-size:.58rem; }
  .origin-card h3{ margin-bottom:8px; font-size:1.38rem; line-height:1.12; }
  .origin-card__name-ja{ font-size:.88em; }
  .origin-card__name-en{ font-size:.76em; }
  .origin-card p{ font-size:.78rem; line-height:1.5; }
  .origin-card__meta{ margin-top:12px; }
  .origin-card__meta > span{ margin-bottom:7px; font-size:.62rem; }
  .origin-card .pill-row{ gap:6px; }
  .origin-card .pill{ min-height:24px; padding:4px 8px; font-size:.62rem; }
  .origin-card__footer{ gap:5px 8px; margin-top:12px; padding-top:10px; font-size:.59rem; }
  .origin-card__body .cta-button{ padding:8px 10px; font-size:.68rem; }
}

@media (max-width:780px){
  .origin-showcase__intro,
  .origin-showcase__collection{ grid-template-columns:1fr; }
  .origin-showcase__map{ min-height:320px; }
  .origin-showcase__grid{ grid-template-columns:1fr; }
  .origin-showcase__collection-grid{ grid-template-columns:1fr; }
}
.tag{ font-size:.72rem; background:var(--matcha-foam); color:var(--matcha-deep); padding:5px 10px; border-radius:20px; font-weight:600; }
.tag.blue{ background:var(--butterfly-soft); color:var(--butterfly); }
.collection-lineup{ position:relative; isolation:isolate; background-size:cover; background-position:center; }
.collection-lineup{
  background-image:none;
  background:linear-gradient(180deg,var(--washi) 0%,var(--matcha-foam) 42%,var(--washi) 100%);
}

.ki-collection-intro{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
}

.ki-collection-intro .eyebrow{
  justify-content:center;
  margin-bottom:12px;
}

.ki-collection-intro h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,4.8rem);
  line-height:0.98;
  letter-spacing:-.06em;
  color:var(--matcha-deep);
}

.ki-collection-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 28px;
  padding:14px 0;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.ki-collection-status > p{ margin:0; color:var(--ink); font-size:.95rem; font-weight:600; }
.ki-collection-status > div{ display:flex; align-items:center; gap:18px; }
.ki-collection-status__availability{ color:var(--matcha-deep); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ki-collection-status a{ color:var(--matcha-deep); font-size:.78rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .ki-collection-status{ align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:22px; }
  .ki-collection-status > div{ align-items:flex-start; flex-direction:column; gap:6px; }
}

.ki-product-nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:34px;
}

.ki-product-nav__group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--paper-line);
  border-radius:999px;
  padding:8px 12px;
  box-shadow:0 12px 24px rgba(23,36,15,0.03);
}

.ki-product-nav__label{
  display:inline-block;
  padding:0 10px 0 4px;
  color:var(--ink-soft);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-product-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--matcha-deep);
  text-decoration:none;
  transition:all .2s ease;
}

.ki-product-nav a:hover,
.ki-product-nav a.is-current{
  background:var(--matcha-deep);
  color:var(--white);
}

.ki-product-feature{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.95fr);
  align-items:stretch;
  margin-bottom:34px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 22px 48px rgba(23,36,15,0.05);
}

.ki-product-feature--green{
  background:linear-gradient(135deg,#f5f7ef 0%,#fbfaf6 52%,#f5f6ee 100%);
}

.ki-product-feature__media{ position:relative; min-height:540px; }
.ki-product-feature__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(16,36,15,0.08),transparent 38%,transparent 100%);
}
.ki-product-feature__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.04);
}

.ki-product-feature__copy{
  padding:48px 42px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ki-product-feature__meta{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}

.ki-product-feature__number,
.ki-product-story__number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(47,74,30,0.1);
  color:var(--matcha-deep);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.1em;
}

.ki-product-feature__number{ flex:0 0 42px; }

.ki-product-feature__origin,
.ki-product-story__origin{
  color:var(--matcha-deep);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
}

.ki-product-feature__copy h3,
.ki-product-story__copy h3,
.ki-beyond-card__body h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  color:var(--matcha-deep);
  line-height:1;
  letter-spacing:-.05em;
}

.ki-product-feature__copy h3{
  font-size:clamp(2.5rem,4vw,4.5rem);
}

.ki-product-feature__tag,
.ki-product-story__kicker,
.ki-card-subtitle{
  margin:0 0 16px;
  color:var(--matcha-deep);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-product-feature__lead{
  margin:0 0 22px;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.8;
  max-width:28ch;
}

.ki-info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--paper-line);
}

.ki-info-grid > div{
  display:grid;
  gap:6px;
}

.ki-info-label{
  display:block;
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-info-grid p{
  margin:0;
  color:var(--ink-soft);
  font-size:.96rem;
  line-height:1.7;
}

.ki-cta-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:22px;
}

@media (min-width:981px){
  .ki-product-feature{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  }

  .ki-product-feature__media{ min-height:360px; }

  .ki-product-feature__copy{ padding:34px 32px 28px; }

  .ki-product-feature__copy h3{ font-size:clamp(2.1rem,3vw,3rem); }

  .ki-product-feature .ki-info-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.ki-inline-link,
.ki-product-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ki-product-button{
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  box-shadow:0 8px 18px rgba(23,36,15,0.08);
}

.ki-product-button:hover,
.ki-inline-link:hover{
  transform:translateY(-2px);
}

.ki-product-button--green,
.ki-product-button--dark,
.ki-product-button--forest,
.ki-product-button--fresh,
.ki-product-button--blue,
.ki-product-button--sencha,
.ki-product-button--gyokuro,
.ki-product-button--hojicha{
  color:var(--white);
}

.ki-product-button--green{ background:var(--matcha-deep); }
.ki-product-button--dark{ background:var(--ink); }
.ki-product-button--forest{ background:#27533a; }
.ki-product-button--fresh{ background:#3b6c47; }
.ki-product-button--blue{ background:#1d4dcb; }
.ki-product-button--sencha{ background:#2a5d3a; }
.ki-product-button--gyokuro{ background:#254c38; }
.ki-product-button--hojicha{ background:#5a3a2a; }

.ki-inline-link{
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-product-story{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:0;
  margin:18px auto 0;
  border:1px solid var(--paper-line);
  border-radius:22px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 18px 40px rgba(23,36,15,0.04);
}

.ki-product-story__media{ min-height:360px; }
.ki-product-story__media img{ display:block; width:100%; height:100%; object-fit:cover; }

.ki-product-story__copy{
  padding:34px 32px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ki-product-story__header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.ki-product-story__copy h3{
  font-size:clamp(2.1rem,3vw,3rem);
  margin-bottom:10px;
}

.ki-product-story__copy p:not(.ki-product-story__kicker){
  margin:0 0 18px;
  color:var(--ink-soft);
  line-height:1.8;
}

.ki-detail-list{
  display:grid;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--paper-line);
  margin:8px 0 20px;
}

.ki-detail-list div{
  display:grid;
  gap:4px;
}

.ki-detail-list span{
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-detail-list strong{
  color:var(--ink);
  font-size:.96rem;
  font-weight:600;
}

.ki-product-story--uji .ki-product-story__copy{ background:linear-gradient(135deg,#f3f6ef,#fff); }
.ki-product-story--miyazaki .ki-product-story__copy{ background:linear-gradient(135deg,#f6f9f3,#fff); }
.ki-product-story--yame .ki-product-story__copy{ background:linear-gradient(135deg,#edf1ea,#fff); }

.ki-product-story--uji .ki-product-story__number,
.ki-product-story--uji .ki-product-story__origin{ color:#203920; }
.ki-product-story--miyazaki .ki-product-story__number,
.ki-product-story--miyazaki .ki-product-story__origin{ color:#2b5e3a; }
.ki-product-story--yame .ki-product-story__number,
.ki-product-story--yame .ki-product-story__origin{ color:#1f402d; }

@media (min-width:981px){
  .ki-product-story{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    border-radius:16px;
  }

  .ki-product-story__media{ height:400px; min-height:0; }
  .ki-product-story__copy{ padding:22px 24px 20px; }
  .ki-product-story__header{ gap:10px; margin-bottom:8px; }
  .ki-product-story__number{ width:36px; height:36px; flex:0 0 36px; font-size:.88rem; }
  .ki-product-story__origin{ font-size:.62rem; letter-spacing:.1em; }
  .ki-product-story__copy h3{ font-size:1.7rem; line-height:1.15; margin-bottom:6px; }
  .ki-product-story__copy p:not(.ki-product-story__kicker){ font-size:.88rem; line-height:1.55; margin:0 0 12px; }
  .ki-product-story__kicker{ margin-bottom:10px; }
  .ki-product-story .ki-detail-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; padding-top:12px; margin:6px 0 12px; }
  .ki-product-story .ki-detail-list div{ gap:2px; }
  .ki-product-story .ki-detail-list span{ font-size:.58rem; letter-spacing:.08em; }
  .ki-product-story .ki-detail-list strong{ font-size:.8rem; line-height:1.35; }
  .ki-product-story .ki-product-button{ min-height:40px; padding:0 16px; font-size:.68rem; align-self:flex-start; }

  .ki-product-feature{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); }
  .ki-product-feature__media{ height:400px; min-height:0; }
  .ki-product-feature__copy{ padding:24px; }
  .ki-product-feature__meta{ gap:10px; margin-bottom:12px; }
  .ki-product-feature__number{ width:36px; height:36px; flex:0 0 36px; font-size:.88rem; }
  .ki-product-feature__origin{ font-size:.62rem; letter-spacing:.1em; }
  .ki-product-feature__copy h3{ font-size:2rem; line-height:1.1; margin-bottom:6px; }
  .ki-product-feature__tag{ margin-bottom:10px; }
  .ki-product-feature__lead{ max-width:48ch; font-size:.9rem; line-height:1.55; margin-bottom:14px; }
  .ki-product-feature .ki-detail-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; padding-top:12px; margin:6px 0 12px; }
  .ki-product-feature .ki-detail-list div{ gap:2px; }
  .ki-product-feature .ki-detail-list span{ font-size:.58rem; letter-spacing:.08em; }
  .ki-product-feature .ki-detail-list strong{ font-size:.8rem; line-height:1.35; }
  .ki-product-feature .ki-info-grid{ gap:10px; padding-top:12px; }
  .ki-product-feature .ki-info-label{ font-size:.58rem; letter-spacing:.1em; }
  .ki-product-feature .ki-info-grid p{ font-size:.8rem; line-height:1.4; }
  .ki-product-feature .ki-cta-row{ gap:10px; margin-top:12px; }
  .ki-product-feature .ki-product-button{ min-height:40px; padding:0 16px; font-size:.68rem; }
}

.ki-collection-divider{
  margin:48px 0 24px;
  text-align:center;
}

.ki-collection-divider .eyebrow{ justify-content:center; }

.ki-collection-divider h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  color:var(--matcha-deep);
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:0.98;
  letter-spacing:-.06em;
}

.ki-collection-divider p:last-child{
  max-width:52ch;
  margin:0 auto;
  color:var(--ink-soft);
  line-height:1.8;
}

.ki-beyond-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  margin-top:18px;
}

.ki-beyond-card{
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 28px rgba(23,36,15,0.04);
}

.ki-beyond-card__media{ height:260px; background:rgba(23,36,15,0.04); }
.ki-beyond-card__media img{ display:block; width:100%; height:100%; object-fit:cover; }

.ki-beyond-card__body{ padding:24px 22px 22px; }

.ki-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--matcha-deep);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:12px;
}

.ki-beyond-card__body h3{
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:8px;
}

.ki-beyond-card__body p{ color:var(--ink-soft); line-height:1.8; }

.ki-beyond-card--blue .ki-card-meta{ color:#1d4dcb; }
.ki-beyond-card--sencha .ki-card-meta{ color:#2a5d3a; }
.ki-beyond-card--gyokuro .ki-card-meta{ color:#254c38; }
.ki-beyond-card--hojicha .ki-card-meta{ color:#5a3a2a; }
.ki-beyond-card--accessory .ki-card-meta{ color:#73543a; }

@media (min-width:981px){
  .ki-beyond-grid{ gap:16px; }
  .ki-beyond-card{ border-radius:16px; }
  .ki-beyond-card__media{ height:180px; }
  .ki-beyond-card__body{ padding:16px; }
  .ki-card-meta{ font-size:.62rem; letter-spacing:.1em; margin-bottom:8px; }
  .ki-beyond-card__body h3{ font-size:1.45rem; line-height:1.15; margin-bottom:6px; }
  .ki-beyond-card__body p{ font-size:.86rem; line-height:1.55; margin:0 0 8px; }
  .ki-beyond-card .ki-detail-list{ gap:7px; margin:6px 0 12px; padding-top:10px; }
  .ki-beyond-card .ki-detail-list div{ gap:2px; }
  .ki-beyond-card .ki-detail-list span{ font-size:.6rem; letter-spacing:.1em; }
  .ki-beyond-card .ki-detail-list strong{ font-size:.82rem; line-height:1.4; }
  .ki-beyond-card .ki-product-button{ min-height:40px; padding:0 16px; font-size:.68rem; }
}

.ki-detail-list--compact{ margin-top:10px; }

.ki-product-story--miyazaki .ki-product-story__copy h3,
.ki-product-story--miyazaki .ki-product-story__kicker,
.ki-product-story--miyazaki .ki-detail-list span,
.ki-product-story--miyazaki .ki-product-story__origin{ color:#2d6c43; }

.ki-product-story--yame .ki-product-story__copy h3,
.ki-product-story--yame .ki-product-story__kicker,
.ki-product-story--yame .ki-detail-list span,
.ki-product-story--yame .ki-product-story__origin{ color:#294d38; }

.product-detail-page{ background:var(--washi); }
.product-detail-shell{ padding-top:20px; }
.product-collection-strip{
  border:1px solid var(--paper-line);
  background:rgba(255,255,255,0.72);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 14px 10px 18px;
  margin:18px auto 0;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 24px rgba(23,36,15,0.04);
}
.product-collection-strip__label{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--matcha-deep);
  font-weight:700;
}
.product-collection-strip__items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.product-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--matcha-deep);
  transition:all .2s ease;
}
.product-nav-link:hover,
.product-nav-link.is-active{
  background:var(--matcha-deep);
  color:var(--white);
}
.product-detail-root{ padding-bottom:40px; }
.product-detail{ display:block; }
.product-hero{ padding:34px 0 18px; }
.product-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; }
.product-hero__copy{ padding:24px 0; }
.product-hero__copy h1{
  margin:0 0 10px;
  font-size:clamp(3rem,5vw,6rem);
  line-height:0.9;
  letter-spacing:-.065em;
  color:var(--matcha-deep);
}
.product-hero__kicker{
  margin:0 0 18px;
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.product-hero__intro{
  margin:0 0 24px;
  max-width:30ch;
  color:var(--ink-soft);
  font-size:1.04rem;
  line-height:1.8;
}
.product-hero__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--paper-line);
}
.product-hero__meta div{
  display:grid;
  gap:6px;
}
.product-hero__meta span{
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.product-hero__meta strong{
  color:var(--ink);
  font-size:.95rem;
  line-height:1.5;
}
.product-hero__media{
  position:relative;
  border:1px solid var(--paper-line);
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,0.7);
  box-shadow:0 24px 48px rgba(23,36,15,0.06);
}
.product-hero__media img{
  display:block;
  width:100%;
  min-height:520px;
  object-fit:cover;
}
.product-content-section{ padding:44px 0; }
.product-content-section--muted{ background:rgba(255,255,255,0.24); }
.product-content-section--dark{
  background:linear-gradient(135deg,var(--matcha-deep) 0%,#1d2d18 100%);
  color:var(--white);
}
.product-two-col{
  display:grid;
  grid-template-columns:0.86fr 1.14fr;
  gap:34px;
  align-items:start;
}
.product-copy-block h2{
  margin:0;
  font-size:clamp(2.3rem,4vw,4.2rem);
  line-height:0.96;
  letter-spacing:-.06em;
}
.product-copy-block--body p{
  margin:0;
  color:var(--ink-soft);
  font-size:1.06rem;
  line-height:1.9;
}
.product-copy-block--light h2,
.product-copy-block--light .eyebrow,
.product-copy-block--light p{ color:var(--white); }
.section-heading{ margin-bottom:18px; }
.section-heading h2{ margin:0; font-size:clamp(2rem,3.4vw,3.4rem); line-height:0.98; }
.product-character-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.product-character-list li{
  min-height:110px;
  display:flex;
  align-items:flex-end;
  padding:20px 18px;
  border:1px solid var(--paper-line);
  border-radius:18px;
  background:rgba(255,255,255,0.5);
  color:var(--matcha-deep);
  font-size:1.08rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.product-application-block{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:28px;
  align-items:center;
}
.product-process-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--white);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.product-process-flow span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
}
.flow-arrow{ border:none !important; background:transparent !important; min-height:auto !important; }
.product-process-copy{
  margin:0;
  color:rgba(255,255,255,.88);
  max-width:46ch;
  line-height:1.8;
  font-size:1rem;
}
.product-badges{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:20px; align-items:center; }
.product-badges__list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.product-badges__list li{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  border:1px solid var(--paper-line);
  border-radius:999px;
  background:rgba(255,255,255,0.62);
  color:var(--matcha-deep);
  font-weight:600;
  text-align:center;
  padding:12px 16px;
}
.product-grid-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:start;
}
.product-meta-column{ display:grid; gap:12px; }
.product-meta-list{
  list-style:none;
  display:grid;
  gap:10px;
}
.product-meta-list li{
  padding:12px 14px;
  border:1px solid var(--paper-line);
  border-radius:12px;
  background:rgba(255,255,255,0.5);
  color:var(--ink);
  font-weight:600;
}
.product-source-flow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:18px 16px;
  border:1px solid var(--paper-line);
  border-radius:14px;
  background:rgba(255,255,255,0.54);
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.product-menu-choose{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:28px;
  align-items:start;
}
.product-menu-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.product-menu-list li{
  padding:18px 18px;
  border:1px solid var(--paper-line);
  border-radius:14px;
  background:rgba(255,255,255,0.5);
  color:var(--ink-soft);
  font-weight:600;
}
.product-cta-band{
  padding:25px 0 12px;
}
.product-cta-band__inner{
  background:linear-gradient(135deg,var(--matcha-deep) 0%,#1d2d18 100%);
  border-radius:24px;
  padding:42px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.product-cta-band__inner h2{ margin:0 0 8px; color:var(--white); font-size:clamp(2rem,4vw,3.5rem); line-height:1; }
.product-cta-band__inner p{ margin:0; color:rgba(255,255,255,0.8); max-width:50ch; }
.product-cta-band__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.product-inline-link{ color:var(--white); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.product-related-header{ margin-bottom:18px; }
.product-related-header h2{ margin:0; font-size:clamp(2rem,3.4vw,3.2rem); }
.product-related-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.product-related-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:180px;
  background:rgba(255,255,255,0.5);
  border:1px solid var(--paper-line);
  border-radius:20px;
  padding:20px 22px;
  color:var(--matcha-deep);
}
.product-related-card span{ color:var(--gold); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.product-related-card strong{ font-size:1.8rem; font-family:var(--font-display); margin-top:12px; }
.product-related-card small{ margin-top:8px; color:var(--ink-soft); }
.product-pagination{ padding-top:20px; }
.product-pagination__inner{
  border-top:1px solid var(--paper-line);
  padding-top:20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
}
.product-pagination__item{
  color:var(--matcha-deep);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  font-weight:700;
}
.product-pagination__item--center{ justify-self:center; }
.product-pagination__item:last-child{ justify-self:end; }
.product-secondary-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:20px 0 0;
  text-align:center;
}
.product-secondary-link p{ margin:0; color:var(--ink-soft); }
.product-secondary-link a{ color:var(--matcha-deep); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; }
@media (max-width:980px){
  .product-hero__grid,
  .product-two-col,
  .product-application-block,
  .product-menu-choose,
  .product-grid-meta,
  .product-badges{
    grid-template-columns:1fr;
  }
  .product-character-list,
  .product-menu-list,
  .product-badges__list{ grid-template-columns:1fr 1fr; }
  .product-collection-strip{ border-radius:20px; flex-direction:column; align-items:flex-start; }
  .product-collection-strip__items{ justify-content:flex-start; }
}
@media (max-width:640px){
  .product-collection-strip{ padding:14px 14px; }
  .product-hero__media img{ min-height:360px; }
  .product-character-list,
  .product-badges__list,
  .product-menu-list,
  .product-related-grid{ grid-template-columns:1fr; }
  .product-cta-band__inner{ padding:28px 20px; }
  .product-pagination__inner{ grid-template-columns:1fr; text-align:center; }
  .product-pagination__item,
  .product-pagination__item:last-child,
  .product-pagination__item--center{ justify-self:center; }
}

@media (max-width:980px){
  .ki-product-feature,
  .ki-product-story,
  .ki-beyond-grid{
    grid-template-columns:1fr;
  }

  .ki-product-feature__media{ min-height:400px; }
  .ki-product-story__media{ min-height:280px; }
}

@media (max-width:640px){
  .ki-product-nav{ justify-content:flex-start; overflow-x:auto; white-space:nowrap; padding-bottom:4px; }
  .ki-product-nav__group{ flex-wrap:nowrap; }
  .ki-product-feature__copy,
  .ki-product-story__copy{ padding:28px 22px; }
  .ki-product-feature__copy h3{ font-size:2.4rem; }
  .ki-product-story__header{ flex-wrap:wrap; }
  .ki-beyond-card__body{ padding:20px 18px 18px; }
  .ki-cta-row{ align-items:flex-start; }
  .ki-product-button{ width:100%; }
}
.collection-lineup > .wrap{ position:relative; z-index:1; }
.collection-packaging{ background:linear-gradient(180deg,var(--washi) 0%,var(--washi-deep) 100%); }
.collection-packaging .two-col{ align-items:center; }
.collection-packaging .check-list li{ color:var(--ink-soft); }
.collection-packaging-card{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(156,203,59,.16),transparent 42%),
    linear-gradient(160deg,#2F4A1E,#1B2C12);
  min-height:280px; border-color:rgba(156,203,59,.42); border-radius:18px;
  overflow:hidden;
}
.pack-swatches{ display:flex; align-items:flex-end; gap:22px; }
.pack-pouch{
  width:72px; height:118px; border-radius:10px 10px 8px 8px;
  position:relative;
  box-shadow:8px 16px 24px rgba(8,16,6,.28);
  transform:rotate(-4deg);
}
.pack-pouch::before{
  content:""; position:absolute; left:12px; right:12px; top:14px; height:18px;
  border-radius:3px; background:rgba(255,255,255,.16);
}
.pack-pouch::after{
  content:""; position:absolute; left:50%; top:42px; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
}
.pack-pouch--green{ background:linear-gradient(160deg,#8FBF55,#3F5F27); }
.pack-pouch--blue{ background:linear-gradient(160deg,#7A7DDB,#3A3F88); transform:rotate(3deg) translateY(-8px); }

/* ---------- process / steps ---------- */
.steps{ position:relative; }
.steps::before{
  content:""; position:absolute; top:0; bottom:0; left:23px; width:1px; background:var(--paper-line);
}
.step{ display:grid; grid-template-columns:48px 1fr; gap:22px; padding-bottom:44px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step-num{
  width:48px; height:48px; border-radius:50%; background:var(--washi); border:1.5px solid var(--matcha-bright);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--matcha-deep); font-weight:700; z-index:1;
}
.step h3{ margin-bottom:.3em; font-size:1.1rem; }
.step p{ color:var(--ink-soft); margin-bottom:.3em; }

.harvest-section{ position:relative; isolation:isolate; background:var(--matcha-deep) url("../From%20Leaf%20to%20Ki/image_2.png") center/cover no-repeat; overflow:hidden; }
.harvest-section::before{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(10,27,8,.82) 0%,rgba(10,27,8,.48) 48%,rgba(10,27,8,.2) 100%); }
.harvest-section > .wrap{ position:relative; z-index:1; }
.harvest-section .two-col{ align-items:center; }
.harvest-section .two-col > div:first-child{ padding:34px 38px; background:rgba(23,48,14,.8); border:1px solid rgba(255,255,255,.25); border-radius:10px; }
.harvest-section .two-col > div:first-child h2{ color:var(--white); }
.harvest-section .two-col > div:first-child p{ color:rgba(255,255,255,.88); }
.harvest-section .two-col > div:first-child .eyebrow{ color:var(--white); }
.harvest-section .two-col > div:first-child .eyebrow::before{ background:var(--white); }
.harvest-section .two-col > div:last-child{ padding:28px 30px; background:rgba(247,244,233,.88); border:1px solid rgba(255,255,255,.5); border-radius:10px; }
.harvest-section .two-col > div:last-child p{ color:var(--ink-soft); }

.craft-cultivar-section{ background:var(--matcha-foam); }
.craft-growing-section{ background:linear-gradient(135deg,var(--matcha-foam) 0%,var(--white) 72%); }
.craft-growing-section h2,.craft-growing-section .step h3{ color:var(--matcha-deep); }
.craft-growing-section .step p{ color:var(--ink); }
.craft-growing-section .step-num{ background:var(--white); color:var(--matcha-deep); }
.craft-milling-section{ background:linear-gradient(135deg,var(--white),var(--matcha-foam)); }
.milling-cards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }
.milling-cards .card h3{ color:var(--matcha-bright); }
.milling-cards .card p{ color:rgba(255,255,255,.9); }
.craft-compare-section{ background:var(--washi-deep); }
.craft-processing-section{ background:linear-gradient(135deg,var(--matcha-deep),#41652A); }
.craft-processing-section .eyebrow{ color:var(--matcha-bright); }
.craft-processing-section .eyebrow::before{ background:var(--matcha-bright); }
.craft-processing-section .lede{ color:var(--white); max-width:68ch; }
.craft-processing-section .processing-note{ margin-top:22px; color:rgba(255,255,255,.9); max-width:88ch; }
.craft-processing-section .table-wrap{ border-color:rgba(255,255,255,.28); box-shadow:0 12px 30px rgba(8,20,5,.16); }
.craft-processing-section .table-wrap tbody td{ color:var(--ink-soft); }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--paper-line); border-radius:10px; background:var(--white); }
table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px; }
th,td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--paper-line); }
thead th{ background:var(--matcha-foam); color:var(--matcha-deep); font-family:var(--font-display); font-weight:600; font-size:.88rem; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--washi); }

/* ---------- quote / testimonial ---------- */
.quote-card{ font-style:italic;
}
.quote-card cite{ display:block; margin-top:12px; font-style:normal; font-weight:700; }

/* ---------- cta band ---------- */
.ki-knowledge{
  position:relative;
  padding:64px 0 32px;
  background:linear-gradient(180deg,#f7f2e8 0%,#f4f0e8 100%);
  border-top:1px solid rgba(47,74,30,0.08);
}

.ki-knowledge__wrap{
  display:grid;
  grid-template-columns:minmax(260px, 0.9fr) minmax(0, 1.5fr);
  gap:34px;
  align-items:start;
}

.ki-knowledge__aside{
  position:sticky;
  top:84px;
  padding:8px 10px 8px 0;
}

.ki-knowledge__aside .eyebrow{
  margin-bottom:14px;
}

.ki-knowledge__aside h2{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,4.4rem);
  line-height:0.95;
  letter-spacing:-.06em;
  color:var(--matcha-deep);
}

.ki-knowledge__aside p{
  margin:0;
  color:var(--ink-soft);
  line-height:1.8;
  max-width:30ch;
}

.ki-knowledge__tag{
  margin-top:22px;
  color:var(--matcha-deep);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.82;
}

.ki-knowledge__faqs{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ki-knowledge__faq{
  border-top:1px solid rgba(47,74,30,0.14);
  background:rgba(255,255,255,0.18);
  transition:border-color .2s ease, background .2s ease;
}

.ki-knowledge__faq[open]{
  background:rgba(255,255,255,0.42);
  border-color:rgba(47,74,30,0.24);
}

.ki-knowledge__faq summary{
  list-style:none;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center;
  gap:16px;
  padding:24px 0 20px;
  cursor:pointer;
  color:var(--matcha-deep);
  min-width:0;
}

.ki-knowledge__faq summary > * {
  min-width:0;
}

.ki-knowledge__faq summary::-webkit-details-marker { display:none; }

.ki-knowledge__index{
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

.ki-knowledge__question{
  font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--matcha-deep);
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ki-knowledge__toggle{
  justify-self:end;
  color:var(--matcha-deep);
  font-size:1.8rem;
  line-height:1;
  transition:transform .2s ease;
}

.ki-knowledge__faq[open] .ki-knowledge__toggle{
  transform:rotate(45deg);
}

.ki-knowledge__answer{
  padding:0 0 26px 58px;
  color:var(--ink-soft);
  line-height:1.9;
  max-width:58ch;
}

.ki-knowledge__answer p{
  margin:0 0 10px;
  font-size:1rem;
}

.ki-knowledge__answer strong{
  color:var(--matcha-deep);
  font-weight:700;
}

.ki-knowledge__highlight,
.ki-knowledge__brand{
  margin-top:16px !important;
  color:var(--matcha-deep);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.8;
}

.ki-knowledge__brand{
  letter-spacing:.14em;
}

@media (max-width:900px){
  .ki-knowledge__wrap{
    display:block !important;
    grid-template-columns:none !important;
    gap:20px;
    width:100%;
    max-width:100%;
  }

  .ki-knowledge__aside,
  .ki-knowledge__faqs,
  .ki-knowledge__faq,
  .ki-knowledge__faq summary,
  .ki-knowledge__question,
  .ki-knowledge__answer{
    max-width:100% !important;
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  .ki-knowledge__aside{
    position:static !important;
    padding:0 !important;
  }

  .ki-knowledge__aside p{
    max-width:none !important;
  }
}

@media (max-width:640px){
  .ki-knowledge__wrap,
  .ki-knowledge__faqs,
  .ki-knowledge__faq,
  .ki-knowledge__faq summary,
  .ki-knowledge__answer{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .ki-knowledge__wrap{
    display:block !important;
  }

  .ki-knowledge__faqs{
    gap:10px;
  }

  .ki-knowledge__faq{
    overflow:hidden;
  }

  .ki-knowledge__faq summary{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px;
    padding:18px 0 16px;
    overflow:hidden;
  }

  .ki-knowledge__index{
    display:block;
    font-size:.62rem;
    letter-spacing:.12em;
    margin-top:2px;
  }

  .ki-knowledge__question{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:1rem;
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
  }

  .ki-knowledge__toggle{
    justify-self:start;
    font-size:1.5rem;
    margin-left:0;
    line-height:1;
  }

  .ki-knowledge__answer{
    padding:0 0 20px;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .ki-knowledge__answer p{
    font-size:.96rem;
    line-height:1.75;
  }
}

.eyebrow--light{
  color:rgba(255,255,255,.78);
}

.cta-band{ color:var(--white);
  padding:56px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.18);
}
.cta-band h2{ color:var(--white); margin-bottom:.25em; }
.cta-band p{ margin-bottom:0; max-width:46ch; }

/* ---------- footer ---------- */
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.site-footer h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:16px; }
.site-footer .brand-name{ color:var(--matcha-bright); }
.site-footer .brand-name small{ color:var(--matcha-bright); }
.site-footer .enso{ color:var(--matcha-bright); }
.footer-links a{ display:block; padding:6px 0; font-size:.88rem; color:var(--matcha-bright); }
.footer-bottom{ border-top:1px solid rgba(156,203,59,.35); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--matcha-bright); }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ padding:64px 0 54px; background:var(--matcha-foam); position:relative; overflow:hidden; }
.page-hero.collection-hero{
  background:var(--matcha-deep) url("../collection_1.png") center/cover no-repeat;
}
.page-hero.collection-hero::before{
  content:""; position:absolute; inset:0;
}
.page-hero.collection-hero .wrap{ position:relative; z-index:1; }
.page-hero.collection-hero h1{
  color:var(--white);
}
.collection-hero-lede{
  font-weight:400;
  text-shadow:0 1px 10px rgba(10,25,8,.4);
}
.page-hero.craft-hero{ background:var(--matcha-deep) url("../From%20Leaf%20to%20Ki/image_1_hero.png") center/cover no-repeat; color:var(--white); }
.page-hero.craft-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,27,8,.82) 0%,rgba(10,27,8,.5) 45%,rgba(10,27,8,.24) 100%); }
.page-hero.craft-hero .wrap{ position:relative; z-index:1; }
.page-hero.craft-hero .eyebrow{ color:var(--white); }
.page-hero.craft-hero .eyebrow::before{ background:var(--white); }
.page-hero.craft-hero h1{ color:var(--white); text-shadow:0 2px 14px rgba(10,25,8,.55); }
.page-hero.craft-hero .enso{ display:none; }
.page-hero.cafes-hero{ background:var(--matcha-deep) url("../For%20Cafes/cafe_1.png") center/cover no-repeat; color:var(--white); }
.page-hero.cafes-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,27,8,.82) 0%,rgba(10,27,8,.52) 48%,rgba(10,27,8,.3) 100%); }
.page-hero.cafes-hero .wrap{ position:relative; z-index:1; }
.page-hero.cafes-hero .eyebrow{ color:var(--white); }
.page-hero.cafes-hero .eyebrow::before{ background:var(--white); }
.page-hero.cafes-hero h1{ color:var(--white); text-shadow:0 2px 14px rgba(10,25,8,.55); }
.page-hero.cafes-hero .enso{ display:none; }
.cafes-placecards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }
.cafes-placecards .card h3{ color:var(--matcha-bright); }
.cafes-placecards .card p{ color:rgba(255,255,255,.88); }

.craft-care-placecards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }

.craft-care-placecards .card h3{ color:var(--matcha-bright); }

.craft-care-placecards .card p{ color:rgba(255,255,255,.88); }
.craft-care-section{ background:var(--matcha-foam); }
.craft-care-section p{ color:var(--ink-soft); }
.impact-structure-cards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }
.impact-structure-cards .card h3{ color:var(--white); }
.impact-structure-title-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.impact-structure-title-row h3{ margin:0; font-size:1.15rem; }
.impact-program-status{ display:inline-flex; align-items:center; padding:5px 9px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.09); color:var(--matcha-foam); font-size:.62rem; font-weight:700; line-height:1.25; }
.impact-structure-cards .card .origin{ color:var(--matcha-bright); }
.impact-structure-cards .card .check-list li{ color:rgba(255,255,255,.9); }
.impact-structure-cards .card .check-list li::before{ color:var(--matcha-bright); }
.impact-values-cards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }
.impact-values-cards .card h3{ color:var(--matcha-bright); }
.impact-values-cards .card p{ color:rgba(255,255,255,.9); }
.story-values-cards .card{ background:var(--matcha-deep); border-color:rgba(156,203,59,.42); }
.story-values-cards .card h3{ color:var(--matcha-bright); }
.story-values-cards .card p{ color:rgba(255,255,255,.9); }
.page-hero .enso{ position:absolute; right:-70px; top:-70px; width:280px; height:280px; color:rgba(47,74,30,0.10); }
.page-hero .enso path{ animation:none; stroke-dashoffset:0; }
.page-hero h1{ font-size:clamp(2rem,4vw,2.8rem); max-width:16ch; }

/* ---------- misc ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.synergy-layout{ display:grid; padding-top:0; padding-bottom:0; }
.synergy-copy{ display:flex; flex-direction:column; justify-content:center; }
.synergy-copy h2{ color:var(--white); }
.synergy-copy .eyebrow{ color:var(--gold); }
.synergy-copy .eyebrow::before{ background:var(--gold); }
.synergy-kicker{ margin:8px 0 16px; }
.synergy-features{ display:grid; }
.synergy-feature{ display:flex; flex-direction:column; gap:12px; padding-right:18px; }
.synergy-feature:last-child{ padding-right:0; }
.synergy-feature-icon{ width:42px; height:42px; border:1px solid var(--matcha-bright); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.8rem; }
.synergy-feature h3{ font-family:var(--font-body); margin:0 0 7px; }
.synergy-feature p{ margin:0; }
.synergy-actions{ display:flex; align-items:center; gap:22px; margin-top:26px; }
.synergy-cta{ align-self:flex-start; margin-top:18px; background:var(--matcha-bright); color:var(--ink); }
.synergy-cta:hover{ background:var(--white); color:var(--matcha-deep); }
.synergy-supply{ display:flex; flex-direction:column; border-left:1px solid rgba(156,203,59,.35); padding-left:20px; }
.synergy-supply strong{ color:var(--gold); font-size:.68rem; letter-spacing:.1em; }
.synergy-supply span{ color:rgba(255,255,255,.76); font-size:.75rem; }
.synergy-image{ min-height:520px; overflow:hidden; }
.synergy-image img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.pill{ border:1px solid var(--paper-line); border-radius:20px; padding:8px 16px; font-size:.82rem; background:var(--white); color:var(--ink-soft); }
.check-list li{ display:flex; gap:10px; padding:8px 0; color:whitesmoke; font-size:.94rem; }
.check-list li::before{ content:"◦"; color:var(--matcha); font-weight:700; }
.split-band{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.split-band > div{ padding:38px 34px; }

.shared-success{ position:relative; isolation:isolate; overflow:hidden; }
.shared-success::before{ content:""; position:absolute; z-index:-1; inset:0; }
.shared-success::after{ content:""; position:absolute; z-index:0; left:0; right:0; bottom:0; height:18%; background:linear-gradient(0deg,var(--matcha-deep),transparent); opacity:.78; pointer-events:none; }
.shared-success-layout{ position:relative; z-index:1; display:grid; gap:72px; align-items:center; }
.shared-success-copy .lede,.shared-success-note{ color:var(--white); max-width:48ch; font-size:.95rem; }
.success-wheel{ aspect-ratio:1; position:relative; }
.success-wheel-ring{ position:absolute; border-radius:50%; }
.success-wheel-ring::after{ content:""; position:absolute; border-radius:50%; box-shadow:0 0 0 1px rgba(23,36,15,.1); }
.success-wheel-center{ position:absolute; inset:30%; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px; overflow:hidden; }
.success-wheel-center strong{ font-family:var(--font-display); color:var(--matcha-deep); font-size:clamp(.9rem,2vw,1.15rem); line-height:1.08; max-width:12ch; }
.success-wheel-center span{ color:var(--matcha-deep); font-size:clamp(.5rem,1.1vw,.66rem); line-height:1.25; text-transform:uppercase; letter-spacing:.1em; margin-top:7px; max-width:15ch; }
.success-segment{ position:absolute; z-index:3; width:30%; display:flex; flex-direction:column; gap:2px; font-size:.68rem; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
.success-segment b{ font-family:var(--font-display); color:var(--white); font-size:.9rem; }
.success-segment span{ white-space:pre-line; }
.success-segment--farmer{ left:18%; top:29%; align-items:center; }
.success-segment--producer{ right:18%; top:29%; align-items:center; }
.success-segment--cafe{ right:18%; bottom:25%; align-items:center; }
.success-segment--ki{ left:18%; bottom:25%; align-items:center; }
.form-field{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.8rem; font-weight:600; color:var(--matcha-deep); }
.form-field input,.form-field textarea,.form-field select{
  border:1px solid var(--paper-line); border-radius:8px; padding:12px 14px; font-family:inherit; font-size:.92rem; background:var(--white);
}
.form-field textarea{ resize:vertical; min-height:110px; }
.badge-circle{ width:64px; height:64px; border-radius:50%; background:var(--matcha-deep); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; margin-bottom:14px; }
.contact-info li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--paper-line); font-size:.94rem; }
.contact-info li:last-child{ border-bottom:0; }
.contact-info b{ color:var(--matcha-deep); display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }

[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .synergy-layout{ grid-template-columns:1fr; }
  .shared-success-layout{ gap:38px; }
  .success-wheel{ width:min(100%,500px); }
  .synergy-copy{ padding:60px 0 36px; }
  .synergy-features{ gap:16px; }
  .synergy-image{ min-height:380px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; gap:34px; }
  .split-band{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1080px){
  .promise-orbit{ grid-template-columns:minmax(0,1fr) 280px minmax(0,1fr); gap:18px; }
  .promise-center{ min-height:390px; }
  .promise-enso-ring{ width:290px; height:290px; }
  .promise-bowl{ width:220px; height:220px; }
  .promise-node-button{ grid-template-columns:36px minmax(0,1fr) 32px; gap:10px; padding-right:12px; }
  .promise-node-number{ width:36px; height:36px; }
  .promise-node-copy strong{ font-size:.91rem; }
  .promise-node-copy small{ display:none; }
  .promise-node-arrow{ width:30px; height:30px; }
}
@media (max-width:760px){
  .promise-center{ order:-1; min-height:310px; }
  .promise-enso-ring{ width:270px; height:270px; }
  .promise-bowl{ width:205px; height:205px; }
  .promise-side{ gap:12px; }
  .promise-side--left::after,.promise-side--right::before{ display:none; }
  .promise-modal-card{ padding:42px 26px 32px; border-radius:20px; }

  .nav{ padding:10px 16px; gap:12px; flex-wrap:wrap; }
  .brand{ min-width:0; flex:1; gap:8px; }
  .brand-name{ min-width:0; font-size:.88rem; }
  .brand-name small{ display:none; }
  .nav-right{ flex:0 0 auto; flex-shrink:0; }
  .lang-btn{ padding:8px; }
  .lang-btn span{ display:none; }
  .menu-toggle{ display:block; flex-shrink:0; }
  .nav-links{
    order:3; flex:0 0 100%; max-height:0; overflow:hidden; flex-direction:column; align-items:stretch;
    padding:0 22px; gap:0; transform:none; transition:max-height .3s ease, padding .3s ease;
  }
  .nav-links.is-open{ max-height:520px; padding:14px 22px; }
  .nav-links a{ padding:16px 6px; font-size:1rem; border-bottom:1px solid var(--paper-line); }
  .nav-right{ gap:8px; }
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .success-segment{ width:25%; font-size:.62rem; }
  .success-segment b{ font-size:.78rem; }
  .cta-band{ flex-direction:column; text-align:center; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .section{ padding:60px 0; }
  .placecard,.placecard-toggle{ min-height:270px; }
  .placecard-toggle{ padding:24px; }
  .placecard-panel{ padding:22px 24px 26px; }
  .synergy-image{ min-height:280px; }
  .synergy-feature{ display:grid; grid-template-columns:42px 1fr; border-right:0; border-bottom:1px solid rgba(156,203,59,.26); padding:0 0 18px; }
  .synergy-feature:last-child{ padding-bottom:0; }
  .synergy-actions{ align-items:stretch; flex-direction:column; gap:18px; }
  .synergy-cta{ align-self:flex-start; }
  .synergy-supply{ border-left:0; border-top:1px solid rgba(156,203,59,.35); padding:14px 0 0; }
  .hero{ min-height:calc(100svh - 70px); padding:86px 0 78px; }
  .hero-background .hero-carousel-track img{ width:72vw; }
}


.ki-blue-shop-btn,
.ki-blue-shop-btn:active{
  transform:translateY(0);
}

@media (max-width:380px){
  .brand-name{ font-size:.78rem; }
  .brand .enso{ width:29px; height:29px; }
}

  .ki-spec-dropdown-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ki-spec-dropdown-list li {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--matcha-text, #1d261e);
  }

  .ki-spec-dropdown-list li strong {
    color: var(--matcha-dark, #1b3322);
  }
  .ki-impact-commitment-section {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--matcha-text, #1d261e);
  }

  .ki-commitment-card {
    background: #ffffff;
    border: 1px solid #d8e2d9;
    border-radius: 16px;
    padding: 45px 40px;
    box-shadow: 0 8px 30px rgba(27, 51, 34, 0.05);
    position: relative;
    overflow: hidden;
  }

  @media (max-width: 650px) {
    .ki-commitment-card {
      padding: 30px 20px;
    }
  }

  .ki-commitment-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 35px auto;
  }

  .ki-impact-title {
    font-size: 2.1rem;
    color: var(--matcha-dark, #1b3322);
    margin: 12px 0 16px 0;
    font-weight: 700;
    line-height: 1.25;
  }

  .ki-impact-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--matcha-muted, #4b5e4f);
    margin: 0;
  }

  /* Split Highlight Grid */
  .ki-impact-highlight-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    margin-bottom: 35px;
    align-items: stretch;
  }

  @media (max-width: 768px) {
    .ki-impact-highlight-grid {
      grid-template-columns: 1fr;
    }
  }

  .ki-pledge-badge-card {
    background: var(--matcha-dark, #1b3322);
    color: #ffffff;
    border-radius: 12px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(27, 51, 34, 0.15);
  }

  .ki-stat-num {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 8px;
  }

  .ki-stat-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #a8d5b0;
    margin-bottom: 8px;
  }

  .ki-stat-desc {
    font-size: 0.84rem;
    line-height: 1.5;
    color: #dbe8dd;
    margin: 0;
  }

  .ki-presence-card {
    background: var(--matcha-tint, #eaf2eb);
    border: 1px solid #d0e0d2;
    border-radius: 12px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ki-sub-accent {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--matcha-vibrant, #4e8c56);
    margin-bottom: 8px;
  }

  .ki-sub-title {
    font-size: 1.25rem;
    color: var(--matcha-dark, #1b3322);
    margin: 0 0 12px 0;
    font-weight: 700;
  }

  .ki-presence-text {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--matcha-text, #1d261e);
    margin: 0;
  }

  /* Editorial Quote Footer */
  .ki-impact-quote-box {
    border-top: 1px solid #e2ece3;
    padding-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }

  .ki-quote-leaf-decor {
    font-size: 1.2rem;
    color: var(--matcha-vibrant, #4e8c56);
    opacity: 0.6;
    user-select: none;
  }

  .ki-editorial-quote {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 600;
    color: var(--matcha-dark, #1b3322);
    letter-spacing: 0.2px;
  }

  /* VISION AND ENGAGEMENT PAGE > ACTIVE ENGAGEMENT TIMELINE */

.ki-engagement-section {
    max-width: 950px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--matcha-text, #1d261e);
  }

  .ki-engagement-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 40px auto;
  }

  .ki-engagement-title {
    font-size: 2.1rem;
    color: var(--matcha-dark, #1b3322);
    margin: 12px 0 8px 0;
    font-weight: 700;
  }

  /* Timeline Backbone */
  .ki-timeline {
    position: relative;
    padding-left: 20px;
  }

  .ki-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 175px;
    width: 2px;
    background: #d8e2d9;
  }

  .ki-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 55px;
    margin-bottom: 35px;
    align-items: flex-start;
  }

  .ki-timeline-item:last-child {
    margin-bottom: 0;
  }

  /* Center Node Dot */
  .ki-timeline-marker {
    position: absolute;
    left: 170px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--matcha-vibrant, #4e8c56);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px var(--matcha-primary, #2d5a37);
    z-index: 2;
  }

  /* Date Column */
  .ki-timeline-date {
    text-align: right;
    padding-top: 12px;
  }

  .ki-date-tag {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--matcha-dark, #1b3322);
    letter-spacing: 0.5px;
  }

  .ki-location-tag {
    display: block;
    font-size: 0.78rem;
    color: var(--matcha-muted, #5e7061);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  /* Details Card */
  .ki-timeline-card {
    background: #ffffff;
    border: 1px solid #dbe3dc;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .ki-timeline-card:hover {
    transform: translateY(-2px);
    border-color: var(--matcha-primary, #2d5a37);
  }

  .ki-event-name {
    font-size: 1.15rem;
    color: var(--matcha-dark, #1b3322);
    margin: 0 0 6px 0;
    line-height: 1.4;
    font-weight: 700;
  }

  .ki-institution-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--matcha-vibrant, #4e8c56);
    margin-bottom: 12px;
  }

  .ki-jp-name {
    display: block;
    font-size: 0.85rem;
    color: var(--matcha-muted, #5e7061);
    margin-bottom: 12px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  }

  .ki-event-body {
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--matcha-text, #1d261e);
    margin: 0;
  }

  .ki-field-notes-btn {
    margin-top: 18px;
    border: 1px solid rgba(26, 49, 34, 0.35);
    background: var(--matcha-deep, #1b3322);
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .ki-field-notes-btn:hover {
    transform: translateY(-1px);
    background: #163121;
  }

  .ki-notes-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1300;
  }

  .ki-notes-modal.is-open {
    display: block;
  }

  .ki-notes-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 26, 20, 0.68);
    backdrop-filter: blur(6px);
  }

  .ki-notes-modal__dialog {
    position: relative;
    width: min(1120px, calc(100vw - 40px));
    max-height: 88vh;
    overflow: auto;
    margin: 6vh auto 0;
    background: linear-gradient(180deg, #f7f2e8 0%, #eef6eb 100%);
    border: 1px solid rgba(27, 51, 34, 0.08);
    border-radius: 28px;
    padding: 28px 30px 42px;
    box-shadow: 0 30px 100px rgba(9, 19, 13, 0.18);
  }

  .ki-notes-close {
    position: sticky;
    top: 8px;
    float: right;
    border: 0;
    background: rgba(27, 51, 34, 0.08);
    color: var(--matcha-deep, #1b3322);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .ki-notes-close:hover {
    background: rgba(27, 51, 34, 0.14);
    transform: rotate(90deg);
  }

  .ki-notes-header {
    margin-bottom: 22px;
    padding-right: 54px;
  }

  .ki-notes-header h3 {
    margin-top: 16px;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    color: var(--matcha-deep, #1b3322);
  }

  .ki-notes-hero {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .ki-notes-hero-copy,
  .ki-notes-hero-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(27, 51, 34, 0.08);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(17, 26, 20, 0.03);
  }

  .ki-notes-hero-copy {
    padding: 22px 22px 18px;
  }

  .ki-notes-kicker {
    margin: 0 0 12px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--matcha-vibrant, #4e8c56);
  }

  .ki-notes-hero-card {
    padding: 20px 20px 16px;
  }

  .ki-notes-card-label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--matcha-deep, #1b3322);
  }

  .ki-notes-hero-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--matcha-text, #1d261e);
    line-height: 1.7;
    font-size: 0.93rem;
  }

  .ki-notes-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 30px;
  }

  .ki-notes-gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }

  .ki-notes-content {
    color: var(--matcha-text, #1d261e);
  }

  .ki-notes-intro {
    font-size: 1.08rem;
    line-height: 1.8;
    margin: 0;
    color: #213828;
  }

  .ki-notes-story-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 10px;
  }

  .ki-notes-section {
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.36);
    border: 1px solid rgba(27, 51, 34, 0.06);
    border-radius: 18px;
    padding: 18px 18px 10px;
  }

  .ki-notes-content h4 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    margin: 0 0 12px;
    color: var(--matcha-deep, #1b3322);
    letter-spacing: -0.04em;
  }

  .ki-notes-content h5 {
    font-size: 1.04rem;
    margin: 12px 0 8px;
    color: var(--matcha-deep, #1b3322);
  }

  .ki-notes-content p,
  .ki-notes-content li {
    font-size: 0.98rem;
    line-height: 1.8;
  }

  .ki-notes-content ul,
  .ki-notes-content ol {
    padding-left: 20px;
    margin: 0 0 16px;
  }

  .ki-notes-content li + li {
    margin-top: 8px;
  }

  .ki-notes-quote-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(27, 51, 34, 0.96), rgba(54, 92, 61, 0.92));
    border-radius: 20px;
    padding: 24px 18px;
    color: #f7f5ee;
    box-shadow: 0 16px 30px rgba(17, 26, 20, 0.12);
  }

  .ki-notes-quote-box p {
    margin: 0;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
  }

  @media (max-width: 820px) {
    .ki-notes-hero,
    .ki-notes-story-layout {
      grid-template-columns: 1fr;
    }

    .ki-notes-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .ki-notes-gallery {
      grid-template-columns: 1fr;
    }

    .ki-notes-modal__dialog {
      padding: 20px 18px 28px;
      border-radius: 18px;
    }
  }

  /* Responsive Stacking */
  @media (max-width: 700px) {
    .ki-timeline::before {
      left: 15px;
    }

    .ki-timeline-marker {
      left: 10px;
      top: 16px;
    }

    .ki-timeline-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-left: 35px;
    }

    .ki-timeline-date {
      text-align: left;
      padding-top: 0;
    }
  }

  /* Badge with decorative borderlines */

  /* 5-Column Responsive Layout */

  .km-flow {
    --km-ink:      #14120D;
    --km-cream:    #F3EEE1;
    --km-moss:     #9FB68B;
    --km-indigo:   #86ADC2;
    --km-glass:    rgba(20, 18, 13, 0.58);
    --km-glass-line: rgba(243, 238, 225, 0.14);
  
    --km-font-head: "Shippori Mincho", serif;
    --km-font-body: "Zen Kaku Gothic New", sans-serif;
  
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: var(--km-font-body);
  }
  
  /* ---------- background marquee ---------- */
  .km-flow__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .km-flow__row {
    width: 100%;
    overflow: hidden;
    display: flex;
  }
  
  .km-flow__track {
    display: flex;
    flex-shrink: 0;
    animation: km-flow-scroll 42s linear infinite;
  }
  
  .km-flow__row--b .km-flow__track {
    animation-duration: 58s;
  }
  
  .km-flow__track img {
    height: 100%;
    width: 26rem;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  @keyframes km-flow-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .km-flow__track {
      animation: none;
    }
  }
  
  .km-flow__scrim {
    position: absolute;
    inset: 0;
  }
  
  /* ---------- content ---------- */
  .km-flow__content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
  }
  
  .km-flow__heading {
    font-family: var(--km-font-head);
    font-weight: 700;
    text-align: center;
    margin: 0 0 3rem;
  }
  
  .km-flow__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .km-flow__panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  
  .km-flow__panel-title {
    font-family: var(--km-font-head);
    font-weight: 500;
    margin: 0;
  }
  
  .km-flow__item-title {
    font-family: var(--km-font-body);
    font-weight: 500;
    margin: 0 0 0.5rem;
    color: var(--km-cream);
  }
  
  .km-flow__item-desc {
    margin: 0;
    max-width: 40ch;
  }
  
  .km-flow__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }
  
  .km-flow__chips li {
    border: 1px solid var(--km-glass-line);
    border-radius: 999px;
    color: var(--km-cream);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  
  .km-flow__chips li:hover {
    background: var(--km-indigo);
    border-color: var(--km-indigo);
    color: var(--km-ink);
  }
  
  /* ---------- responsive ---------- */
  @media (max-width: 860px) {
    .km-flow__panels {
      grid-template-columns: 1fr;
    }
    .km-flow {
      min-height: auto;
      padding: 4.5rem 1.25rem;
    }
  }
  
  @media (max-width: 480px) {
    .km-flow__panel {
      padding: 1.75rem 1.5rem;
    }
  }
/* =========================================================
   Collection Lineup — Horizontal Editorial Layout
   (Products page: "Three essentials, many ways to serve them")
   Scoped entirely under .editorial-* / .collection-lineup--editorial
   so it does not affect any other section that reuses shared
   classes like .origin, .product-block, .tag-row, .product-image-track,
   or the .ki-*-shop-btn buttons (behaviour/markup untouched).
   ========================================================= */

/* --- Media / auto-scrolling image track (reuses existing
   .product-image-track markup + animation, height overridden
   here to fill the taller editorial frame) --- */

/* --- Content column --- */

/* Decorative numeral watermark (auto-generated, no hardcoded
   copy so it needs no i18n key) + a small origin-tinted icon,
   echoing the "01 / 02 / 03" marks in the approved comp. */

/* Button colors for blue (previously unstyled/browser-default);
   button text, onclick handlers and redirect targets are unchanged. */
.ki-blue-shop-btn{
  background-color:var(--butterfly);
  border:1.5px solid var(--butterfly);
  box-shadow:0 8px 18px rgba(74,79,160,.2);
}
.ki-blue-shop-btn:hover{
  background-color:#3a3e85;
  border-color:#3a3e85;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(58,62,133,.3);
}
/* ======================================================= */
/* LAYOUT A: CAFÉ PROGRAMS & WATER CHEMISTRY STYLES        */
/* ======================================================= */
.ki-water-curriculum-section {
  max-width: 1240px;
  margin: 48px auto;
  padding: 0 24px;
  font-family: var(--font-body);
  color: #1d261e;
}

.ki-program-frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.ki-cafe-program-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  padding:28px 0 22px;
  border-bottom:1px solid #dce3d8;
}

.ki-cafe-program-heading > div{ max-width:700px; }
.ki-frame-badge{ color:#4e8c56; font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.ki-curriculum-title{ margin:8px 0 0; color:#1b3322; font-size:clamp(1.8rem,3vw,2.55rem); line-height:1.08; }
.ki-cafe-program-heading > p{ max-width:34ch; margin:0 0 2px; color:#5e7061; font-size:.92rem; line-height:1.6; }

.ki-cafe-overview-grid{
  display: grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  margin-top:24px;
}

.ki-cafe-overview-block,
.ki-cafe-wholesale{ min-width:0; padding:0 22px; }
.ki-cafe-overview-block:first-child{ padding-left:0; }
.ki-cafe-overview-block + .ki-cafe-overview-block,
.ki-cafe-wholesale{ border-left:1px solid #dce3d8; }
.ki-cafe-wholesale{ padding-right:0; }
.ki-cafe-overview-block img{
  display:block;
  width:100%;
  height:142px;
  margin-bottom:16px;
  object-fit:cover;
}
.ki-cafe-overview-block h3,
.ki-cafe-wholesale h3,
.ki-cafe-support h3{
  margin:0 0 10px;
  color:#1b3322;
  font-family:var(--font-display);
  font-size:1.12rem;
  line-height:1.2;
}
.ki-cafe-overview-block ul,
.ki-cafe-support ul{ margin:0; padding-left:18px; color:#526153; font-size:.79rem; line-height:1.55; }
.ki-cafe-overview-block li,
.ki-cafe-support li{ margin:0 0 5px; padding-left:2px; }
.ki-cafe-overview-block li::marker,
.ki-cafe-support li::marker{ color:#7c9a54; }
.ki-cafe-table-wrap{ overflow-x:auto; }
.ki-cafe-program-table{ width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:.72rem; line-height:1.4; }
.ki-cafe-program-table th,
.ki-cafe-program-table td{ padding:9px 6px; border-bottom:1px solid #dce3d8; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.ki-cafe-program-table th{ padding:9px 6px; border-bottom:1px solid #dce3d8; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.ki-cafe-program-table thead th{ background:#173d2d; color:#fff; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.ki-cafe-program-table tbody th{ color:#213b2c; font-weight:700; }
.ki-cafe-program-table tbody td{ color:#526153; }

.ki-cafe-support{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:30px 0 0;
  border-top:1px solid #dce3d8;
  border-bottom:1px solid #dce3d8;
}
.ki-cafe-support article{ padding:22px 22px 24px; }
.ki-cafe-support article:first-child{ padding-left:0; }
.ki-cafe-support article + article{ border-left:1px solid #dce3d8; }

.ki-cafe-impact{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:18px;
  margin-top:26px;
  padding:20px 24px;
  background:#eaf0e5;
  color:#244432;
  text-align:center;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ki-cafe-impact b{ color:#789456; font-size:1.15rem; font-weight:500; }
.ki-cafe-contact-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; font-size:.74rem; }
.ki-cafe-contact-links a{ color:inherit; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px; }

@media (max-width:960px){
  .ki-cafe-program-heading{ align-items:flex-start; flex-direction:column; gap:12px; }
  .ki-cafe-overview-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
  .ki-cafe-wholesale{ grid-column:1/-1; border-left:0; border-top:1px solid #dce3d8; padding:22px 0 0; }
}

@media (max-width:680px){
  .ki-water-curriculum-section{ margin:34px auto; padding:0 18px; }
  .ki-cafe-program-heading{ padding:10px 0 18px; }
  .ki-curriculum-title{ font-size:1.9rem; }
  .ki-cafe-overview-grid,
  .ki-cafe-support{ grid-template-columns:1fr; }
  .ki-cafe-overview-block,
  .ki-cafe-overview-block:first-child,
  .ki-cafe-wholesale{ padding:20px 0; border-left:0; }
  .ki-cafe-overview-block + .ki-cafe-overview-block,
  .ki-cafe-wholesale{ border-top:1px solid #dce3d8; }
  .ki-cafe-overview-block img{ height:170px; }
  .ki-cafe-table-wrap{ margin-right:-18px; padding-right:18px; }
  .ki-cafe-program-table{ min-width:590px; table-layout:auto; }
  .ki-cafe-support{ margin-top:18px; }
  .ki-cafe-support article,
  .ki-cafe-support article:first-child{ padding:20px 0; }
  .ki-cafe-support article + article{ border-left:0; border-top:1px solid #dce3d8; }
  .ki-cafe-impact{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px 8px; padding:18px 12px; font-size:.58rem; }
  .ki-cafe-impact b:nth-of-type(2){ display:none; }
}

/* Water Quality Target Strip */
.ki-water-targets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 32px;
  background: #f3f6f3;
  border-bottom: 1px solid #e2e8e2;
}

.ki-target-label-group .ki-target-hdr {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #1b3322;
}

.ki-target-label-group .ki-target-sub {
  font-size: 0.8rem;
  color: #5e7061;
}

.ki-target-metrics-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.ki-metric-pill {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ki-metric-pill strong {
  display: block;
  font-size: 0.95rem;
  color: #1b3322;
}

.ki-metric-pill small {
  display: block;
  font-size: 0.74rem;
  color: #5e7061;
}

.ki-guide-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2d5a37;
  text-decoration: none;
}

/* 4-Step Long-Scroll Curriculum */
.ki-curriculum-body {
  padding: 36px 32px;
}

.ki-curriculum-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 36px auto;
}

.ki-curriculum-main-title {
  font-size: 1.5rem;
  color: #1b3322;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.ki-curriculum-main-desc {
  font-size: 0.92rem;
  color: #5e7061;
  margin: 0;
}

.ki-step-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid #e8ece7;
}

@media (max-width: 800px) {
  .ki-step-row { grid-template-columns: 1fr; gap: 16px; }
}

.ki-step-meta {
  display: flex;
  gap: 16px;
}

.ki-step-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #4e8c56;
  line-height: 1;
}

.ki-step-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #4e8c56;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ki-step-copy h4 {
  font-size: 1.05rem;
  color: #1b3322;
  margin: 0 0 6px 0;
}

.ki-step-copy p {
  font-size: 0.85rem;
  color: #5e7061;
  line-height: 1.45;
  margin: 0 0 10px 0;
}

.ki-step-action-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2d5a37;
  text-decoration: none;
}

/* Step Visual Components */
.ki-water-drop-panel {
  background: #eef3ee;
  border-radius: 8px;
  padding: 20px;
  border: 1px dashed #cedbd0;
}

.ki-panel-annotation {
  font-size: 0.84rem;
  color: #1b3322;
  line-height: 1.5;
}

/* Step 2 Materials */
.ki-materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 650px) {
  .ki-materials-grid { grid-template-columns: 1fr; }
}

.ki-mat-card {
  background: #ffffff;
  border: 1px solid #e5eae5;
  border-radius: 6px;
  padding: 14px;
}

.ki-mat-card strong {
  display: block;
  font-size: 0.88rem;
  color: #1b3322;
}

.ki-mat-card small {
  display: block;
  font-size: 0.72rem;
  color: #7b8f7e;
  margin-bottom: 6px;
}

.ki-mat-card p {
  font-size: 0.78rem;
  color: #5e7061;
  margin: 0;
  line-height: 1.4;
}

/* Step 3 Tasting Flight */
.ki-tasting-flight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e5eae5;
  border-radius: 8px;
  padding: 18px 20px;
  gap: 10px;
}

@media (max-width: 650px) {
  .ki-tasting-flight-row { flex-direction: column; }
  .ki-flight-arrow { transform: rotate(90deg); }
}

.ki-flight-cup {
  text-align: center;
  flex: 1;
}

.ki-flight-cup.is-highlight {
  background: #f0f7f1;
  border-radius: 6px;
  padding: 8px 4px;
  border: 1px solid #c8e0cc;
}

.ki-cup-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin: 0 auto 6px auto;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.ki-c-ro { background: #d7ded8; }
.ki-c-soft { background: #4e8c56; }
.ki-c-mod { background: #7b9468; }
.ki-c-tap { background: #888d6f; }

.ki-flight-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1b3322;
}

.ki-flight-cup small {
  font-size: 0.7rem;
  color: #5e7061;
}

.ki-flight-arrow {
  color: #a8bbaa;
  font-size: 0.85rem;
}

.ki-fixed-standards-badge {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fafaf8;
  padding: 10px 16px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #4b5e4f;
}

/* Step 4 System Implementation */
.ki-system-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

@media (max-width: 680px) {
  .ki-system-split { grid-template-columns: 1fr; }
}

.ki-system-box {
  background: #ffffff;
  border: 1px solid #d8e2d9;
  border-radius: 8px;
  padding: 18px;
  position: relative;
}

.ki-system-box.is-recommended {
  border-color: #2d5a37;
  background: #fbfdfb;
}

.ki-recom-stamp {
  position: absolute;
  top: -9px;
  right: 14px;
  background: #2d5a37;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 10px;
}

.ki-opt-badge {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1b3322;
}

.ki-opt-cond {
  display: block;
  font-size: 0.74rem;
  color: #5e7061;
  margin-bottom: 10px;
}

.ki-opt-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: #1d261e;
  line-height: 1.5;
}

.ki-split-or {
  font-size: 0.72rem;
  font-weight: 800;
  color: #7b8f7e;
}

/* Footer Pillars */
.ki-curriculum-pillars-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #1b3322;
  color: #ffffff;
  padding: 18px 24px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 650px) {
  .ki-curriculum-pillars-footer { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.ki-ft-pillar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ==========================================================================
   Home Hero — Three ingredient panels + one responsive product composition
   Required local assets:
   assets/hero-backgrounds/matcha-powder.jpg
   assets/hero-backgrounds/butterfly-pea-powder.jpg
   assets/hero-packages/matcha-wholesale-1kg.png
   assets/hero-packages/matcha-wholesale-5kg.png
   assets/hero-packages/matcha-wholesale-10kg.png
   assets/hero-packages/matcha-retail-30g.png
   assets/hero-packages/matcha-retail-60g.png
   assets/hero-packages/matcha-retail-90g.png
   ========================================================================== */
.hero-powder{
  position:relative;
  isolation:isolate;
  min-height:720px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-powder-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-powder-vignette{
  position:absolute;
  inset:0;
}

.hero-powder-wrap{
  position:relative;
  z-index:1;
  width:100%;
}

.hero-powder-copy{
  position:relative;
}
.hero-powder-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(185,221,89,.42);
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pulse-dot{width:7px;height:7px;border-radius:50%}
.hero-powder-title{
  margin:0;
  text-wrap:balance;
}
.hero-powder-lede{
  width:min(100%, 760px);
}

.hero-powder-bottom{
  display:flex;
  flex-wrap:wrap;
  position:relative;
}
.btn-action-primary,.btn-action-ghost{
  min-width:190px;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn-action-primary{background:var(--matcha-bright);color:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-action-primary:hover{transform:translateY(-2px);background:#d2f06b;box-shadow:0 18px 34px rgba(0,0,0,.26)}
.btn-action-ghost{color:#fff;border:1px solid rgba(255,255,255,.52);background:rgba(4,10,5,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-action-ghost:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.11)}

@media (max-width:900px){
  .hero-powder{min-height:680px}
  .hero-powder-wrap{min-height:680px;padding-top:56px}
}

@media (max-width:680px){
  .hero-powder{
    display:block;
  }

  .hero-powder-title{
    width:100%;
  }

  .hero-powder-lede{
    padding:0 4px;
  }
}

@media (max-width:420px){
}

  


/* ==========================================================================
   KI VIBRATION MATCHA — HOMEPAGE EDITORIAL REDESIGN
   Visual direction: premium Japanese editorial / washi / photographic contrast
   Existing HTML, i18n and modal behavior are intentionally preserved.
   ========================================================================== */

:root{
  --editorial-cream:#F5F1E6;
  --editorial-paper:#FBF9F3;
  --editorial-ink:#182116;
  --editorial-green:#31561F;
  --editorial-accent:#91B83B;
  --editorial-gold:#A88442;
  --editorial-line:rgba(24,33,22,.14);
}

/* ---------- 01. HERO: editorial split instead of full green overlay ---------- */

.hero-powder{
  min-height:clamp(650px,calc(100svh - 72px),820px);
  color:var(--editorial-ink);
  background:var(--editorial-cream);
}

.hero-powder-backdrop{
  left:0;
  right:0;
  width:100%;
  grid-template-columns:none;
  opacity:1;
  background:#0b150f;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none;
  transform:none;
}

.hero-powder-vignette{
  background:linear-gradient(180deg,rgba(7,12,9,.12) 0%,rgba(7,12,9,.22) 100%);
}

.hero-powder-wrap{
  min-height:inherit;
  width:min(100%,1380px);
  padding:clamp(42px,5vw,72px) 42px clamp(30px,4vw,54px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-powder-copy{
  width:100%;
  max-width:760px;
  align-self:center;
  z-index:4;
}

.hero-powder-badge{
  margin-bottom:20px;
  padding:7px 14px;
  border-color:rgba(185,221,89,.42);
  background:rgba(7,17,9,.38);
  color:#c3df72;
  box-shadow:none;
}

.pulse-dot{
  background:#b7db58;
  box-shadow:0 0 16px rgba(183,219,88,.9);
}

.hero-powder-title{
  color:#fffdf8 !important;
  font-size:clamp(2.8rem,4.5vw,5rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.035em;
  text-shadow:0 5px 28px rgba(0,0,0,.34);
  max-width:none;
  text-align:center;
}

.hero-powder-lede{
  margin:20px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.88);
  font-size:clamp(.96rem,1.2vw,1.08rem);
  line-height:1.72;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
  text-wrap:balance;
  text-align:center;
}

.hero-powder-bottom{
  justify-content:center;
  align-self:center;
  padding:0;
  gap:12px;
  z-index:5;
  margin-top:28px;
}

.hero-powder-bottom .btn{
  min-height:48px;
}

.hero-powder-bottom .btn-action-primary{
  background:var(--matcha-bright);
  color:var(--ink);
  border-color:var(--matcha-bright);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.hero-powder-bottom .btn-action-primary:hover{
  background:#d2f06b;
  transform:translateY(-2px);
}

.hero-powder-bottom .btn-action-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.52);
  background:rgba(4,10,5,.22);
}

.hero-powder-bottom .btn-action-ghost:hover{
  background:rgba(255,255,255,.11);
  color:#fff;
}

@media (max-width:680px){
  .hero-powder{
    min-height:72svh !important;
    background:#09150e !important;
    color:#fff !important;
  }

  .hero-powder-backdrop{
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    opacity:1 !important;
    background:#09150e !important;
  }

  .hero-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    filter:none !important;
    transform:none !important;
    display:block !important;
  }

  .hero-powder-vignette{
    background:linear-gradient(180deg,rgba(7,12,9,.12) 0%,rgba(7,12,9,.22) 100%) !important;
  }

  .hero-powder-wrap{
    min-height:72svh !important;
    width:100% !important;
    padding:8px 14px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:center !important;
    gap:10px !important;
  }

  .hero-powder-copy{
    width:100% !important;
    max-width:520px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:12px !important;
    text-align:center !important;
  }

  .hero-powder-badge{
    display:inline-flex !important;
    margin:0 !important;
    font-size:.61rem !important;
    letter-spacing:.13em !important;
    padding:7px 13px !important;
    background:rgba(7,17,9,.38) !important;
    color:#c3df72 !important;
    box-shadow:none !important;
  }

  .hero-powder-title{
    color:#fffdf8 !important;
    font-size:clamp(2.45rem,11vw,4rem) !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
    text-align:center !important;
    max-width:none !important;
    text-shadow:0 5px 28px rgba(0,0,0,.34) !important;
    margin:0 !important;
  }

  .hero-powder-lede{
    width:min(100%,580px) !important;
    margin:0 !important;
    display:block !important;
    color:rgba(255,255,255,.88) !important;
    font-size:clamp(.88rem,3.7vw,1rem) !important;
    line-height:1.45 !important;
    text-align:center !important;
    text-shadow:0 2px 18px rgba(0,0,0,.42) !important;
  }

  .hero-powder-bottom{
    width:100% !important;
    gap:10px !important;
    padding:0 !important;
    justify-content:center !important;
    align-self:center !important;
    margin-top:10px !important;
  }

  .btn-action-primary,
  .btn-action-ghost{
    flex:1 !important;
    min-width:0 !important;
    width:auto !important;
    padding:13px 12px !important;
    font-size:.78rem !important;
  }
}

@media (max-width:420px){
  .hero-powder{
    min-height:68svh !important;
  }

  .hero-powder-wrap{
    min-height:68svh !important;
    padding:6px 12px 8px !important;
    gap:6px !important;
  }

  .hero-powder-badge{
    margin:0 auto 8px !important;
  }

  .hero-powder-title{
    font-size:clamp(2.2rem,10.5vw,3.1rem) !important;
    line-height:.96 !important;
  }

  .hero-powder-lede{
    display:block !important;
    font-size:.84rem !important;
    line-height:1.45 !important;
    margin-top:8px !important;
  }

  .hero-powder-bottom{margin-top:8px !important}

  .btn-action-primary,
  .btn-action-ghost{
    font-size:.72rem !important;
    padding:12px 8px !important;
  }
}

/* ---------- 02. PROMISES: compact 2 x 4 editorial grid ---------- */

.promise-section{
  padding:clamp(70px,7vw,105px) 0 clamp(58px,6vw,82px);
  background:
    radial-gradient(circle at 6% 20%,rgba(168,132,66,.08),transparent 24%),
    radial-gradient(circle at 94% 80%,rgba(145,184,59,.08),transparent 24%),
    var(--editorial-paper);
  color:var(--editorial-ink);
}

.promise-section::before{
  background:
    linear-gradient(90deg,transparent,rgba(49,86,31,.025),transparent);
}

.promise-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%,rgba(49,86,31,.04),transparent 30%);
}

.promise-intro{
  max-width:850px;
  margin:0 auto clamp(32px,4vw,46px);
}

.promise-eyebrow{
  color:var(--editorial-gold);
}

.promise-eyebrow span{
  background:rgba(168,132,66,.55);
}

.promise-intro h2{
  color:var(--editorial-ink);
  font-size:clamp(2.7rem,5vw,4.5rem);
  margin-bottom:16px;
}

.promise-intro .lede{
  color:rgba(24,33,22,.68);
  max-width:70ch;
}

.promise-orbit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(28px,4vw,64px);
  max-width:1180px;
  margin:0 auto;
  align-items:stretch;
}

.promise-side{
  gap:0;
}

.promise-side--left::after,
.promise-side--right::before{
  display:none;
}

.promise-node{
  border-top:1px solid var(--editorial-line);
}

.promise-side .promise-node:last-child{
  border-bottom:1px solid var(--editorial-line);
}

.promise-node-button{
  min-height:94px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 38px;
  gap:15px;
  padding:17px 4px 17px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--editorial-ink);
  transition:padding .3s ease,background .3s ease;
}

.promise-node-button:hover{
  transform:none;
  padding-left:10px;
  padding-right:10px;
  background:rgba(49,86,31,.045);
  box-shadow:none;
  border-color:transparent;
}

.promise-node-number{
  width:40px;
  height:40px;
  border:1px solid rgba(49,86,31,.34);
  color:var(--editorial-green);
  background:rgba(255,255,255,.45);
  font-size:.67rem;
}

.promise-node-copy strong{
  color:var(--editorial-ink);
  font-size:1.02rem;
  line-height:1.25;
}

.promise-node-copy small{
  margin-top:5px;
  color:rgba(24,33,22,.42);
  font-size:.56rem;
  letter-spacing:.17em;
}

.promise-node-button:hover .promise-node-copy small{
  color:var(--editorial-green);
}

.promise-node-arrow{
  width:34px;
  height:34px;
  border-color:rgba(24,33,22,.22);
  color:var(--editorial-green);
}

.promise-node-button:hover .promise-node-arrow{
  background:var(--editorial-green);
  color:#fff;
  border-color:var(--editorial-green);
}

.promise-center{
  display:none;
}

.promise-footer{
  max-width:930px;
  margin:clamp(30px,4vw,44px) auto 0;
  padding-top:25px;
  border-top:1px solid var(--editorial-line);
}

.promise-footer-mark{
  width:26px;
  height:26px;
  margin:-39px auto 13px;
  background:var(--editorial-paper);
  color:var(--editorial-green);
  font-size:1.4rem;
}

.promise-footer p{
  color:var(--editorial-ink);
  font-size:clamp(1.08rem,1.8vw,1.35rem);
  line-height:1.55;
}

/* Promise modal remains functionally identical, but visually matches the new section. */
.promise-modal-backdrop{
  background:rgba(20,27,16,.68);
}

.promise-modal-card{
  border-radius:4px;
  border-color:rgba(49,86,31,.20);
  background:var(--editorial-paper);
  box-shadow:0 35px 90px rgba(16,24,12,.28);
}

/* ---------- 03. FARMER STORY: full-bleed editorial photograph ---------- */

.synergy-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(14,29,13,.94) 0%,rgba(14,29,13,.80) 31%,rgba(14,29,13,.30) 61%,rgba(14,29,13,.18) 100%),
    url("../3Sec/matchafarm.png") center/cover no-repeat;
}

.synergy-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(12,23,10,.45),transparent 35%);
  z-index:0;
}

.synergy-layout{
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,1fr);
  min-height:620px;
  align-items:center;
}

.synergy-copy{
  max-width:620px;
  padding:78px 0;
}

.synergy-copy h2{
  max-width:10ch;
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:1.03;
}

.synergy-copy .lede{
  color:rgba(255,255,255,.84);
  max-width:58ch;
  font-size:1rem;
}

.synergy-kicker{
  color:#D6B768;
  letter-spacing:.13em;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
}

.synergy-features{
  margin-top:30px;
  max-width:650px;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}

.synergy-feature{
  border-right:1px solid rgba(255,255,255,.18);
  padding:0 20px;
}

.synergy-feature:first-child{padding-left:0;}
.synergy-feature:last-child{border-right:0;}

.synergy-feature h3{
  color:#fff;
  font-size:.82rem;
  letter-spacing:.08em;
}

.synergy-feature p{
  color:rgba(255,255,255,.67);
  font-size:.78rem;
  line-height:1.5;
}

.synergy-feature-icon{
  color:#C3DB76;
  border-color:rgba(195,219,118,.52);
}

.synergy-image{
  display:none;
}

/* ---------- 04. SHARED SUCCESS: turn the pie chart into a brand diagram ---------- */

.shared-success{
  padding:clamp(76px,8vw,110px) 0;
  background:
    linear-gradient(90deg,rgba(247,244,233,.96) 0%,rgba(247,244,233,.94) 42%,rgba(247,244,233,.60) 68%,rgba(247,244,233,.24) 100%),
    url("../03_scroll.png") center/cover no-repeat;
}

.shared-success::before{
  background:
    radial-gradient(circle at 80% 30%,rgba(92,138,52,.09),transparent 26%),
    linear-gradient(90deg,rgba(247,244,233,.20),transparent 70%);
}

.shared-success::after{
  display:none;
}

.shared-success-layout{
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  gap:clamp(40px,7vw,90px);
}

.shared-success .eyebrow{
  color:var(--editorial-gold);
}

.shared-success .eyebrow::before{
  background:var(--editorial-gold);
}

.shared-success-copy h2{
  color:var(--editorial-ink);
  max-width:12ch;
  font-size:clamp(2.4rem,4vw,4.2rem);
  line-height:1.05;
}

.shared-success-copy .lede,
.shared-success-note{
  color:rgba(24,33,22,.73);
  max-width:48ch;
}

.shared-success-note{
  margin-top:18px;
}

.success-wheel{
  width:min(100%,540px);
  justify-self:end;
  overflow:visible;
  border-radius:50%;
  box-shadow:0 0 0 12px rgba(255,254,251,.78),0 28px 70px rgba(35,49,24,.12);
}

.success-wheel::after{
  content:"";
  position:absolute;
  inset:-26px;
  border:1px solid rgba(49,86,31,.13);
  border-radius:50%;
  pointer-events:none;
}

.success-wheel-ring{
  inset:10%;
  box-shadow:0 0 0 12px rgba(255,254,251,.82);
  background:conic-gradient(
    #5F8D39 0 25%,
    #B08B43 25% 50%,
    #4C529A 50% 75%,
    #B9825B 75% 100%
  );
}

.success-wheel-ring::before{
  content:"";
  position:absolute;
  inset:4%;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
}

.success-wheel-ring::after{
  inset:28%;
  background:var(--editorial-paper);
}

.success-wheel-center strong,
.success-wheel-center span{
  color:var(--editorial-green);
}

.success-segment{
  color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.25);
}

/* ---------- 05 + 06. Story / café partnership band ---------- */

.split-band{
  border:1px solid rgba(24,33,22,.11);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(28,38,21,.08);
  position:relative;
}

.split-band > div{
  min-height:390px;
  padding:clamp(38px,5vw,62px) clamp(28px,4vw,54px);
}

.split-band .side-a{
  background:
    radial-gradient(circle at 0% 100%,rgba(92,138,52,.13),transparent 32%),
    var(--matcha-foam);
  border-right:1px solid rgba(24,33,22,.08);
}

.split-band .side-b{
  background:
    radial-gradient(circle at 100% 0%,rgba(74,79,160,.10),transparent 30%),
    var(--editorial-paper);
}

.split-band h2{
  font-size:clamp(2rem,3.2vw,3.15rem);
  max-width:15ch;
  line-height:1.08;
}

.split-band p{
  color:rgba(24,33,22,.76);
  max-width:55ch;
}

.split-band .eyebrow{
  color:var(--editorial-gold);
}

.split-band .btn{
  margin-top:10px;
}

.split-band::before{
  content:"KI";
  position:absolute;
  right:42%;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  font-family:var(--font-display);
  font-size:clamp(4rem,8vw,8rem);
  color:rgba(49,86,31,.045);
  pointer-events:none;
}

.split-band .side-a ul{
  margin:0 0 20px;
  padding-left:20px;
  color:var(--editorial-green);
}

.split-band .side-a li{
  margin-bottom:7px;
}

.split-band .side-a li::marker{
  color:var(--editorial-accent);
}

/* ---------- 07. Testimonials: quiet editorial cards ---------- */

.section--tight:has(.quote-card){
  background:var(--editorial-paper);
  padding-top:70px;
  padding-bottom:70px;
}

.section--tight:has(.quote-card) > .wrap > h2{
  color:var(--editorial-ink);
  font-size:clamp(2rem,3.5vw,3rem);
}

.quote-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(24,33,22,.10);
  border-left:2px solid var(--editorial-accent);
  border-radius:2px;
  padding:28px 30px;
  color:rgba(24,33,22,.74);
  box-shadow:0 12px 35px rgba(25,34,19,.045);
  position:relative;
}

.quote-card::before{
  content:"“";
  position:absolute;
  top:12px;
  right:22px;
  font-family:var(--font-display);
  font-size:3.2rem;
  color:rgba(49,86,31,.10);
}

.quote-card cite{
  color:var(--editorial-green);
  font-size:.75rem;
  letter-spacing:.03em;
}

/* ---------- 08. CTA: stronger closing frame ---------- */

.cta-band{
  border-radius:2px;
  padding:clamp(38px,5vw,58px) clamp(28px,5vw,56px);
  background:
    linear-gradient(90deg,rgba(25,46,17,.96),rgba(49,86,31,.90)),
    url("../3Sec/matchafarm.png") center/cover;
  box-shadow:0 20px 55px rgba(29,43,20,.13);
}

.cta-band::before{
  width:280px;
  height:280px;
  right:-70px;
  top:-90px;
  border-color:rgba(255,255,255,.17);
}

.cta-band::after{
  content:"";
  position:absolute;
  right:30px;
  bottom:-80px;
  width:180px;
  height:180px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}

.cta-band h2{
  font-size:clamp(1.9rem,3vw,3rem);
}

.cta-band p{
  color:rgba(255,255,255,.78);
}

/* ---------- 09. Footer: bring back restraint ---------- */

.site-footer{
  background:#F1EEDF;
  color:var(--editorial-green);
  padding:60px 0 26px;
}

.site-footer h4{
  color:var(--editorial-gold);
}

.site-footer .brand-name,
.site-footer .brand-name small,
.footer-links a,
.footer-bottom{
  color:var(--editorial-green);
}

.footer-links a:hover{
  color:var(--editorial-gold);
}

.footer-bottom{
  border-top-color:rgba(49,86,31,.16);
}

/* ---------- responsive ---------- */

@media (max-width:980px){
  .hero-powder-wrap{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    padding-left:28px;
    padding-right:28px;
  }

  .hero-powder-backdrop{
    left:0;
    opacity:.34;
  }

  .hero-powder-vignette{
    background:
      linear-gradient(180deg,rgba(245,241,230,.90) 0%,rgba(245,241,230,.72) 46%,rgba(8,16,8,.22) 100%);
  }

  .hero-powder-copy{
    grid-column:1;
    grid-row:1;
    max-width:720px;
  }

  .hero-powder-title{
    max-width:12ch;
  }

  .hero-powder-bottom{
    grid-column:1;
    grid-row:3;
  }

  .promise-orbit{
    gap:0 30px;
  }

  .shared-success-layout{
    grid-template-columns:1fr;
  }

  .success-wheel{
    justify-self:center;
  }
}

@media (max-width:760px){
  .hero-powder{
    min-height:auto;
  }

  .hero-powder-wrap{
    min-height:auto;
    padding:48px 20px 34px;
  }

  .hero-powder-backdrop{
    left:0;
    opacity:.20;
  }

  .hero-powder-title{
    font-size:clamp(2.5rem,11vw,4rem) !important;
    max-width:10ch;
  }

  .hero-powder-lede{
    max-width:50ch;
  }

  .hero-powder-bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-powder-bottom .btn{
    width:100%;
    justify-content:center;
  }

  .promise-section{
    padding:60px 0 54px;
  }

  .promise-intro{
    margin-bottom:24px;
  }

  .promise-intro h2{
    font-size:clamp(2.35rem,10vw,3.3rem);
  }

  .promise-orbit{
    grid-template-columns:1fr;
    gap:0;
  }

  .promise-side--right{
    margin-top:0;
  }

  .promise-node-button{
    min-height:82px;
    grid-template-columns:42px minmax(0,1fr) 34px;
    padding:14px 0;
  }

  .promise-node-copy strong{
    font-size:.95rem;
  }

  .promise-node-copy small{
    display:none;
  }

  .promise-footer{
    margin-top:28px;
  }

  .promise-footer p{
    font-size:1.05rem;
  }

  .synergy-layout{
    min-height:auto;
  }

  .synergy-copy{
    padding:62px 0 58px;
  }

  .synergy-copy h2{
    max-width:12ch;
    font-size:clamp(2.5rem,11vw,4rem);
  }

  .synergy-features{
    grid-template-columns:1fr;
    gap:0;
  }

  .synergy-feature,
  .synergy-feature:first-child{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:16px 0;
  }

  .synergy-feature:last-child{
    border-bottom:0;
  }

  .shared-success{
    padding:62px 0;
  }

  .shared-success-copy h2{
    max-width:14ch;
    font-size:clamp(2.35rem,10vw,3.4rem);
  }

  .success-wheel{
    width:min(88vw,410px);
    margin:18px auto 0;
  }

  .split-band > div{
    min-height:auto;
    padding:38px 26px;
  }

  .split-band .side-a{
    border-right:0;
    border-bottom:1px solid rgba(24,33,22,.08);
  }

  .split-band::before{
    display:none;
  }

  .section--tight:has(.quote-card){
    padding-top:56px;
    padding-bottom:56px;
  }

  .quote-card{
    min-height:160px;
  }

  .cta-band{
    padding:38px 24px;
  }
}

@media (max-width:380px){

  .hero-powder-title{
    font-size:2.35rem !important;
  }
}

/* =========================================================
   KI COLLECTION — PREMIUM EDITORIAL REDESIGN
   Appended overrides: scoped to products.html collection page.
   Existing content, buttons, modals, i18n and interactions remain intact.
   ========================================================= */

/* --- Collection hero: cinematic stone-mill editorial --- */
.page-hero.collection-hero{
  min-height:clamp(590px,72vh,760px);
  padding:0;
  display:flex;
  align-items:flex-end;
  background-color:#1d2718;
  background-position:center 52%;
  position:relative;
  isolation:isolate;
}
.page-hero.collection-hero__video,
.collection-hero__video{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  pointer-events:none;
}
.page-hero.collection-hero::before{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(9,18,8,.88) 0%,rgba(9,18,8,.67) 34%,rgba(9,18,8,.24) 68%,rgba(9,18,8,.08) 100%),
    linear-gradient(0deg,rgba(7,14,6,.72) 0%,rgba(7,14,6,.08) 48%,rgba(7,14,6,.18) 100%);
}
.page-hero.collection-hero::after{
  content:"";
  position:absolute;
  width:min(34vw,460px);
  height:min(34vw,460px);
  right:-8%;
  top:10%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:inset 0 0 0 26px rgba(255,255,255,.025);
  pointer-events:none;
}
.page-hero.collection-hero .wrap{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:130px;
  padding-bottom:88px;
}
.page-hero.collection-hero .eyebrow{
  color:#d4b96b;
  letter-spacing:.28em;
  font-size:.68rem;
  margin-bottom:22px;
}
.page-hero.collection-hero .eyebrow::before{ background:#d4b96b; width:38px; }
.page-hero.collection-hero h1{
  max-width:15ch;
  font-size:clamp(3.1rem,6vw,6rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin-bottom:26px;
  text-shadow:0 4px 28px rgba(0,0,0,.35);
}
.collection-hero-lede{
  max-width:49ch;
  font-size:clamp(1rem,1.55vw,1.24rem);
  line-height:1.75;
  color:rgba(255,254,251,.86);
  margin:0;
}
.page-hero.collection-hero .enso{
  width:150px;
  height:150px;
  position:absolute;
  right:6%;
  bottom:7%;
  z-index:2;
  color:rgba(255,255,255,.17);
}

/* --- Product intro --- */
.collection-lineup--editorial{
  padding-top:110px;
  padding-bottom:116px;
  background:
    radial-gradient(circle at 50% 0%,rgba(156,203,59,.09),transparent 30%),
    var(--washi);
}

/* --- Product cards: museum/editorial composition --- */

/* --- Two ways to drink: gallery meets editorial spread --- */
.km-flow{
  min-height:760px;
  padding:112px 28px 120px;
  background:#20231b;
  color:#f3eee1;
}
.km-flow__bg{
  opacity:.48;
}
.km-flow__row{ height:47%; }
.km-flow__track{ gap:10px; padding-right:10px; }
.km-flow__track img{
  width:clamp(230px,23vw,360px);
  max-width:none;
  filter:saturate(.78) brightness(.62) contrast(1.02);
}
.km-flow__scrim{
  background:
    linear-gradient(180deg,rgba(20,18,13,.91) 0%,rgba(20,18,13,.70) 20%,rgba(20,18,13,.80) 80%,rgba(20,18,13,.95) 100%),
    linear-gradient(90deg,rgba(20,18,13,.70),rgba(20,18,13,.18) 32%,rgba(20,18,13,.18) 68%,rgba(20,18,13,.70));
}
.km-flow__content{
  max-width:1080px;
}
.km-flow__heading{
  font-size:clamp(2.8rem,5vw,4.7rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:54px;
  text-shadow:none;
}
.km-flow__heading::before{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin:0 auto 17px;
  background:#d4b96b;
}
.km-flow__panels{
  gap:18px;
}
.km-flow__panel{
  min-height:410px;
  padding:38px 38px 34px;
  border-radius:4px;
  border:1px solid rgba(243,238,225,.22);
  background:rgba(245,241,229,.075);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.16);
}
.km-flow__panel:first-child{
  border-top:3px solid #9fb68b;
}
.km-flow__panel:last-child{
  border-top:3px solid #86adc2;
}
.km-flow__panel-title{
  font-size:1.45rem;
  line-height:1.2;
  padding-bottom:18px;
  border-bottom:1px solid rgba(243,238,225,.16);
}
.km-flow__panel:first-child .km-flow__panel-title{ color:#b9cfa8; }
.km-flow__panel:last-child .km-flow__panel-title{ color:#a9c9d8; }
.km-flow__item-title{
  font-size:.92rem;
  letter-spacing:.01em;
}
.km-flow__item-desc{
  color:rgba(243,238,225,.76);
  font-size:.88rem;
  line-height:1.8;
}
.km-flow__chips li{
  padding:.48rem .78rem;
  border-color:rgba(243,238,225,.18);
  background:rgba(243,238,225,.06);
  font-size:.74rem;
}

/* --- Product page responsive polish --- */
@media (max-width:900px){
  .page-hero.collection-hero{
    min-height:650px;
  }
  .page-hero.collection-hero .wrap{
    padding-bottom:70px;
  }
  .page-hero.collection-hero h1{
    max-width:13ch;
    font-size:clamp(3rem,9vw,4.8rem);
  }
}

@media (max-width:620px){
  .page-hero.collection-hero{
    min-height:640px;
    background-position:58% center;
  }
  .collection-hero__video{ object-position:58% center; }
  .page-hero.collection-hero::before{
    background:
      linear-gradient(180deg,rgba(9,18,8,.40) 0%,rgba(9,18,8,.54) 35%,rgba(9,18,8,.91) 100%),
      linear-gradient(90deg,rgba(9,18,8,.30),rgba(9,18,8,.08));
  }
  .page-hero.collection-hero::after{ width:230px; height:230px; right:-90px; top:12%; }
  .page-hero.collection-hero .wrap{
    padding:108px 22px 58px;
  }
  .page-hero.collection-hero .enso{
    width:92px;
    height:92px;
    right:24px;
    bottom:25px;
  }
  .page-hero.collection-hero h1{
    max-width:100%;
    font-size:clamp(2.7rem,12vw,4rem);
    line-height:1.01;
  }
  .collection-hero-lede{
    max-width:34ch;
    font-size:.96rem;
    line-height:1.65;
  }
  .collection-lineup--editorial{
    padding:76px 0 80px;
  }

  .km-flow{
    min-height:auto;
    padding:78px 18px 82px;
  }
  .km-flow__bg{ opacity:.30; }
  .km-flow__row{ height:48%; }
  .km-flow__track img{ width:230px; }
  .km-flow__heading{
    font-size:clamp(2.45rem,11vw,3.5rem);
    margin-bottom:34px;
  }
  .km-flow__panels{ gap:14px; }
  .km-flow__panel{
    min-height:0;
    padding:30px 24px;
    border-radius:3px;
  }
  .km-flow__panel-title{ font-size:1.25rem; }
}

@media (max-width:380px){
  .page-hero.collection-hero h1{ font-size:2.55rem; }
  .page-hero.collection-hero .wrap{ padding-left:18px; padding-right:18px; }
  .km-flow{ padding-left:14px; padding-right:14px; }
}

/* =========================================
   KI — 10% OFF WELCOME POPUP
   ========================================= */

.welcome-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.welcome-popup.is-visible {
  visibility: visible;
  opacity: 1;
}


/* Overlay */

.welcome-popup__overlay {
  position: absolute;
  inset: 0;

  background: rgba(12, 24, 17, 0.58);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* Main card */

.welcome-popup__card {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;

  width: min(760px, 100%);

  background: #f5f0e6;

  overflow: hidden;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.22);

  transform: translateY(20px) scale(0.97);

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.welcome-popup.is-visible .welcome-popup__card {
  transform: translateY(0) scale(1);
}


/* Image */

.welcome-popup__image {
  min-height: 440px;
  overflow: hidden;
}

.welcome-popup__image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.8s ease;
}

.welcome-popup.is-visible .welcome-popup__image img {
  transform: scale(1.02);
}


/* Content */

.welcome-popup__content {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 58px 52px;
}

.welcome-popup__eyebrow {
  display: block;

  margin-bottom: 18px;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: #526b45;
}

.welcome-popup__content h2 {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 0.98;

  letter-spacing: -0.035em;

  color: #173524;
}

.welcome-popup__text {
  max-width: 390px;

  margin: 24px 0 28px;

  font-family: Arial, sans-serif;

  font-size: 14px;
  line-height: 1.7;

  color: #536056;
}


/* Form */

.welcome-popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
}

.welcome-popup__form input {
  width: 100%;
  box-sizing: border-box;

  padding: 15px 16px;

  border: 1px solid rgba(23, 53, 36, 0.25);

  border-radius: 0;

  outline: none;

  background: rgba(255, 255, 255, 0.55);

  font-family: Arial, sans-serif;
  font-size: 14px;

  color: #173524;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.welcome-popup__form input::placeholder {
  color: #7b827d;
}

.welcome-popup__form input:focus {
  border-color: #526b45;
  background: #fff;
}


.welcome-popup__form button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 15px 17px;

  border: 0;

  background: #173524;
  color: #f5f0e6;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.14em;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.2s ease;
}

.welcome-popup__form button:hover {
  background: #2b5038;
}

.welcome-popup__form button span {
  font-size: 18px;
  line-height: 1;
}


/* Fine print */

.welcome-popup__fineprint {
  margin: 16px 0 0;

  max-width: 370px;

  font-family: Arial, sans-serif;

  font-size: 10px;
  line-height: 1.5;

  color: #7a817b;
}


/* Close button */

.welcome-popup__close {
  position: absolute;

  top: 14px;
  right: 14px;

  z-index: 5;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: rgba(245, 240, 230, 0.9);

  color: #173524;

  font-size: 22px;
  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.welcome-popup__close:hover {
  transform: rotate(90deg);
  background: #ffffff;
}


/* Accessibility */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 640px) {

  .welcome-popup {
    padding: 18px;
  }

  .welcome-popup__card {
    display: flex;
    flex-direction: column;

    max-height: calc(100vh - 36px);

    overflow-y: auto;
  }

  .welcome-popup__image {
    min-height: 190px;
    height: 190px;
  }

  .welcome-popup__content {
    padding: 32px 26px 30px;
  }

  .welcome-popup__content h2 {
    font-size: 37px;
  }

  .welcome-popup__text {
    margin-top: 18px;
    margin-bottom: 22px;
  }

  .welcome-popup__close {
    top: 10px;
    right: 10px;
  }
}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

  .welcome-popup,
  .welcome-popup__card,
  .welcome-popup__image img,
  .welcome-popup__close,
  .welcome-popup__form button {
    transition: none;
  }
}
body.popup-open {
  overflow: hidden;
}