/* =========================================================
   CAREER 熊本県熊本市東区健軍3丁目 美容室サイト
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600&family=Caveat:wght@500;600&display=swap');

:root{
  --color-white:#ffffff;
  --color-background:#f6f6f4;
  --color-background-blue:#f2f7f9;
  --color-text:#1c1c1c;
  --color-text-muted:#777777;
  --color-line:#d9d9d9;
  --color-accent:#aebfc6;
  --color-dark:#111111;

  --font-serif-ja:'Shippori Mincho', serif;
  --font-sans-ja:'Noto Sans JP', sans-serif;
  --font-serif-en:'Cormorant Garamond', serif;
  --font-sans-en:'Montserrat', sans-serif;
  --font-hand:'Caveat', cursive;

  --content-width:1200px;
  --text-width:760px;
  --side-space:clamp(20px, 5vw, 80px);
  --section-space:clamp(72px, 14vw, 200px);

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.3s ease;
  --t-normal:.8s var(--ease);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-white);
  color:var(--color-text);
  font-family:var(--font-sans-ja);
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{margin:0; font-weight:500;}
p{margin:0;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

.wrap{max-width:var(--content-width); margin:0 auto; padding:0 var(--side-space);}

/* -------------------- utility -------------------- */
.eyebrow-en{
  font-family:var(--font-serif-en);
  font-style:italic;
  letter-spacing:.08em;
  color:var(--color-text-muted);
  font-size:14px;
}
.vertical-heading{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-serif-en);
  font-size:clamp(28px,4vw,42px);
  letter-spacing:.14em;
  color:var(--color-text);
}
.vertical-heading .jp{
  display:block;
  font-family:var(--font-serif-ja);
  font-size:15px;
  letter-spacing:.3em;
  margin-top:18px;
  color:var(--color-text-muted);
}
.hand{font-family:var(--font-hand); color:var(--color-text-muted);}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

.section{padding:var(--section-space) 0;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:56px; gap:24px; flex-wrap:wrap;
}
.section-title-en{
  font-family:var(--font-serif-en);
  font-size:clamp(40px,7vw,80px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;
}
.section-title-jp{
  display:block;
  font-family:var(--font-serif-ja);
  font-size:16px;
  letter-spacing:.35em;
  color:var(--color-text-muted);
  margin-top:14px;
}

.btn{
  display:inline-flex; align-items:center; gap:14px;
  height:56px; padding:0 36px;
  background:var(--color-dark); color:var(--color-white);
  font-family:var(--font-sans-en); font-size:13px; letter-spacing:.14em;
  border:1px solid var(--color-dark);
  transition:background var(--t-fast), color var(--t-fast);
}
.btn:hover{background:var(--color-white); color:var(--color-dark);}
.btn-outline{
  background:transparent; color:var(--color-text); border:1px solid var(--color-text);
}
.btn-outline:hover{background:var(--color-text); color:var(--color-white);}

.text-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans-en); font-size:13px; letter-spacing:.1em;
  padding-bottom:6px; position:relative;
}
.text-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--color-line);
}
.text-link .arrow{transition:transform var(--t-fast);}
.text-link:hover .arrow{transform:translateX(6px);}

.line-rule{height:1px; background:var(--color-line); width:100%;}

