:root{
  --ink:#132140;
  --ink-soft:#33456a;
  --paper:#F8F8F5;
  --paper-2:#FFFFFF;
  --mist:#E7EEEF;
  --mist-deep:#D7E4E6;
  --stone:#8C8578;
  --teal:#0E6E76;
  --teal-deep:#0A5359;
  --teal-tint:#DCEBEA;
  --line:#DDD9CE;
  --line-on-ink:rgba(255,255,255,.16);
  --max:1160px;
  --serif:"Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}
img{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  margin:0;
  letter-spacing:.03em;
}

p{margin:0;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:19px 44px;
  background:var(--teal);
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.08em;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{background:var(--teal-deep);}
.btn.on-ink{background:#fff;color:var(--ink);}
.btn.on-ink:hover{background:var(--mist);}

.sub-cta{
  margin-top:16px;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:.05em;
}
.sub-cta.on-ink{color:rgba(255,255,255,.68);}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(248,248,245,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.logo-mark{height:26px;width:auto;}
nav.primary{
  display:flex;
  align-items:center;
}
nav.primary a{
  font-size:13.5px;
  text-decoration:none;
  color:var(--ink-soft);
  letter-spacing:.06em;
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
nav.primary a:not(:first-child){
  margin-left:28px;
}
nav.primary a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
nav.primary a:hover::after{transform:scaleX(1);}
nav.primary a:hover{color:var(--ink);}
/* The header CTA reads as a refined hairline button rather than a
   solid block: transparent fill, a 1px rule, generous letter-spacing,
   and a fill-on-hover transition. It intentionally overrides the
   base .btn look. The selector "nav.primary a.nav-cta" (0,2,2) is used
   throughout so it reliably wins over "nav.primary a" (0,1,2), which
   previously left the CTA text navy-on-teal and unreadable. */
nav.primary a.nav-cta{
  padding:11px 28px;
  background:transparent;
  border:1px solid var(--teal);
  color:var(--teal-deep);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.14em;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
nav.primary a.nav-cta:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
nav.primary a.nav-cta::after{
  display:none;
}
.menu-toggle{display:none;}
.nav-right-mobile{
  display:none;
  align-items:center;
  gap:14px;
}
.nav-cta-mobile{
  display:none;
  background:transparent;
  border:1px solid var(--teal);
  color:var(--teal-deep);
  font-weight:500;
  letter-spacing:.1em;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav-cta-mobile:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#EFF4F4 0%, var(--paper) 78%);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:24px;
  padding-top:88px;
  padding-bottom:0;
  min-height:640px;
}
.hero-copy{padding-bottom:88px;will-change:transform;}
.hero-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-bottom:26px;
}
.hero-brand-mark{
  font-family:var(--serif);
  font-size:13px;
  color:var(--teal-deep);
  letter-spacing:.14em;
  margin-bottom:10px;
}
.hero-brand-word{
  height:50px;
  width:auto;
}
.hero h1{
  font-size:46px;
  line-height:1.55;
  color:var(--ink);
}
.hero .sub{
  margin-top:26px;
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:2;
}
.hero .cta-block{margin-top:44px;}
.hero-visual{
  position:relative;
  height:100%;
  min-height:600px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hero-glow{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, var(--mist-deep) 0%, rgba(215,228,230,0) 72%);
  top:8%;
  left:50%;
  transform:translateX(-50%);
  will-change:transform;
}
.hero-product{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  will-change:transform;
}
.hero-main{
  position:relative;
  height:560px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 40px 46px rgba(19,33,64,.16));
  z-index:2;
}
.hero-mini{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-right:20px;
  z-index:1;
}
.hero-mini img{
  height:280px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(19,33,64,.14));
}

/* ---------- Section shell ---------- */
section{padding:130px 0;}
section.tight{padding:100px 0;}
section.on-mist{background:var(--mist);}
section.on-ink{background:var(--ink); color:#fff;}
section.on-paper2{background:var(--paper-2);}

.kicker{
  font-family:var(--serif);
  font-size:14px;
  color:var(--teal-deep);
  letter-spacing:.14em;
  display:block;
  margin-bottom:20px;
}
.on-ink .kicker{color:#8FC6C9;}

.section-head{
  max-width:640px;
  margin:0 0 64px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:34px;line-height:1.5;}
.section-head .desc{
  margin-top:22px;
  font-size:15px;
  color:var(--ink-soft);
  line-height:2;
}
.on-ink .section-head .desc{color:rgba(255,255,255,.72);}

/* ---------- Intro lead ---------- */
.lead-block{max-width:720px;margin:0 auto;text-align:center;}
.lead-block .kicker{margin-bottom:34px;}
.lead-block p{font-size:16px;color:var(--ink-soft);line-height:2.15;text-wrap:pretty;}
.lead-block p + p{margin-top:14px;}
.nowrap{white-space:nowrap;}
.lead-drop{
  display:block;
  margin:44px auto 0;
}
.lead-block .em{
  display:block;
  margin-top:22px;
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
  letter-spacing:.04em;
  text-wrap:pretty;
}

/* ---------- Filter steps ---------- */
.filter-layout{
  display:block;
}
.filter-visual{
  margin-bottom:64px;
}
.filter-visual-inner{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.filter-visual-item{opacity:1;}
.filter-visual-item img{
  width:100%;
  max-width:96px;
  height:auto;
  display:block;
  filter:drop-shadow(0 14px 18px rgba(19,33,64,.14));
}
.step-reveal{display:none;}
.steps{
  position:relative;
  max-width:820px;
  margin:0 auto;
}
.steps::before{
  content:"";
  position:absolute;
  left:29px;
  top:14px;
  bottom:14px;
  width:1px;
  background:var(--line);
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:60px 1fr;
  gap:32px;
  padding:0 0 64px;
}
.step:last-child{padding-bottom:0;}
/* Desktop only: swap the static trio for a per-step fade. Each STEP
   grows a third column for its own filter photo, which fades and
   lifts in as that step crosses the viewport centre, and fades back
   out on the way past — driven by the same "active"-style toggle
   used elsewhere, just scoped to one image instead of a shared panel. */
@media (min-width:981px){
  .filter-visual{display:none;}
  .steps{max-width:900px;}
  .step{grid-template-columns:60px 1fr 130px;align-items:center;}
  .step-reveal{
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .step-reveal.visible{
    opacity:1;
    transform:translateY(0);
  }
  .step-reveal img{
    width:100%;
    max-width:104px;
    height:auto;
    filter:drop-shadow(0 14px 18px rgba(19,33,64,.14));
  }
}
.step-num{
  position:relative;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--paper-2);
  border:1px solid var(--teal);
  color:var(--teal-deep);
  font-family:var(--serif);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.step-name{
  font-family:var(--serif);
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--stone);
  margin-bottom:8px;
  display:block;
}
.step h3{
  font-size:23px;
  color:var(--ink);
  margin-bottom:18px;
}
.step p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:2;
  max-width:56ch;
}
.step .badge{
  display:inline-block;
  margin-top:22px;
  padding:7px 16px;
  border:1px solid var(--line);
  font-size:12.5px;
  color:var(--stone);
  letter-spacing:.04em;
}

/* ---------- Story ---------- */
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.story-num-inline{
  display:inline-block;
  font-size:1.85em;
  color:var(--teal-deep);
  line-height:.7;
  vertical-align:-.14em;
  margin-right:.02em;
}
.story-copy,.quotes{position:relative;}
.story-grid .story-copy p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:2.1;
}
.story-grid .story-copy p + p{margin-top:20px;}
.quotes{display:flex;flex-direction:column;gap:26px;}
.quote{
  padding:26px 28px;
  background:var(--paper-2);
  border-left:2px solid var(--teal);
  font-family:var(--serif);
  font-size:16px;
  color:var(--ink);
  line-height:1.9;
}
.name-meaning{
  margin:80px auto 0;
  padding:60px 64px;
  max-width:640px;
  border:1px solid var(--line);
  text-align:center;
  will-change:transform;
}
.story-photo{
  margin:70px 0 0;
}
.story-photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
.story-photo figcaption{
  margin-top:18px;
  font-family:var(--serif);
  font-size:12.5px;
  color:var(--stone);
  letter-spacing:.04em;
  text-align:center;
}
.name-meaning-mark{
  display:block;
  font-family:var(--serif);
  font-size:48px;
  color:var(--teal);
  line-height:1;
  margin-bottom:8px;
}
.name-meaning h3{font-size:26px;margin-bottom:26px;}
.name-meaning p{font-size:14.5px;color:var(--ink-soft);line-height:2.15;}
.name-meaning p + p{margin-top:16px;}

/* ---------- Daily scenes ---------- */
.scenes{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:70px;
}
.scene{
  background:var(--paper-2);
  padding:36px 20px 32px;
  text-align:center;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.8;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.scene-icon{
  width:28px;
  height:28px;
  color:var(--teal);
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:16px;
}
.feature-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.feature-duo .f h3{font-size:20px;margin-bottom:16px;color:var(--ink);}
.feature-duo .f p{font-size:14.5px;color:var(--ink-soft);line-height:2.05;}
.feature-duo .f p + p{margin-top:14px;}

/* ---------- Design / colors ---------- */
.colorway{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
}
.colorway .cw{
  background:var(--paper-2);
  padding:70px 50px 56px;
  text-align:center;
  overflow:hidden;
}
.colorway .cw.black{background:var(--ink);color:#fff;}
.colorway img{height:400px;width:auto;margin:0 auto 34px;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(19,33,64,.14));}
.cw.black img{filter:drop-shadow(0 26px 34px rgba(0,0,0,.45));}
.cw .swatch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.08em;
  margin-bottom:14px;
}
.swatch-dot{width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid var(--line);}
.cw.black .swatch-dot{background:var(--ink);border-color:#555;}
.cw p{font-size:13.5px;color:var(--ink-soft);max-width:30ch;margin:0 auto;line-height:1.9;}
.cw.black p{color:rgba(255,255,255,.7);}

/* ---------- Quality / inspection ---------- */
.trust-block{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.trust-visual{
  border:1px solid var(--line);
  padding:56px 40px;
  text-align:center;
  background:var(--paper-2);
}
.trust-visual .big{
  font-family:var(--serif);
  font-size:15px;
  color:var(--teal-deep);
  letter-spacing:.1em;
  margin-bottom:10px;
}
.trust-visual .status{
  font-size:13px;
  color:var(--stone);
  letter-spacing:.04em;
}
.trust-copy p{font-size:14.5px;color:var(--ink-soft);line-height:2.1;}
.trust-copy p + p{margin-top:16px;}
.trust-note{
  margin-top:26px;
  font-size:12.5px;
  color:var(--stone);
  padding-top:18px;
  border-top:1px solid var(--line);
}

/* ---------- Filtration performance (sub-block of the filter section) ---------- */
.perf{
  margin-top:96px;
  padding-top:72px;
  border-top:1px solid var(--line);
}
.perf-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.perf-head h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:24px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 16px;
}
.perf-head p{font-size:13.5px;line-height:2;color:var(--ink-soft);}
.perf-stats{max-width:900px;margin:0 auto;}
.perf-stats .stat{padding:34px 24px;}
.perf-stats .stat .n{font-size:34px;}
.perf-stats .stat .l{font-size:12.5px;margin-top:12px;}
.perf-list{
  max-width:900px;
  margin:28px auto 0;
  padding:28px 32px;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.perf-list-head{
  font-family:var(--serif);
  font-size:13.5px;
  color:var(--teal-deep);
  letter-spacing:.04em;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.perf-list ul{
  list-style:none;
  margin:0;
  padding:0;
  -webkit-columns:3;
  columns:3;
  -webkit-column-gap:32px;
  column-gap:32px;
}
.perf-list li{
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-soft);
  padding:3px 0;
  -webkit-column-break-inside:avoid;
  break-inside:avoid;
}
.perf-list-plus{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink);
}
.perf-note{
  max-width:900px;
  margin:18px auto 0;
  font-size:12px;
  color:var(--stone);
}
@media (max-width:760px){
  .perf{margin-top:72px;padding-top:56px;}
  .perf-head h3{font-size:20px;}
  .perf-stats .stat{padding:24px 20px;}
  .perf-list{padding:24px 20px;}
  .perf-list ul{-webkit-columns:2;columns:2;-webkit-column-gap:16px;column-gap:16px;}
  .perf-list li{font-size:12px;}
}

/* ---------- Sensory evaluation ---------- */
.taste-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:900px;
  margin:0 auto;
}
.taste-card{
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:36px 32px;
}
.taste-card-label{
  display:block;
  font-family:var(--serif);
  font-size:13px;
  color:var(--teal-deep);
  letter-spacing:.06em;
  margin-bottom:18px;
}
.taste-card-score{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.taste-card-score strong{
  display:block;
  margin-top:6px;
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  color:var(--teal-deep);
  font-weight:600;
}
.taste-card ul{
  margin:0;
  padding-left:1.1em;
  list-style:disc;
}
.taste-card li{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.9;
}
.taste-card li + li{margin-top:8px;}
@media (max-width:760px){
  .taste-compare{grid-template-columns:1fr;gap:24px;}
}

/* ---------- Pricing ---------- */
.price-card{
  max-width:520px;
  margin:0 auto;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:64px 56px;
  text-align:center;
}
.price-num{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  font-family:var(--serif);
  letter-spacing:.02em;
}
.price-label{font-size:16px;color:var(--ink-soft);}
.price-amount{font-size:52px;color:var(--ink);}
.price-unit{font-size:18px;color:var(--ink-soft);}
.price-tax-inline{
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--stone);
  letter-spacing:.05em;
}
.price-list{
  margin:40px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 12px;
  text-align:left;
}
.price-list li{
  font-size:13.5px;
  color:var(--ink-soft);
  padding-left:20px;
  position:relative;
}
.price-list li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:8px;height:1px;
  background:var(--teal);
}
.price-card .btn{margin-top:44px;width:100%;}
.price-foot{margin-top:52px;font-size:14px;color:var(--ink-soft);line-height:1.9;max-width:520px;margin-left:auto;margin-right:auto;}

/* ---------- Trust stats ---------- */
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
.stat{
  background:var(--paper-2);
  padding:52px 34px;
  text-align:center;
}
.stat .n{
  font-family:var(--serif);
  font-size:38px;
  line-height:1;
  color:var(--teal-deep);
  height:44px;
  display:flex;
  align-items:baseline;
  justify-content:center;
}
.stat .n small{font-size:16px;margin-left:2px;}
.stat .n.stat-text{font-size:26px;letter-spacing:.06em;}
.stat .l{margin-top:14px;font-size:13.5px;color:var(--ink-soft);line-height:1.85;text-wrap:pretty;}
.local-copy{max-width:700px;margin:0 auto 60px;text-align:center;font-size:14.5px;color:var(--ink-soft);line-height:2.1;}
.taste-highlight-lead{
  text-align:center;
  font-family:var(--serif);
  font-size:13px;
  color:var(--teal-deep);
  letter-spacing:.06em;
  margin:64px 0 28px;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto;}
details{
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
details summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:15.5px;
  color:var(--ink);
  font-weight:500;
}
details summary::-webkit-details-marker{display:none;}
details summary .q-mark{
  font-family:var(--serif);
  color:var(--teal);
  font-size:16px;
}
details summary .plus{
  flex:none;
  width:22px;height:22px;
  position:relative;
}
details summary .plus::before,
details summary .plus::after{
  content:"";
  position:absolute;
  background:var(--ink-soft);
  transition:transform .25s ease;
}
details summary .plus::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);}
details summary .plus::after{top:0;left:50%;width:1px;height:100%;transform:translateX(-50%);}
details[open] summary .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
details .a{
  margin-top:16px;
  padding-left:30px;
  font-size:14px;
  color:var(--ink-soft);
  line-height:2;
  max-width:64ch;
}

/* ---------- Final CTA ---------- */
.cta-final{text-align:center;position:relative;overflow:hidden;}
.cta-glow{
  position:absolute;
  width:640px;
  height:640px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(15,110,118,.35) 0%, rgba(15,110,118,0) 70%);
  top:-10%;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  will-change:transform;
}
.cta-final .wrap{position:relative;}
.cta-final h2{font-size:36px;color:#fff;line-height:1.6;}
.cta-final .desc{
  margin:26px auto 0;
  max-width:520px;
  font-size:14.5px;
  color:rgba(255,255,255,.72);
  line-height:2.1;
}
.cta-final .cta-block{margin-top:48px;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:70px 0 34px;border-top:1px solid var(--line-on-ink);}
.foot-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:48px;
  border-bottom:1px solid var(--line-on-ink);
  flex-wrap:wrap;
  gap:36px;
}
.foot-word{font-family:var(--serif);font-size:20px;color:#fff;letter-spacing:.1em;}
.foot-sub{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.45);}
.foot-nav{display:flex;flex-wrap:wrap;}
.foot-nav a{font-size:13px;text-decoration:none;color:rgba(255,255,255,.65);margin-left:34px;margin-bottom:10px;}
.foot-nav a:first-child{margin-left:0;}
.foot-nav a:hover{color:#fff;}
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  flex-wrap:wrap;
  gap:16px;
  font-size:12px;
  color:rgba(255,255,255,.4);
}
.foot-bottom .legal{display:flex;flex-wrap:wrap;}
.foot-bottom .legal a{margin-left:24px;}
.foot-bottom .legal a:first-child{margin-left:0;}
.foot-bottom a{text-decoration:none;color:rgba(255,255,255,.5);}
.foot-bottom a:hover{color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .filter-visual-item img{max-width:78px;}
  .story-grid,.feature-duo,.trust-block{grid-template-columns:1fr;gap:48px;}
  .name-meaning{padding:48px 32px;}
  .scenes{grid-template-columns:repeat(3,1fr);}
  .scene:last-child{grid-column:span 2;}
  .stats-row{grid-template-columns:1fr;}
  .colorway{grid-template-columns:1fr;}
  .hero .wrap{grid-template-columns:1fr;min-height:auto;}
  .hero-visual{order:-1;min-height:360px;padding-top:40px;}
  .hero-main{height:340px;}
  .hero-mini img{height:170px;}
  .hero-copy{padding-bottom:60px;}
}
/* Nav switches to the off-canvas menu earlier than the rest of the
   mobile layout: at 760–1080px there isn't room for five links plus
   the CTA on one line, and shrinking them further just wraps each
   label onto two lines. Handing the whole nav to the same hamburger
   pattern used on phones fixes that cleanly. */
