@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f7f5ed;--ink:#242920;--muted:#50564a;--border:#d4d6c7;--green:#dfe9c7;--serif:'Instrument Serif',Georgia,'PingFang SC','Microsoft YaHei',serif;--sans:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:22px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.55 var(--sans)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #54724c;outline-offset:4px}h1,h2,h3,p,figure{margin:0}.wrap{width:min(1260px,calc(100% - 104px));margin:auto}.skip{position:absolute;left:12px;top:-80px;padding:10px;background:var(--ink);color:white;z-index:4}.skip:focus{top:10px}
.top{border-bottom:1px solid var(--border)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.055em;font-weight:800;line-height:1.04;white-space:nowrap}.brand b{font-weight:500}.brand small{display:block;font-size:10px;margin-top:6px;letter-spacing:.14em;color:var(--muted)}.mark{width:38px;height:34px;display:grid;place-items:center;position:relative;background:#dce8c1;border:1px solid var(--ink);border-radius:57% 43% 62% 38% / 58% 42% 58% 42%;transform:rotate(-14deg)}.mark i{width:4px;height:4px;border-radius:50%;background:var(--ink);position:absolute;top:13px;left:12px}.mark i+ i{left:22px;top:15px}.nav nav{display:flex;align-items:center;gap:29px;font-size:13px;font-weight:600}.nav nav a:hover{text-decoration:underline;text-underline-offset:5px}.languages{border:1px solid var(--border);display:flex;border-radius:50px;padding:3px;gap:2px}.languages button{background:none;border:0;border-radius:50px;font-weight:700;font-size:12px;min-height:34px;padding:0 11px}.languages button[aria-pressed=true]{background:var(--ink);color:white}
.hero{padding-block:clamp(55px,7vw,100px)}.hero-copy{padding:15px 0}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--muted)}h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.96}h1{font-size:clamp(73px,8.2vw,129px);margin:23px 0 24px}h1 em,h2 em{color:#506243;font-weight:400}.hero-text{font-size:16px;max-width:420px;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.button{border:1px solid var(--ink);min-height:47px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;font-size:13px;font-weight:700;border-radius:6px}.button span:last-child{font-family:Arial,sans-serif;font-size:17px}.button.dark{background:var(--ink);color:white}.button.dark:hover{background:#454f3a}.button.light:hover{background:var(--green)}
.services{background:var(--green);border-block:1px solid #cbd6b1;padding-block:63px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:17px;margin-bottom:25px}h2{font-size:clamp(57px,6.6vw,94px)}.section-head p{max-width:350px;color:var(--muted);font-size:14px}.service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.service-grid article{background:#f5f6e9;border:1px solid #c8d3ac;padding:16px 13px;border-radius:9px}.service-symbol{font-family:Arial,sans-serif;font-size:20px;color:#4c6340;display:block;margin-bottom:12px}.service-grid h3{font-size:16px;line-height:1.2;font-weight:800}.service-grid p{font-size:13px;color:var(--muted);margin-top:8px}
.work{padding-block:67px 75px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.case{padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fdfbf5;text-align:left}.case img{width:100%;aspect-ratio:1.22;object-fit:cover;object-position:center 42%;display:block;background:#ece9dc}.case[data-image=tt-nail] img{object-position:center 54%}.case[data-image=atelier-nero] img{object-position:center}.case:hover{border-color:#67795c}.case-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:13px}.case-caption strong,.case-caption small{display:block}.case-caption strong{font-size:17px}.case-caption small{font-size:11px;margin-top:2px;color:var(--muted)}.expand{display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;flex:none;font-family:Arial,sans-serif}.contact{background:#ece5d5;border-top:1px solid #d6cdbb;padding-block:61px}.contact-grid{display:grid;grid-template-columns:1fr .48fr;align-items:center;gap:24px}.contact h2{margin:16px 0}.contact p:not(.eyebrow){max-width:420px;color:var(--muted)}.contact .button{margin-top:21px}.qr{justify-self:center;width:min(100%,275px);border:1px solid #d8d0bf;border-radius:15px;background:white;padding:6px}.qr img{display:block;width:100%;height:auto;border-radius:11px}.foot{display:flex;justify-content:space-between;gap:15px;padding-block:20px;font-size:11px;font-weight:700}.foot a{text-decoration:underline;text-underline-offset:4px}
dialog{width:min(90vw,790px);max-height:90dvh;border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--ink);background:var(--paper);position:fixed;margin:auto;text-align:center}dialog::backdrop{background:#151b13cc}dialog form{position:absolute;top:13px;right:13px}dialog form button{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:#fff;font-size:26px}dialog img{display:block;margin:auto;max-width:100%;max-height:75dvh;object-fit:contain}dialog h2{font:700 15px var(--sans);padding:9px 0 2px;letter-spacing:0}
html[lang=zh-CN] h1{font:800 clamp(40px,5.3vw,83px)/1.16 var(--sans);letter-spacing:-.06em}html[lang=zh-CN] h2{font:800 clamp(34px,4.7vw,70px)/1.18 var(--sans);letter-spacing:-.045em}html[lang=zh-CN] h1 em,html[lang=zh-CN] h2 em{font-style:normal;font-weight:inherit}html[lang=zh-CN] dialog h2{font-size:15px}
@media(max-width:950px){.wrap{width:calc(100% - 62px)}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:670px){.wrap{width:calc(100% - 32px)}.nav{min-height:70px;flex-wrap:wrap;gap:7px;padding-block:9px}.brand{font-size:13px}.brand small{font-size:9px}.mark{width:34px;height:31px}.nav nav{order:3;width:100%;justify-content:space-between;gap:6px;padding-top:7px;font-size:12px}.languages button{min-height:30px;padding-inline:8px}.hero{padding-block:23px 32px}.hero h1{font-size:clamp(68px,13vw,100px);margin:15px 0 17px}.hero-text{font-size:14px}.actions{margin-top:18px}.services,.work,.contact{padding-block:40px}.section-head{align-items:start;flex-direction:column;gap:9px;margin-bottom:17px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-grid article{padding:12px}.service-grid h3{font-size:14px}.service-grid p{font-size:12px}.gallery{grid-template-columns:1fr;gap:10px}.case img{aspect-ratio:1.45}.contact-grid{grid-template-columns:1fr;gap:17px}.qr{justify-self:start;width:min(100%,250px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.case[data-image=parrucchiere-lin] img{object-fit:contain;background:#151515}
@media(min-width:671px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

.case[data-image=komorebi-sushi] img{object-fit:contain;background:#f4f0e7}
@media(min-width:950px){
  .gallery{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gallery .case{grid-column:span 2}
  .gallery .case[data-image=parrucchiere-lin],.gallery .case[data-image=komorebi-sushi]{grid-column:span 3}
}

@media(min-width:951px){.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5.6vw, 84px);
  padding-block: clamp(36px, 5vw, 72px);
}
.hero h1 { font-size: clamp(72px, 8.05vw, 118px); }
.brand-art {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1.16;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 78% 18%, #d9e3a855, transparent 55%),
    linear-gradient(140deg, #e6e9cc 3%, #c1cf96 53%, #8da474 100%);
}
.brand-art::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid #293c3c3b;
}
.brand-art__sun {
  position: absolute;
  inset: 13% auto auto 23%;
  width: 59%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7edcd, #e9b97d);
}
.brand-art__orbit {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 38%;
  width: 86%;
  height: 25%;
  border: 1px solid #faf4dbad;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.brand-art__shadow {
  position: absolute;
  left: 27%;
  bottom: 13%;
  width: 61%;
  height: 10%;
  background: #30421d66;
  border-radius: 50%;
  filter: blur(14px);
  transform: rotate(-8deg);
}
.brand-art__potato {
  position: absolute;
  left: 27%;
  top: 26%;
  width: 49%;
  height: 54%;
  transform: rotate(-19deg);
  border-radius: 53% 47% 46% 54% / 58% 53% 47% 42%;
  background: radial-gradient(ellipse at 29% 18%, #fff3b8 0%, #f1cd73 34%, #d69849 68%, #a96429 100%);
  box-shadow: inset -11px -14px 22px #86421330, 9px 18px 28px #4b3d2150;
}
.brand-art__potato::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  opacity: .22;
  background:
    radial-gradient(circle, #8c541e 0 1px, transparent 1.5px) 1px 3px / 17px 19px,
    radial-gradient(circle, #a06e38 0 1px, transparent 1.5px) 7px 10px / 23px 31px;
  mask-image: linear-gradient(120deg, transparent 10%, black 100%);
}
.brand-art__eye {
  position: absolute;
  left: 34%;
  top: 47%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #342e23;
}
.brand-art__eye + .brand-art__eye { left: 57%; }
.brand-art__spark {
  position: absolute;
  right: 13%;
  top: 20%;
  width: 8%;
  aspect-ratio: 1;
  background: #fff5d9;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.brand-art__spark--small { top: 68%; right: 83%; width: 4%; }
@media(max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 16px; }
}
@media(max-width: 670px) {
  .hero { padding-block: 23px 32px; }
  .hero h1 { font-size: clamp(60px, 13vw, 100px); }
  .brand-art { aspect-ratio: 1.28; }
}