/* -------------------- signature path (course/track motif) -------------------- */
.path-figure{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible;}
.path-figure path{
  fill:none; stroke:var(--color-accent); stroke-width:1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.path-figure.is-visible path{stroke-dashoffset:0;}

/* -------------------- header -------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:76px; display:flex; align-items:center;
  transition:background var(--t-fast), border-color var(--t-fast), height var(--t-fast);
  border-bottom:1px solid transparent;
}
.site-header.on-dark{color:var(--color-white);}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  color:var(--color-text); border-color:var(--color-line); height:64px;
}
.header-inner{
  width:100%; max-width:var(--content-width); margin:0 auto; padding:0 var(--side-space);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--font-serif-en); font-size:22px; letter-spacing:.22em;
}
.logo span{font-family:var(--font-serif-ja); font-size:11px; letter-spacing:.3em; display:block; margin-top:2px; opacity:.7;}
.main-nav{display:flex; align-items:center; gap:40px;}
.main-nav ul{display:flex; gap:34px;}
.main-nav a{
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.14em; position:relative; padding-bottom:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor;
  transition:width var(--t-fast);
}
.main-nav a:hover::after, .main-nav a.is-active::after{width:100%;}
.main-nav .is-disabled{opacity:.35; pointer-events:none;}
.header-cta{
  display:flex; align-items:center; gap:22px;
}
.reserve-btn{
  font-family:var(--font-sans-en); font-size:11px; letter-spacing:.14em;
  border:1px solid currentColor; padding:11px 22px; transition:background var(--t-fast), color var(--t-fast);
}
.reserve-btn:hover{background:currentColor; color:var(--color-white);}
.site-header.is-scrolled .reserve-btn:hover{color:var(--color-text);}
.sns-icon{width:16px; height:16px; opacity:.8;}
.menu-toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.menu-toggle span{height:1px; background:currentColor; display:block;}

@media (max-width:1023px){
  .main-nav{display:none;}
  .menu-toggle{display:flex;}
}

/* mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0; background:var(--color-white); z-index:200;
  transform:translateX(100%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; padding:100px var(--side-space) 40px;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav ul{display:flex; flex-direction:column; gap:26px;}
.mobile-nav a{font-family:var(--font-serif-en); font-size:26px;}
.mobile-nav .close-btn{
  position:absolute; top:26px; right:var(--side-space); width:26px; height:26px;
}
.mobile-nav .close-btn span{
  position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--color-text);
}
.mobile-nav .close-btn span:first-child{transform:rotate(45deg);}
.mobile-nav .close-btn span:last-child{transform:rotate(-45deg);}

/* -------------------- hero -------------------- */
.hero{
  position:relative; height:88vh; min-height:560px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,0) 30%, rgba(17,17,17,.55) 100%);
}
.hero-content{position:relative; z-index:2; width:100%; padding:0 var(--side-space) 64px; color:var(--color-white);}
.hero-eyebrow{
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.3em; opacity:.85; margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-serif-en); font-size:clamp(44px,8.6vw,108px);
  line-height:1.02; letter-spacing:.01em; max-width:16ch;
}
.hero-sub{
  margin-top:26px; font-family:var(--font-serif-ja); font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.06em; max-width:34ch; font-weight:400;
}
.hero-meta{
  margin-top:34px; display:flex; gap:28px; font-family:var(--font-sans-en); font-size:11px; letter-spacing:.1em; opacity:.85;
}
.scroll-cue{
  position:absolute; right:var(--side-space); bottom:34px; z-index:2; color:var(--color-white);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-sans-en); font-size:10px; letter-spacing:.3em;
}
.scroll-cue .line{width:1px; height:52px; background:rgba(255,255,255,.5); overflow:hidden; position:relative;}
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff;
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}

/* -------------------- concept (top preview) -------------------- */
.concept-section{position:relative; background:var(--color-background-blue);}
.concept-grid{
  display:grid; grid-template-columns:.7fr 1.1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1;
}
.concept-photo{aspect-ratio:4/5; overflow:hidden;}
.concept-photo img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.concept-photo:hover img{transform:scale(1.04);}
.concept-copy p{margin-bottom:20px; color:var(--color-text); font-size:15px;}
.concept-copy .lead{
  font-family:var(--font-serif-ja); font-size:22px; line-height:1.9; margin-bottom:28px;
}

@media (max-width:1023px){
  .concept-grid{grid-template-columns:1fr; gap:36px;}
  .vertical-heading{writing-mode:horizontal-tb; text-orientation:initial;}
  .vertical-heading .jp{margin-top:8px;}
}

/* -------------------- lookbook / style gallery -------------------- */
.lookbook{background:var(--color-white);}
.lookbook-head{display:flex; gap:40px; align-items:flex-start; margin-bottom:50px;}
.lookbook-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:20px;
}
.look-item{
  position:relative; overflow:hidden; grid-column:span 6;
}
.look-item:nth-child(1){grid-column:span 7;}
.look-item:nth-child(2){grid-column:span 5; margin-top:70px;}
.look-item:nth-child(3){grid-column:span 5;}
.look-item:nth-child(4){grid-column:span 7; margin-top:70px;}
.look-photo{aspect-ratio:4/5; overflow:hidden; background:var(--color-background);}
.look-photo img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.look-item:hover .look-photo img{transform:scale(1.05);}
.look-meta{
  display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px;
}
.look-num{font-family:var(--font-serif-en); font-size:13px; color:var(--color-text-muted);}
.look-name{font-family:var(--font-hand); font-size:26px; color:var(--color-text);}
.look-cat{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.1em; color:var(--color-text-muted);}