@media (max-width:1080px){
  nav.primary{display:none;}
  .nav-row a:first-child{
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
  }
  .logo-mark{
    height:22px;
    max-width:100%;
  }
  .nav-right-mobile{
    display:flex;
    flex-shrink:0;
  }
  .nav-cta-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:92px;
    flex:none;
    padding:8px 6px;
    font-size:11.5px;
    line-height:1.35;
    letter-spacing:.02em;
    white-space:normal;
  }
  .menu-toggle{
    display:flex;
    flex-direction:column;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
  }
  .menu-toggle span{width:22px;height:1px;background:var(--ink);}
  .menu-toggle span:not(:first-child){margin-top:5px;}
}
/* Mobile nav lives outside <header> entirely (not nested inside its
   position:sticky), because iOS Safari has a well-known bug where a
   position:fixed element nested inside a position:sticky ancestor
   gets treated as if it scrolls with the page instead of staying
   pinned to the viewport. Keeping it as a sibling of <header> sidesteps
   that bug rather than working around it. */
.mobile-nav{
  display:none;
  position:fixed;
  top:78px;
  right:0;
  bottom:0;
  left:0;
  background:var(--paper);
  flex-direction:column;
  align-items:flex-start;
  padding:36px 28px;
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:100;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{
  font-size:16px;
  text-decoration:none;
  color:var(--ink-soft);
  padding:6px 0;
}
.mobile-nav a:not(:first-child){margin-top:26px;}
.mobile-nav a:hover{color:var(--ink);}
@media (max-width:1080px){
  .mobile-nav{display:flex;}
}
@media (max-width:760px){
  .wrap{padding:0 22px;}
  section{padding:88px 0;}
  .hero{padding-top:0;}
  .hero .wrap{padding-top:32px;gap:36px;}
  .hero-visual{padding-top:16px;}
  .hero h1{font-size:32px;}
  .hero .sub{max-width:none;}
  .section-head h2{font-size:26px;}
  .scenes{grid-template-columns:repeat(2,1fr);}
  .price-card{padding:48px 28px;}
  .price-list{grid-template-columns:1fr;}
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  right:26px;
  bottom:26px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(248,248,245,.92);
  backdrop-filter:blur(6px);
  border:1px solid var(--teal);
  color:var(--teal-deep);
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .3s ease, color .3s ease;
  z-index:60;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--teal);
  color:#fff;
}
@media (max-width:760px){
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}

