/* ═══════════════════════════════════════════════════════════
   PAGE — houmon.html (visit beauty)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 100svh; min-height: 640px;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--surface2);
}
.hbg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: 0;
}
.hbg:nth-child(1) { animation: fade1 18s ease-in-out infinite; }
.hbg:nth-child(2) { animation: fade2 18s ease-in-out infinite; }
.hbg:nth-child(3) { animation: fade3 18s ease-in-out infinite; }
@keyframes fade1 { 0%,30%{opacity:.98} 36%,95%{opacity:0} 100%{opacity:.98} }
@keyframes fade2 { 0%,6%{opacity:0} 30%,63%{opacity:.98} 69%,100%{opacity:0} }
@keyframes fade3 { 0%,63%{opacity:0} 69%,95%{opacity:.98} 100%{opacity:0} }
.hvid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: .12;
}
.hgrad {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.88) 0%,
    rgba(10,10,10,.58) 45%,
    rgba(10,10,10,.38) 100%
  );
}
.hvline {
  position: absolute; top: 0; right: clamp(70px,14vw,150px);
  z-index: 3; width: 1px; height: 100%;
  background: linear-gradient(to bottom,
    transparent 5%, rgba(200,169,110,.2) 30%,
    rgba(200,169,110,.2) 70%, transparent 95%);
}
.hbody {
  position: relative; z-index: 4;
  padding: clamp(2rem,6vw,5rem);
  padding-bottom: clamp(4rem,10vh,8rem);
  max-width: 780px;
}
.htag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .68rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.75rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.htag::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.hero-en {
  font-family: var(--serif);
  font-size: clamp(4rem,11vw,9rem);
  font-weight: 700; line-height: .9; letter-spacing: -.02em;
  color: #fff; display: block; margin-bottom: .35rem;
  text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
.hero-ja {
  font-size: clamp(1.4rem,3vw,2.2rem); font-weight: 300;
  letter-spacing: .28em; color: var(--gold);
  display: block; margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hcopy {
  font-size: clamp(.92rem,1.4vw,1.05rem); color: rgba(255,255,255,.88);
  letter-spacing: .08em; margin-bottom: 1.5rem;
  line-height: 2.1; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hpills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.hpill {
  font-size: .72rem; letter-spacing: .12em;
  border: 1px solid rgba(255,255,255,.35); padding: .32rem .8rem;
  color: rgba(255,255,255,.82);
}
.hacts { display: flex; gap: .85rem; flex-wrap: wrap; }
.hscroll {
  position: absolute; bottom: 2rem; right: 2.5rem; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.45); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
}
.hscroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollpulse 2.4s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%,100% { opacity:.35; transform:scaleY(.75) }
  50%     { opacity:1;   transform:scaleY(1) }
}

/* ── Trust bar ───────────────────────────────────────────────── */
#trust {
  background: var(--surface); padding: 0;
  border-bottom: 1px solid var(--border);
}
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.trust-item {
  padding: 2.25rem 1.5rem; text-align: center;
  border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-num {
  font-family: var(--serif);
  font-size: clamp(1.6rem,3vw,2.6rem);
  color: var(--accent); line-height: 1; margin-bottom: .45rem;
}
.trust-num sup { font-size: .45em; vertical-align: super; }
.trust-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 680px) {
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(1),
  .trust-item:nth-child(2) { border-bottom: 1px solid var(--border); }
  .trust-item { padding: 1.75rem 1rem; }
}

/* ── About ───────────────────────────────────────────────────── */
#about { background: var(--bg); }
.agrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem); align-items: start;
}
@media (max-width: 768px) { .agrid { grid-template-columns: 1fr; } }
.avid {
  position: relative; aspect-ratio: 16/9;
  overflow: hidden; background: var(--surface);
}
.avid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.atxt h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem,2.5vw,1.85rem);
  font-weight: 400; line-height: 1.35; margin-bottom: 1.4rem; color: var(--text);
}
.atxt p { color: var(--muted); line-height: 2; margin-bottom: 1rem; font-size: .95rem; }
.spills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.spill {
  font-size: .72rem; letter-spacing: .12em;
  border: 1px solid rgba(138,106,56,.3); padding: .32rem .8rem;
  color: var(--muted); transition: .2s var(--ease);
}
.spill:hover { border-color: var(--accent); color: var(--accent); }