@media (max-width:1023px){
  .lookbook-grid{grid-template-columns:1fr; gap:44px;}
  .look-item, .look-item:nth-child(2), .look-item:nth-child(4){grid-column:1/-1; margin-top:0;}
}

/* -------------------- menu preview cards -------------------- */
.menu-preview{background:var(--color-background);}
.menu-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.menu-card{background:var(--color-white); transition:transform var(--t-fast);}
.menu-card:hover{transform:translateY(-6px);}
.menu-card-photo{aspect-ratio:1/1; overflow:hidden;}
.menu-card-photo img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.menu-card:hover .menu-card-photo img{transform:scale(1.06);}
.menu-card-body{padding:22px 20px 26px;}
.menu-card-en{font-family:var(--font-serif-en); font-size:20px; letter-spacing:.03em;}
.menu-card-jp{font-family:var(--font-serif-ja); font-size:13px; color:var(--color-text-muted); margin-top:4px;}
.menu-card-desc{font-size:13px; color:var(--color-text-muted); margin-top:12px; line-height:1.8;}
.menu-card-link{margin-top:16px; display:inline-block; font-family:var(--font-sans-en); font-size:11px; letter-spacing:.1em; border-bottom:1px solid var(--color-line); padding-bottom:3px;}

@media (max-width:1023px){
  .menu-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .menu-cards{grid-template-columns:1fr;}
}

/* -------------------- salon intro -------------------- */
.salon-section{position:relative;}
.salon-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center;}
.salon-collage{position:relative;}
.salon-collage .main-photo{aspect-ratio:4/3; overflow:hidden;}
.salon-collage .sub-photo{
  position:absolute; width:44%; aspect-ratio:4/5; overflow:hidden;
  bottom:-48px; right:-32px; border:6px solid var(--color-white);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.salon-collage img{width:100%; height:100%; object-fit:cover;}
.feature-list{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px;}
.feature-item{
  border-top:1px solid var(--color-line); padding-top:14px;
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.06em; color:var(--color-text-muted);
}
.feature-item strong{display:block; font-family:var(--font-serif-ja); font-size:15px; color:var(--color-text); margin-bottom:6px; letter-spacing:.02em;}

@media (max-width:1023px){
  .salon-grid{grid-template-columns:1fr; gap:90px;}
  .salon-collage .sub-photo{right:0; bottom:-36px;}
}

/* -------------------- staff -------------------- */
.staff-section{background:var(--color-background-blue);}
.staff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.staff-card{position:relative;}
.staff-photo{aspect-ratio:4/5; overflow:hidden; background:var(--color-line);}
.staff-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.08); transition:transform .8s var(--ease);}
.staff-card:hover .staff-photo img{transform:scale(1.04);}
.staff-info{margin-top:20px;}
.staff-role{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.14em; color:var(--color-text-muted);}
.staff-name{font-family:var(--font-serif-ja); font-size:20px; margin-top:6px;}
.staff-note{font-size:13px; color:var(--color-text-muted); margin-top:10px;}
@media (max-width:1023px){.staff-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.staff-grid{grid-template-columns:1fr; max-width:340px; margin:0 auto;}}

/* -------------------- news -------------------- */
.news-section{border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line);}
.news-list{display:flex; flex-direction:column;}
.news-item{
  display:grid; grid-template-columns:110px 110px 1fr 20px; align-items:center; gap:24px;
  padding:24px 0; border-bottom:1px solid var(--color-line);
  transition:padding-left var(--t-fast);
}
.news-item:hover{padding-left:10px;}
.news-item:last-child{border-bottom:none;}
.news-date{font-family:var(--font-sans-en); font-size:12px; color:var(--color-text-muted);}
.news-tag{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.08em; color:var(--color-white); background:var(--color-accent); padding:6px 12px; text-align:center;}
.news-title{font-size:14px;}
.news-arrow{color:var(--color-text-muted);}
@media (max-width:640px){
  .news-item{grid-template-columns:1fr 1fr; row-gap:8px;}
  .news-title{grid-column:1/-1;}
}