/* ---------- Contact form ---------- */
.form-hero{padding:64px 0 130px;}
.form-hero .section-head{margin:0 auto 0;}
.form-shell{max-width:720px;margin:0 auto;}
.form-steps{
  display:flex;
  justify-content:center;
  gap:0;
  margin:0 auto 70px;
  max-width:520px;
}
.form-step{
  flex:1;
  text-align:center;
  padding-bottom:16px;
  border-bottom:2px solid var(--line);
  font-family:var(--serif);
  font-size:13px;
  color:var(--stone);
  letter-spacing:.05em;
  position:relative;
}
.form-step .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--stone);
  font-size:12px;
  margin-right:8px;
}
.form-step.is-active{color:var(--teal-deep);border-bottom-color:var(--teal);}
.form-step.is-active .num{border-color:var(--teal);color:var(--teal-deep);}
.form-step.is-done{color:var(--ink-soft);border-bottom-color:var(--teal);}
.form-step.is-done .num{background:var(--teal);border-color:var(--teal);color:#fff;}

.form-notice{
  background:var(--teal-tint);
  border:1px solid var(--teal);
  padding:20px 24px;
  font-size:13.5px;
  color:var(--teal-deep);
  line-height:1.9;
  margin-bottom:48px;
}
.form-notice ul{margin:8px 0 0;padding-left:1.2em;}

.field{margin-bottom:32px;}
.field-label{
  display:block;
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  margin-bottom:10px;
}
.field-label .req{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  background:var(--teal);
  color:#fff;
  font-size:10.5px;
  letter-spacing:.05em;
  vertical-align:middle;
}
.field-label .opt{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border:1px solid var(--line);
  color:var(--stone);
  font-size:10.5px;
  letter-spacing:.05em;
  vertical-align:middle;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:14px 16px;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .25s ease;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.9;}
.field-error{
  margin-top:8px;
  font-size:12.5px;
  color:#B0413E;
}
.field-hint{
  margin-top:8px;
  font-size:12.5px;
  color:var(--stone);
}
.field.has-error input,
.field.has-error textarea{border-color:#B0413E;}
.radio-group{display:flex;gap:28px;flex-wrap:wrap;}
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  color:var(--ink-soft);
  cursor:pointer;
}
.radio-option input{accent-color:var(--teal);width:16px;height:16px;}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:24px;
  border:1px solid var(--line);
  background:var(--mist);
}
.check-row input{margin-top:4px;accent-color:var(--teal);width:16px;height:16px;flex:none;}
.check-row label{font-size:13.5px;color:var(--ink-soft);line-height:1.9;}
.check-row a{color:var(--teal-deep);text-decoration:underline;}
.honeypot{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden;}