/* ── Flow / steps ────────────────────────────────────────────── */
#flow { background: var(--surface); }
.flow-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--border);
}
.flow-step { background: var(--surface); padding: 2.25rem 1.75rem; }
.flow-num {
  font-family: var(--serif);
  font-size: 2.75rem; font-weight: 700; font-style: italic;
  color: var(--accent); opacity: .28; line-height: 1; margin-bottom: 1rem;
}
.flow-step h3  { font-size: 1rem; font-weight: 500; color: var(--text); margin-bottom: .65rem; }
.flow-step p   { font-size: .9rem; line-height: 2; color: var(--muted); }
@media (max-width: 768px) { .flow-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .flow-grid { grid-template-columns: 1fr; } }

/* ── Audience split ──────────────────────────────────────────── */
#audience { background: var(--bg); }
.audience-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: var(--border);
}
@media (max-width: 768px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { background: var(--bg); padding: 3rem 2.5rem; }
.audience-card:nth-child(2) { background: var(--surface); }
.audience-icon {
  width: 48px; height: 48px;
  border: 1px solid rgba(138,106,56,.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.75rem;
}
.audience-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.audience-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem,2.5vw,1.75rem);
  font-weight: 400; color: var(--text); margin-bottom: 1rem; line-height: 1.3;
}
.audience-card > p { font-size: .95rem; line-height: 2.1; color: var(--muted); margin-bottom: 1.75rem; }
.audience-list { list-style: none; margin-bottom: 2.25rem; }
.audience-list li {
  font-size: .925rem; padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text); display: flex; align-items: center; gap: .65rem;
}
.audience-list li::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0;
  background: var(--accent); border-radius: 50%;
}
@media (max-width: 480px) { .audience-card { padding: 2rem 1.5rem; } }

/* ── Gallery ─────────────────────────────────────────────────── */
#gallery { background: var(--surface); }
.gwrap { margin-top: 2rem; position: relative; padding-bottom: 37.5%; height: 0; overflow: hidden; background: var(--bg); }
.gwrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; }

/* ── Menu / price ────────────────────────────────────────────── */
#menu { background: var(--bg); }
.mtabs {
  display: flex; margin: 2rem 0 0;
  border-bottom: 1px solid rgba(138,106,56,.25);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mtabs::-webkit-scrollbar { display: none; }
.mtab {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .7rem 1.3rem; color: rgba(26,24,20,.4);
  position: relative; white-space: nowrap; transition: color .2s; flex-shrink: 0;
  min-height: 44px; display: flex; align-items: center;
}
.mtab::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 1px; background: var(--accent); transform: scaleX(0);
  transition: transform .28s var(--ease);
}
.mtab.on { color: var(--text); }
.mtab.on::after { transform: scaleX(1); }
.mpanel { display: none; }
.mpanel.on { display: block; }
.price-wrap { position: relative; margin-top: 1.5rem; }
.price-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 40px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg));
}
.price-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.price-scroll::-webkit-scrollbar { display: none; }
.price-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.price-table th, .price-table td {
  text-align: left; padding: 1rem 1.1rem; font-weight: 400;
  font-size: .97rem; border-bottom: 1px solid rgba(26,24,20,.1); line-height: 1.6;
}
.price-table thead th {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .65rem; font-weight: 500;
}
.price-table tbody tr:hover th,
.price-table tbody tr:hover td { background: rgba(26,24,20,.03); }
.price-table .pt-name { color: var(--text); }
.price-table .pt-name small { color: var(--muted); font-size: .8em; display: block; margin-top: .15rem; }
.price-table td { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.price-table .pt-group th {
  color: var(--accent); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  padding-top: 1.5rem; padding-bottom: .6rem;
  border-bottom: 1px solid rgba(138,106,56,.28); font-weight: 500;
}
.vnote {
  margin-top: 1.5rem; border: 1px solid rgba(138,106,56,.28);
  padding: 1.2rem 1.5rem; background: var(--accent-bg);
  font-size: .9rem; line-height: 2; color: rgba(26,24,20,.72);
}
.vnote strong { color: var(--accent); font-weight: 500; }
.mnote {
  margin-top: 1.5rem; font-size: .875rem; color: var(--muted);
  padding-left: .9rem; border-left: 2px solid rgba(138,106,56,.3);
}

/* ── Ticket / city service ───────────────────────────────────── */
#ticket { background: var(--surface); }
.tgrid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--border); margin-top: 1px;
}
.tcard { background: var(--surface); padding: 2rem 1.75rem; }
.tcard h3 {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .85rem;
}
.tcard p       { font-size: .92rem; line-height: 2; color: var(--muted); }
.tcard strong  { color: var(--text); font-weight: 600; }
.ticket-note   { font-size: .8rem; color: var(--muted); margin-top: .5rem; }
@media (max-width: 768px) {
  .tgrid { grid-template-columns: 1fr; }
  .tcard { padding: 1.5rem 1.25rem; }
}