/* -------------------- reserve cta -------------------- */
.reserve-section{background:var(--color-dark); color:var(--color-white); position:relative; overflow:hidden;}
.reserve-inner{text-align:center; position:relative; z-index:1;}
.reserve-eyebrow{font-family:var(--font-sans-en); font-size:12px; letter-spacing:.3em; color:var(--color-accent);}
.reserve-title{
  font-family:var(--font-serif-en); font-size:clamp(36px,6vw,64px); margin-top:20px; line-height:1.15;
}
.reserve-sub{
  font-family:var(--font-serif-ja); font-size:15px; color:#bdbdbd; margin-top:22px; max-width:520px; margin-left:auto; margin-right:auto; line-height:2;
}
.reserve-actions{display:flex; justify-content:center; gap:18px; margin-top:44px; flex-wrap:wrap;}
.reserve-actions .btn{background:var(--color-white); color:var(--color-dark); border-color:var(--color-white);}
.reserve-actions .btn:hover{background:transparent; color:var(--color-white);}
.reserve-actions .btn.outline{background:transparent; color:var(--color-white);}
.reserve-actions .btn.outline:hover{background:var(--color-white); color:var(--color-dark);}

/* -------------------- access -------------------- */
.access-section{background:#161616; color:var(--color-white);}
.access-grid{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.access-map{aspect-ratio:1/1; background:#222;}
.access-map iframe{width:100%; height:100%; border:0; filter:grayscale(.4) contrast(1.05);}
.access-info{padding:60px var(--side-space); display:flex; flex-direction:column; justify-content:center;}
.access-row{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14);}
.access-row:first-child{padding-top:0;}
.access-label{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.14em; color:#8f8f8f;}
.access-value{font-size:14px; color:#eee; line-height:1.9;}
.access-value a{border-bottom:1px solid rgba(255,255,255,.3);}
@media (max-width:1023px){.access-grid{grid-template-columns:1fr;} .access-info{padding:50px var(--side-space);}}

/* -------------------- footer -------------------- */
.site-footer{background:var(--color-dark); color:#cfcfcf; padding:60px 0 30px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:36px;}
.footer-logo{font-family:var(--font-serif-en); font-size:22px; letter-spacing:.2em; color:var(--color-white);}
.footer-nav{display:flex; gap:30px; flex-wrap:wrap;}
.footer-nav a{font-family:var(--font-sans-en); font-size:12px; letter-spacing:.08em;}
.footer-sns{display:flex; gap:16px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-sans-en); font-size:11px; letter-spacing:.05em; color:#8a8a8a;
}
.footer-bottom a{margin-right:18px;}

/* -------------------- page hero (inner pages) -------------------- */
.page-hero{position:relative; height:66vh; min-height:420px; overflow:hidden; display:flex; align-items:flex-end;}
.page-hero-content{position:relative; z-index:2; padding:0 var(--side-space) 56px; color:var(--color-white);}
.page-hero-en{font-family:var(--font-serif-en); font-size:clamp(48px,9vw,120px); line-height:.95;}
.page-hero-jp{font-family:var(--font-serif-ja); font-size:16px; letter-spacing:.2em; margin-top:20px;}
.breadcrumb{
  position:absolute; top:96px; left:var(--side-space); z-index:2; color:var(--color-white);
  font-family:var(--font-sans-en); font-size:11px; letter-spacing:.1em; opacity:.85;
}
.breadcrumb a{border-bottom:1px solid rgba(255,255,255,.4);}

/* -------------------- concept page -------------------- */
.philosophy-block{max-width:var(--text-width); margin:0 auto; text-align:center;}
.philosophy-block .eyebrow-en{display:block; margin-bottom:20px;}
.philosophy-lead{font-family:var(--font-serif-ja); font-size:clamp(20px,2.6vw,28px); line-height:2.1;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-line); margin-top:80px;}
.pillar{background:var(--color-white); padding:52px 40px;}
.pillar-num{font-family:var(--font-serif-en); font-style:italic; font-size:15px; color:var(--color-accent);}
.pillar-title{font-family:var(--font-serif-ja); font-size:20px; margin-top:20px; margin-bottom:18px;}
.pillar-text{font-size:13.5px; color:var(--color-text-muted); line-height:2;}
@media (max-width:1023px){.pillars{grid-template-columns:1fr;}}

.essay-section{position:relative;}
.essay-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;}
.essay-photo{aspect-ratio:4/5; overflow:hidden;}
.essay-photo img{width:100%; height:100%; object-fit:cover;}
.essay-text{
  background:var(--color-background-blue); display:flex; flex-direction:column; justify-content:center;
  padding:60px var(--side-space);
}
.essay-caption{font-family:var(--font-hand); font-size:30px; color:var(--color-text); margin-bottom:24px;}
.essay-body{font-size:14.5px; color:var(--color-text-muted); line-height:2.1;}
@media (max-width:1023px){.essay-grid{grid-template-columns:1fr;}}

.quote-block{
  text-align:center; max-width:820px; margin:0 auto; padding:var(--section-space) 0;
}
.quote-mark{font-family:var(--font-serif-en); font-size:70px; color:var(--color-accent); line-height:1;}
.quote-text{font-family:var(--font-serif-ja); font-size:clamp(19px,2.4vw,26px); line-height:2; margin-top:10px;}
.quote-attr{margin-top:26px; font-family:var(--font-sans-en); font-size:12px; letter-spacing:.1em; color:var(--color-text-muted);}

/* -------------------- menu page -------------------- */
.category-nav{
  position:sticky; top:64px; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--color-line); border-top:1px solid var(--color-line);
}
.category-nav ul{display:flex; gap:0; overflow-x:auto;}
.category-nav a{
  display:block; padding:20px 26px; font-family:var(--font-sans-en); font-size:12px; letter-spacing:.1em;
  white-space:nowrap; border-right:1px solid var(--color-line); color:var(--color-text-muted);
  transition:color var(--t-fast), background var(--t-fast);
}
.category-nav a:hover{color:var(--color-text); background:var(--color-background);}

.price-category{padding:var(--section-space) 0; border-bottom:1px solid var(--color-line); scroll-margin-top:130px;}
.price-head{display:flex; align-items:baseline; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.price-head .num{font-family:var(--font-serif-en); font-style:italic; font-size:18px; color:var(--color-accent);}
.price-head .en{font-family:var(--font-serif-en); font-size:clamp(30px,5vw,48px);}
.price-head .jp{font-family:var(--font-serif-ja); font-size:14px; color:var(--color-text-muted);}

.price-table{width:100%; border-collapse:collapse;}
.price-table tr{border-bottom:1px solid var(--color-line);}
.price-table tr:first-child{border-top:1px solid var(--color-line);}
.price-table td{padding:20px 10px; vertical-align:top;}
.price-name{font-family:var(--font-serif-ja); font-size:15.5px;}
.price-name small{display:block; font-family:var(--font-sans-en); font-size:11px; color:var(--color-text-muted); letter-spacing:.06em; margin-top:5px;}
.price-desc{font-size:12.5px; color:var(--color-text-muted); max-width:340px;}
.price-value{
  font-family:var(--font-serif-en); font-size:19px; text-align:right; white-space:nowrap;
}
.price-value small{font-family:var(--font-sans-en); font-size:11px; color:var(--color-text-muted); margin-left:6px;}
@media (max-width:767px){
  .price-table, .price-table tbody, .price-table tr, .price-table td{display:block; width:100%;}
  .price-table tr{padding:18px 0;}
  .price-table td{padding:4px 0;}
  .price-value{text-align:left; margin-top:8px;}
}

.spa-feature{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; background:var(--color-background-blue); padding:80px var(--side-space);}
.spa-photo{aspect-ratio:1/1; overflow:hidden;}
.spa-photo img{width:100%; height:100%; object-fit:cover;}
@media (max-width:1023px){.spa-feature{grid-template-columns:1fr; padding:60px var(--side-space);}}

.menu-notes{max-width:var(--text-width);}
.menu-notes li{
  font-size:13px; color:var(--color-text-muted); padding-left:20px; position:relative; margin-bottom:12px; line-height:1.9;
}
.menu-notes li::before{content:'—'; position:absolute; left:0; color:var(--color-accent);}

/* =========================================================
   STYLE PAGE (Lookbook)
   ========================================================= */
.style-filter{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px;
}
.filter-btn{
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.1em;
  padding:11px 22px; border:1px solid var(--color-line); color:var(--color-text-muted);
  background:var(--color-white); transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover{border-color:var(--color-text); color:var(--color-text);}
.filter-btn.is-active{background:var(--color-dark); border-color:var(--color-dark); color:var(--color-white);}

.style-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px 28px;
}
.style-card{transition:opacity .5s var(--ease), transform .5s var(--ease);}
.style-card.is-hidden{
  display:none;
}
.style-photo{aspect-ratio:4/5; overflow:hidden; background:var(--color-background);}
.style-photo img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.style-card:hover .style-photo img{transform:scale(1.05);}
.style-info{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin-top:16px;}
.style-num{font-family:var(--font-serif-en); font-size:12px; color:var(--color-text-muted);}
.style-name{font-family:var(--font-hand); font-size:22px;}
.style-cat{font-family:var(--font-sans-en); font-size:10.5px; letter-spacing:.08em; color:var(--color-text-muted);}
.style-by{font-family:var(--font-sans-ja); font-size:11px; color:var(--color-text-muted); width:100%;}

@media (max-width:1023px){
  .style-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .style-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}
}

/* =========================================================
   STAFF PAGE (profiles)
   ========================================================= */
.staff-profile{border-bottom:1px solid var(--color-line);}
.profile-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start;
}
.profile-grid.reverse{grid-template-columns:1.15fr .85fr;}
.profile-grid.reverse .profile-photo{order:2;}
.profile-grid.reverse .profile-body{order:1;}
.profile-photo{position:relative; aspect-ratio:4/5; overflow:hidden;}
.profile-photo img{width:100%; height:100%; object-fit:cover;}
.profile-index{
  position:absolute; top:20px; left:20px;
  font-family:var(--font-serif-en); font-style:italic; font-size:16px;
  color:var(--color-white); background:rgba(17,17,17,.55); padding:6px 14px;
}
.profile-role{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.12em; color:var(--color-text-muted);}
.profile-name{font-family:var(--font-serif-ja); font-size:30px; margin-top:10px;}
.profile-name span{font-family:var(--font-serif-en); font-style:italic; font-size:16px; color:var(--color-text-muted); margin-left:14px;}
.profile-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.profile-tags span{
  font-family:var(--font-sans-en); font-size:11px; letter-spacing:.05em;
  border:1px solid var(--color-line); padding:7px 14px; color:var(--color-text-muted);
}
.profile-msg{margin-top:26px; font-size:14px; color:var(--color-text-muted); line-height:2.05; max-width:52ch;}
.profile-photo-sub{margin-top:28px; aspect-ratio:11/10; max-width:380px; overflow:hidden;}
.profile-photo-sub img{width:100%; height:100%; object-fit:cover;}
.profile-body > .text-link{margin-top:30px; display:inline-flex;}