.form-actions{margin-top:48px;text-align:center;}
.form-actions .btn{width:100%;max-width:360px;}
.form-back{
  display:block;
  margin:22px auto 0;
  background:none;
  border:none;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:underline;
  cursor:pointer;
  text-align:center;
  width:100%;
}

.confirm-table{width:100%;border-top:1px solid var(--line);margin-bottom:8px;}
.confirm-table .row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.confirm-table .row dt{
  font-size:13px;
  color:var(--stone);
  letter-spacing:.03em;
}
.confirm-table .row dd{
  margin:0;
  font-size:14.5px;
  color:var(--ink);
  line-height:1.8;
  white-space:pre-wrap;
}

.complete-block{text-align:center;padding:20px 0 40px;}
.complete-icon{
  width:64px;height:64px;
  border:1px solid var(--teal);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 32px;
}
.complete-block h2{font-size:26px;margin-bottom:20px;}
.complete-block p{font-size:14.5px;color:var(--ink-soft);line-height:2.1;max-width:480px;margin:0 auto;}
.complete-block p + p{margin-top:14px;}
.complete-actions{margin-top:44px;}

@media (max-width:640px){
  .confirm-table .row{grid-template-columns:1fr;gap:6px;}
  .form-steps{max-width:360px;}
  .form-step{font-size:11.5px;}
}

