:root{
  --sign:#1c1b19;
  --sign-2:#25231f;
  --brass:#d1ad5c;
  --brass-soft:#e6cf96;
  --plaster:#efe9df;
  --boucle:#d9d1c4;
  --oak:#8b6a48;
  --ink:#23211e;
  --muted:#6b645a;
  --on-dark:#cfc8bb;
  --display:'GFS Didot',Didot,Georgia,serif;
  --body:'Commissioner',system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}
h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.01em}
h3{font-size:24px}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn-sm{min-height:42px;padding:0 20px;font-size:14px}
.btn-gold{background:var(--brass);color:var(--sign)}
.btn-gold:hover{background:var(--brass-soft)}
.btn-ghost{border:1px solid currentColor;color:inherit}
.btn-ghost:hover{background:rgba(209,173,92,.14)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;padding:14px var(--gutter);background:rgba(28,27,25,.94);backdrop-filter:blur(8px);color:var(--plaster)}
.mark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none;color:var(--brass)}
.mark b{font:400 30px/1 var(--display);letter-spacing:.04em}
.mark span{font:400 13px/1 var(--display);letter-spacing:.18em;margin-top:2px}
.top nav{display:flex;gap:28px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;color:var(--on-dark)}
.top nav a:hover{color:var(--brass-soft)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:calc(100svh - 70px);background:var(--sign);color:var(--plaster)}
.hero-sign{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px var(--gutter)}
.sign{position:relative;display:flex;flex-direction:column;align-items:center;padding:42px 56px 34px;border:1px solid rgba(209,173,92,.35);background:linear-gradient(180deg,#151412,#1f1d1a);box-shadow:inset 0 0 0 6px #121110,0 30px 60px -30px #000}
.sign::before{content:"";position:absolute;inset:-1px;border:1px solid var(--brass);opacity:0;animation:frame 1.6s .6s ease forwards}
.sign-jp{font:400 clamp(92px,11vw,150px)/.9 var(--display);letter-spacing:.06em;color:var(--brass)}
.sign-maison{font:400 clamp(40px,4.6vw,62px)/1 var(--display);letter-spacing:.12em;color:var(--brass);margin-top:4px}
.sign-rule{display:block;width:100%;height:1px;background:var(--brass);margin:22px 0 16px}
.sign-tag{font:500 13px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.sign-tag i{font-style:normal;margin:0 .5em}
.sign-jp,.sign-maison,.sign-rule,.sign-tag{animation:light 1.8s .2s ease-out both}
@keyframes light{
  0%{color:#3b3428;background-color:#3b3428;text-shadow:none;opacity:.6}
  35%{color:#7a6438;background-color:#7a6438;opacity:.85}
  45%{color:#4a3f2c;background-color:#4a3f2c}
  100%{color:var(--brass);background-color:var(--brass);text-shadow:0 0 18px rgba(232,196,110,.45),0 0 2px rgba(255,228,160,.6);opacity:1}
}
.sign-jp,.sign-maison,.sign-tag{background-color:transparent!important}
@keyframes frame{to{opacity:.55}}
.hero-line{max-width:34ch;margin:40px 0 0;font-size:19px;color:var(--on-dark)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-photo{position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sign) 0,rgba(28,27,25,0) 22%)}

/* intro */
.intro{position:relative;display:grid;grid-template-columns:1fr minmax(280px,.8fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(72px,10vw,140px) var(--gutter);overflow:hidden}
.intro-text{max-width:560px;position:relative;z-index:1}
.intro-text h2{margin-bottom:28px}
.intro-text p{color:var(--muted);margin:0 0 18px}
.intro-photo{position:relative;z-index:1;aspect-ratio:3/4;overflow:hidden;border-radius:220px 220px 6px 6px;box-shadow:0 40px 70px -40px rgba(60,45,25,.55)}
.intro-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.slats{position:absolute;top:0;bottom:0;right:0;width:min(36vw,520px);background:repeating-linear-gradient(90deg,#9a7854 0 14px,#7c5d3d 14px 16px,#8f6d4a 16px 30px,#73563a 30px 32px);opacity:.9}

/* services */
.services{background:var(--sign);color:var(--plaster);padding:clamp(72px,9vw,128px) var(--gutter)}
.services-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px}
.services-head h2{color:var(--brass)}
.services-head p{max-width:40ch;margin:0;color:var(--on-dark)}
.tabs{display:flex;gap:6px;border-bottom:1px solid rgba(207,200,187,.2);margin-bottom:44px;overflow-x:auto}
.tabs button{appearance:none;border:0;background:none;color:var(--on-dark);font:400 clamp(24px,3vw,34px)/1 var(--display);padding:14px 22px 18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--plaster)}
.tabs button[aria-selected=true]{color:var(--brass);border-bottom-color:var(--brass)}
.panel{display:grid;grid-template-columns:1fr 300px;gap:clamp(32px,6vw,90px);align-items:start}
.panel[hidden]{display:none}
.panel-lede{font:400 clamp(22px,2.4vw,28px)/1.35 var(--display);color:var(--plaster);margin:0 0 26px;max-width:30ch}
.menu{list-style:none;margin:0;padding:0}
.menu li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;border-top:1px solid rgba(207,200,187,.16)}
.menu li:last-child{border-bottom:1px solid rgba(207,200,187,.16)}
.menu span{font-size:19px;font-weight:500}
.menu small{font-size:15px;color:#9d968a;text-align:right}
.panel-img{width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:150px 150px 4px 4px;filter:saturate(.9)}

/* steps */
.steps{padding:clamp(72px,9vw,128px) var(--gutter);background:var(--boucle)}
.steps h2{max-width:16ch;margin-bottom:48px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);counter-reset:s}
.steps li{counter-increment:s;padding-top:22px;border-top:2px solid var(--oak)}
.steps li::before{content:counter(s);display:block;font:400 54px/1 var(--display);color:var(--oak);margin-bottom:18px}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}
.steps a{color:var(--ink);font-weight:600}

/* loyalty */
.loyalty{display:grid;grid-template-columns:minmax(260px,.8fr) 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(72px,9vw,128px) var(--gutter);background:#f2e3e6}
.loyalty-photo{aspect-ratio:3/4;overflow:hidden;border-radius:4px;max-width:440px}
.loyalty-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.loyalty-text{max-width:520px}
.loyalty-text h2{margin-bottom:22px}
.loyalty-text p{color:var(--muted);margin:0}
.hearts{list-style:none;padding:0;margin:32px 0 24px;display:grid;grid-template-columns:repeat(3,64px);gap:14px}
.hearts li{width:64px;height:64px;border-radius:50%;border:1.5px solid #c9849c;display:flex;align-items:center;justify-content:center;color:#b0657f;font:600 15px/1 var(--body)}
.hearts li:not(.last)::before{content:"♡";font-size:26px;line-height:1}
.hearts .last{background:#c9849c;color:#fff;border-color:#c9849c}
.loyalty-note{font-size:15px}

/* gallery */
.gallery{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:320px 320px;gap:14px;padding:clamp(56px,7vw,96px) var(--gutter)}
.gallery figure{overflow:hidden;border-radius:4px}
.gallery img{width:100%;height:100%;object-fit:cover}
.g-big{grid-row:1/3}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:stretch;padding:clamp(72px,9vw,128px) var(--gutter);background:var(--sign);color:var(--plaster)}
.visit h2{color:var(--brass);margin-bottom:36px}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:18px 32px;margin:0 0 12px}
.visit dt{color:#9d968a;font-size:15px;padding-top:3px}
.visit dd{margin:0;font-size:19px}
.visit dd a{text-decoration:none}
.visit dd a:hover{color:var(--brass-soft)}
.map{min-height:380px;border-radius:4px;overflow:hidden;border:1px solid rgba(209,173,92,.3)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.35) contrast(1.05)}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:32px var(--gutter);background:#141311;color:#9d968a;font-size:14px}
footer p{margin:0}
.credit{flex-basis:100%;text-align:center;font-size:12px;letter-spacing:.04em;color:#6f685d;padding-top:14px;border-top:1px solid rgba(207,200,187,.08)}
.credit a{color:var(--brass);text-decoration:none}
.credit a:hover{color:var(--brass-soft)}
.mark-sm b{font-size:24px}.mark-sm span{font-size:11px}

.callbar{display:none}

/* responsive */
@media (max-width:960px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{aspect-ratio:4/3.4}
  .hero-photo::after{background:linear-gradient(180deg,var(--sign) 0,rgba(28,27,25,0) 25%)}
  .hero-sign{align-items:center;text-align:center;padding-top:48px}
  .hero-line{margin-inline:auto}
  .hero-actions{justify-content:center}
  .intro{grid-template-columns:1fr}
  .intro-photo{max-width:440px}
  .slats{top:auto;height:38%;width:100%}
  .panel{grid-template-columns:1fr}
  .panel-img{max-width:280px;aspect-ratio:3/4}
  .steps ol{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:360px 240px 240px}
  .g-big{grid-row:auto;grid-column:1/-1}
  .loyalty{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:64px}
  .top{padding:10px 20px}
  .top .btn{display:none}
  .sign{padding:30px 26px 24px;width:100%}
  .sign-tag{font-size:10px;letter-spacing:.22em}
  .hero-actions .btn{width:100%}
  .menu li{flex-direction:column;gap:2px}
  .menu small{text-align:left}
  .visit dl{grid-template-columns:1fr;gap:4px}
  .visit dd{margin-bottom:14px}
  .callbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center;align-items:center;min-height:52px;border-radius:999px;background:var(--brass);color:var(--sign);font-weight:600;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sign *,.sign::before{animation:none!important}
  .sign::before{opacity:.55}
  .sign-jp,.sign-maison,.sign-tag{text-shadow:0 0 18px rgba(232,196,110,.45)}
}

/* Maison JP — updated identity and service menu */
.mark{border:1px solid rgba(209,173,92,.65);border-radius:50%;width:72px;height:72px;justify-content:center;flex-shrink:0}
.mark-sm{width:64px;height:64px}
.sign{border-radius:180px 180px 24px 24px;padding:64px 56px 40px;box-shadow:0 24px 60px -35px #000}
.sign::before{border-radius:inherit;inset:7px}
.intro-photo,.panel-img{border-radius:28px}
.gallery figure,.loyalty-photo,.map{border-radius:22px}
.btn{border-radius:14px}
.welcome-title{font-size:clamp(30px,3.4vw,46px);margin-top:36px;color:var(--brass-soft)}
.hero-line{margin-top:18px}
.visit-lede{max-width:42ch;color:var(--on-dark);margin:0 0 30px}
.visit h2{margin-bottom:22px}
.service-menu>li{display:grid;grid-template-columns:minmax(140px,.65fr) 1fr;gap:18px;padding:22px 0}
.service-menu h3{font:500 20px/1.4 var(--body)}
.service-menu>li>ul{margin:0;padding-left:18px;color:var(--on-dark);font-size:16px}
.service-menu>li>ul>li{display:list-item;border:0;padding:2px 0}
@media(max-width:560px){.sign{padding:48px 28px 32px;border-radius:150px 150px 22px 22px}.mark{width:64px;height:64px}.tabs button{font-size:22px;padding-inline:14px}.service-menu>li{grid-template-columns:1fr;gap:8px}.welcome-title{margin-top:28px}}
/* Keep the lettering comfortably inside every logo frame. */
.mark{padding:9px;gap:3px;text-align:center}
.mark b{font-size:28px;line-height:1.1;letter-spacing:0}
.mark span{font-size:10px;line-height:1.2;letter-spacing:.08em;margin:0;white-space:nowrap}
.mark-sm b{font-size:25px}.mark-sm span{font-size:9px}
.sign{width:min(100%,410px);min-width:0;padding:64px clamp(20px,4vw,48px) 36px;text-align:center}
.sign-jp{font-size:clamp(78px,10vw,132px);line-height:1.08;letter-spacing:.025em}
.sign-maison{font-size:clamp(30px,4.5vw,52px);line-height:1.2;letter-spacing:.06em;white-space:nowrap}
.sign-tag{font-size:clamp(9px,1.1vw,12px);line-height:1.5;letter-spacing:.15em;white-space:nowrap}
.sign-rule{margin:18px 0 14px}.sign-tag i{margin:0 .3em}
@media(max-width:560px){.sign{width:min(100%,340px);padding:60px 22px 30px}.sign-jp{font-size:94px}.sign-maison{font-size:38px}.sign-tag{font-size:10px}.mark b{font-size:25px}.mark span{font-size:9px}}
@media(max-width:350px){.sign-jp{font-size:80px}.sign-maison{font-size:32px}.sign-tag{font-size:9px;letter-spacing:.1em}}