@media (max-width:1023px){
  .profile-grid, .profile-grid.reverse{grid-template-columns:1fr; gap:36px;}
  .profile-grid.reverse .profile-photo, .profile-grid.reverse .profile-body{order:initial;}
}

/* =========================================================
   ACCESS / SALON PAGE
   ========================================================= */
.salon-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:16px; margin-bottom:56px;
}
.salon-gallery-item{position:relative; overflow:hidden;}
.salon-gallery-item.large{grid-column:span 2; grid-row:span 2;}
.salon-gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.salon-gallery-item:hover img{transform:scale(1.05);}
.salon-gallery-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--font-sans-en); font-size:11px; letter-spacing:.08em; color:var(--color-white);
  background:rgba(17,17,17,.5); padding:6px 12px;
}
.salon-lead{max-width:var(--text-width); font-size:14.5px; color:var(--color-text-muted); line-height:2.1;}

@media (max-width:1023px){
  .salon-gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px;}
  .salon-gallery-item.large{grid-column:span 2;}
}
@media (max-width:640px){
  .salon-gallery{grid-template-columns:1fr; grid-auto-rows:220px;}
  .salon-gallery-item.large{grid-column:1; grid-row:auto;}
}

.flow-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--color-line);
}
.flow-item{background:var(--color-background); padding:44px 32px;}
.flow-num{font-family:var(--font-serif-en); font-style:italic; font-size:32px; color:var(--color-accent); display:block;}
.flow-item h3{font-family:var(--font-serif-ja); font-size:17px; margin-top:18px; margin-bottom:14px;}
.flow-item p{font-size:12.5px; color:var(--color-text-muted); line-height:1.95;}
@media (max-width:1023px){.flow-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.flow-list{grid-template-columns:1fr;}}