/* ---------- Legal pages (privacy / tokusho) ---------- */
.legal-hero{padding:70px 0 30px;}
.legal-doc{max-width:760px;margin:0 auto;padding-bottom:40px;}
.legal-lead{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:2.1;
  margin-bottom:56px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.legal-article{margin-bottom:40px;}
.legal-article h2{
  font-size:18px;
  color:var(--ink);
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.legal-article p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:2.05;
}
.legal-article p + p{margin-top:14px;}
.legal-article ol,
.legal-article ul{
  margin:14px 0 0;
  padding-left:1.4em;
  font-size:14px;
  color:var(--ink-soft);
  line-height:2;
}
.legal-article li + li{margin-top:4px;}
.legal-contact{
  margin-top:60px;
  padding:32px 36px;
  background:var(--mist);
  border:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:2;
}
.legal-contact strong{color:var(--ink);font-weight:500;}
.legal-meta{
  margin-top:32px;
  font-size:13px;
  color:var(--stone);
  line-height:2;
}
/* ---------- Specifications tabs ---------- */
.spec-tabs{
  display:flex;
  justify-content:center;
  max-width:420px;
  margin:0 auto 50px;
  border:1px solid var(--teal);
}
.spec-tab{
  flex:1;
  padding:14px 20px;
  background:transparent;
  border:none;
  border-right:1px solid var(--teal);
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.spec-tab:last-child{border-right:none;}
.spec-tab.is-active{
  background:var(--teal);
  color:#fff;
}
.spec-tab:hover:not(.is-active){background:var(--teal-tint);}
.spec-panel{display:none;max-width:640px;margin:0 auto;}
.spec-panel.is-active{display:block;}

.legal-table{width:100%;border-top:1px solid var(--line);}
.legal-table .row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.legal-table .row dt{
  font-family:var(--serif);
  font-size:14px;
  color:var(--teal-deep);
  letter-spacing:.02em;
}
.legal-table .row dd{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
  line-height:2;
}
.legal-table .row dd ul{margin:0;padding-left:1.2em;}
.legal-table .row dd li + li{margin-top:2px;}
.legal-table .row dd .note{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:var(--stone);
}
@media (max-width:640px){
  .legal-table .row{grid-template-columns:1fr;gap:8px;}
}