/* ── FAQ ─────────────────────────────────────────────────────── */
#faq { background: var(--bg); }
.faq-list { margin-top: 2.5rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem .25rem; font-size: 1rem; font-weight: 500;
  color: var(--text); cursor: pointer; user-select: none; min-height: 56px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 300;
  color: var(--accent); flex-shrink: 0;
  transition: transform .3s var(--ease); line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body {
  padding: 0 .25rem 1.4rem;
  font-size: .95rem; line-height: 2.1; color: var(--muted);
}

/* ── Hours ───────────────────────────────────────────────────── */
#hours { background: var(--surface); }
.hrgrid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--border);
}
.hrcard { background: var(--surface); padding: 2rem 1.75rem; }
.hrcard h3 {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .85rem;
}
.hrcard p      { font-size: .95rem; line-height: 2; color: var(--muted); }
.hrcard strong { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
  .hrgrid { grid-template-columns: 1fr; }
  .hrcard { padding: 1.5rem 1.25rem; }
}

/* ── CTA banner ──────────────────────────────────────────────── */
#ctabanner {
  background: var(--accent);
  padding: clamp(4.5rem,8vw,7rem) 0;
  text-align: center; position: relative; overflow: hidden;
}
#ctabanner::before {
  content: 'i hair'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif); font-size: clamp(7rem,20vw,16rem);
  font-weight: 700; font-style: italic; color: rgba(0,0,0,.06);
  letter-spacing: -.02em; white-space: nowrap; pointer-events: none; line-height: 1;
}
#ctabanner h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem,3.5vw,3rem);
  font-weight: 400; color: #fff; margin-bottom: .6rem; line-height: 1.25;
}
.cta-lead { font-size: .9rem; color: rgba(255,255,255,.78); letter-spacing: .08em; margin-bottom: .5rem; }
.cta-tel-big {
  font-family: var(--serif);
  font-size: clamp(1.75rem,4vw,3rem);
  color: #fff; letter-spacing: .08em; margin-bottom: .35rem; display: block;
}
.cta-hours { font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 2.25rem; }
.cbtns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ── Contact ─────────────────────────────────────────────────── */
#contact { background: var(--surface); }
.ctgrid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--border);
}
.ctcard { background: var(--surface); padding: 2rem 1.75rem; }
.ctcard h3 {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .85rem;
}
.ctcard p { font-size: .95rem; line-height: 2; color: var(--muted); }
@media (max-width: 768px) {
  .ctgrid { grid-template-columns: 1fr; }
  .ctcard { padding: 1.5rem 1.25rem; }
}
.cmap { margin-top: 1px; }
.cmap iframe { width: 100%; height: 320px; border: none; display: block; }

/* ── Sticky mobile CTA ───────────────────────────────────────── */
#sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
  background: rgba(245,242,237,.97);
  border-top: 1px solid var(--border);
  padding: .8rem 1rem;
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.07);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}
#sticky-cta.visible { transform: translateY(0); }
.sticky-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem; min-height: 50px; font-size: .9rem; font-weight: 500;
  letter-spacing: .05em; border: 1px solid transparent; border-radius: 2px;
  transition: opacity .18s;
}
.sticky-btn:active { opacity: .8; }
.sticky-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.sticky-btn--tel  { background: var(--accent); color: #fff; }
.sticky-btn--mail { border-color: var(--accent); color: var(--accent); }

/* sticky-cta only shown on mobile — desktop: never display */
@media (min-width: 769px) { #sticky-cta { display: none !important; } }

/* bottom padding on mobile so last section is not hidden by sticky bar */
@media (max-width: 768px) { body { padding-bottom: 82px; } }