.faq-list{max-width:var(--text-width);}
.faq-item{
  border-bottom:1px solid var(--color-line); padding:22px 0;
}
.faq-item:first-child{border-top:1px solid var(--color-line);}
.faq-item summary{
  cursor:pointer; font-family:var(--font-serif-ja); font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; font-family:var(--font-serif-en); font-size:22px; color:var(--color-text-muted);
  transition:transform var(--t-fast);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:16px; font-size:13.5px; color:var(--color-text-muted); line-height:2; max-width:56ch;}

/* =========================================================
   STYLISH / UX UPGRADE LAYER
   ========================================================= */

/* subtle paper grain for a magazine-like depth (very low opacity) */
body::before{
  content:'';
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* smooth page entrance */
body{opacity:0; animation:page-in .7s var(--ease) .05s forwards;}
@keyframes page-in{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  body{opacity:1; animation:none;}
}

/* soft fade veil used for internal-link page transitions */
.page-veil{
  position:fixed; inset:0; background:var(--color-white); z-index:3000;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.page-veil.is-active{opacity:1; pointer-events:all;}

/* refined selection + focus */
::selection{background:var(--color-accent); color:#ffffff;}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:1px solid var(--color-accent); outline-offset:4px;
}

/* thin reading-progress indicator pinned to the very top */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1500;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:var(--color-accent); transition:width .1s linear;
}

/* floating back-to-top */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:48px; height:48px; border:1px solid var(--color-line);
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  color:var(--color-text); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s ease, border-color .3s ease;
}
.back-to-top.is-visible{opacity:1; transform:translateY(0); pointer-events:all;}
.back-to-top:hover{background:var(--color-dark); color:var(--color-white); border-color:var(--color-dark);}
.back-to-top .bt-arrow{transition:transform .3s var(--ease);}
.back-to-top:hover .bt-arrow{transform:translateY(-3px);}
@media (max-width:640px){.back-to-top{right:16px; bottom:16px; width:42px; height:42px;}}

/* animated underline for eyebrow labels, draws in with .reveal */
.eyebrow-en{position:relative; display:inline-block; padding-bottom:10px;}
.eyebrow-en::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--color-accent); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease) .15s;
}
.reveal.is-visible .eyebrow-en::after,
.is-visible > .eyebrow-en::after{transform:scaleX(1);}

/* large translucent numerals as an editorial accent behind section titles
   (pure CSS counter — no markup changes needed, numbers are decorative) */
body{counter-reset:secnum;}
.section-head{position:relative; counter-increment:secnum; overflow:hidden;}
.section-head::before{
  content:counter(secnum, decimal-leading-zero);
  position:absolute; top:-.15em; right:-.05em; z-index:-1;
  font-family:var(--font-serif-en); font-style:italic; font-weight:400;
  font-size:clamp(70px,9vw,140px); color:var(--color-text);
  opacity:.045; line-height:1; pointer-events:none; user-select:none;
}
@media (max-width:767px){.section-head::before{display:none;}}

/* refined buttons: slightly more premium hover motion */
.btn{transition:background var(--t-fast), color var(--t-fast), letter-spacing var(--t-fast), transform var(--t-fast);}
.btn:hover{letter-spacing:.2em; transform:translateY(-1px);}
.text-link .arrow{display:inline-block;}

/* image hover polish: subtle brightness dip alongside existing scale rules */
.look-photo img, .style-photo img, .menu-card-photo img, .staff-photo img,
.essay-photo img, .salon-gallery-item img, .spa-photo img{
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.look-item:hover .look-photo img, .style-card:hover .style-photo img,
.menu-card:hover .menu-card-photo img, .staff-card:hover .staff-photo img,
.salon-gallery-item:hover img{
  filter:brightness(1.03);
}

/* mobile nav: numbered, staggered entrance */
.mobile-nav ul{counter-reset:navitem;}
.mobile-nav li{
  counter-increment:navitem;
  opacity:0; transform:translateX(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-nav.is-open li{opacity:1; transform:translateX(0);}
.mobile-nav.is-open li:nth-child(1){transition-delay:.08s;}
.mobile-nav.is-open li:nth-child(2){transition-delay:.14s;}
.mobile-nav.is-open li:nth-child(3){transition-delay:.20s;}
.mobile-nav.is-open li:nth-child(4){transition-delay:.26s;}
.mobile-nav.is-open li:nth-child(5){transition-delay:.32s;}
.mobile-nav.is-open li:nth-child(6){transition-delay:.38s;}
.mobile-nav li a{position:relative; display:inline-flex; align-items:baseline; gap:14px;}
.mobile-nav li a::before{
  content:counter(navitem, decimal-leading-zero);
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.05em; color:var(--color-accent);
}

/* category-nav scrollspy active state (menu.html) */
.category-nav a.is-current{color:var(--color-text); background:var(--color-background);}

/* style-grid: give it the same unaligned, editorial rhythm as the TOP lookbook */
@media (min-width:1024px){
  .style-grid{grid-template-columns:repeat(3,1fr); row-gap:64px;}
  .style-card:nth-child(3n+2){margin-top:44px;}
  .style-card:nth-child(3n+3){margin-top:-12px;}
}

/* hero parallax hook (JS toggles transform on .hero-img / .page-hero .hero-img) */
.hero .hero-img, .page-hero .hero-img{will-change:transform;}

/* accessible skip-to-content link (visible on keyboard focus only) */
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:4000;
  background:var(--color-dark); color:var(--color-white);
  font-family:var(--font-sans-en); font-size:12px; letter-spacing:.08em;
  padding:12px 20px; transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;}
/* Portfolio demo disclosure */
.demo-banner{
  position:relative; z-index:300; padding:7px 16px;
  background:#b9d0d8; color:#111; text-align:center;
  font-size:11px; font-weight:500; letter-spacing:.08em; line-height:1.5;
}
.site-header{top:31px;}
.portfolio-notice{padding:52px 0; background:#edf4f6; color:#1c1c1c; border-top:1px solid #cfdee3;}
.portfolio-notice .wrap{max-width:900px;}
.portfolio-notice-label{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.18em; color:#607d87;}
.portfolio-notice h2{font-family:var(--font-serif-ja); font-size:clamp(18px,2.6vw,25px); margin-top:10px; line-height:1.65;}
.portfolio-notice p:last-child{margin-top:14px; font-size:13px; line-height:1.9; color:#4f5d62;}
.demo-link{position:relative;}
.demo-link::before{content:'DEMO'; font-family:var(--font-sans-en); font-size:8px; letter-spacing:.08em; vertical-align:super; margin-right:4px;}
.demo-map{height:100%; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#e9eeee,#d8e2e5); color:#516268; text-align:center; padding:24px;}
.demo-map span{font-family:var(--font-sans-en); font-size:12px; letter-spacing:.2em;}
.demo-map strong{font-family:var(--font-serif-ja); font-size:22px; font-weight:500;}
.demo-map small{font-size:12px;}
body.nav-open{overflow:hidden;}
@media (max-width:640px){
  .demo-banner{font-size:10px; padding:6px 10px;}
  .site-header{top:42px;}
  .demo-map{min-height:300px;}
}


/* Portfolio demo disclosure */
.demo-banner{
  position:relative; z-index:300; padding:7px 16px;
  background:#b9d0d8; color:#111; text-align:center;
  font-size:11px; font-weight:500; letter-spacing:.08em; line-height:1.5;
}
.site-header{top:31px;}
.portfolio-notice{padding:52px 0; background:#edf4f6; color:#1c1c1c; border-top:1px solid #cfdee3;}
.portfolio-notice .wrap{max-width:900px;}
.portfolio-notice-label{font-family:var(--font-sans-en); font-size:11px; letter-spacing:.18em; color:#607d87;}
.portfolio-notice h2{font-family:var(--font-serif-ja); font-size:clamp(18px,2.6vw,25px); margin-top:10px; line-height:1.65;}
.portfolio-notice p:last-child{margin-top:14px; font-size:13px; line-height:1.9; color:#4f5d62;}
.demo-link{position:relative;}
.demo-link::before{content:'DEMO'; font-family:var(--font-sans-en); font-size:8px; letter-spacing:.08em; vertical-align:super; margin-right:4px;}
.demo-map{height:100%; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#e9eeee,#d8e2e5); color:#516268; text-align:center; padding:24px;}
.demo-map span{font-family:var(--font-sans-en); font-size:12px; letter-spacing:.2em;}
.demo-map strong{font-family:var(--font-serif-ja); font-size:22px; font-weight:500;}
.demo-map small{font-size:12px;}
body.nav-open{overflow:hidden;}
@media (max-width:640px){
  .demo-banner{font-size:10px; padding:6px 10px;}
  .site-header{top:42px;}
  .demo-map{min-height:300px;}
}