.intro {
  min-height: calc(100svh - 110px);
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(rgba(30,28,25,.26),rgba(30,28,25,.46)),url('./salon-hero.jpeg') center 45%/cover no-repeat;
}
.intro:after { content:""; position:absolute; inset:0; border:14px solid rgba(255,255,255,.2); pointer-events:none; }
.intro>* { position:relative; z-index:1; }
.intro h1 { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.16); }
.intro h1 span { display:block; width:100%; text-align:center; }
.hero-logo { font:700 clamp(56px,7vw,94px)/.9 Arial,Helvetica,sans-serif; letter-spacing:2px; display:flex; flex-direction:column; align-items:center; margin-bottom:38px; }
.hero-logo small { font:700 11px Arial,Helvetica,sans-serif; letter-spacing:5px; margin-top:15px; }
.photo-grid { height:auto; grid-template-columns:1.15fr .85fr; grid-template-rows:440px 440px; }
.photo-grid img { height:100%!important; margin:0!important; }
.photo-grid img:nth-child(1) { grid-row:span 2; }
.photo-grid img:nth-child(2) { display:none; }
.flow { padding:130px 8vw; max-width:1200px; margin:auto; }
.flow ol { list-style:none; margin:70px 0 0; padding:0; border-top:1px solid #c7c4bd; }
.flow li { display:grid; grid-template-columns:100px 1fr; gap:30px; padding:38px 0; border-bottom:1px solid #c7c4bd; }
.flow li>span { font:400 18px 'DM Serif Display',serif; }
.flow h3 { margin:0 0 8px; font-size:21px; font-weight:500; }
.flow p { margin:0; max-width:650px; }
.faq { padding:120px 8vw; background:#f4f3ef; }
.faq-list { max-width:900px; margin:60px auto 0; border-top:1px solid #aaa79f; }
.faq details { border-bottom:1px solid #aaa79f; padding:27px 5px; }
.faq summary { cursor:pointer; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary:after { content:'＋'; font-family:Arial,sans-serif; font-size:20px; font-weight:300; }
.faq details[open] summary:after { content:'−'; }
.faq details p { color:#7b7872; padding:15px 40px 0 0; margin:0; }
.access { display:grid; grid-template-columns:.75fr 1.25fr; min-height:560px; background:#eae7e0; }
.access>div { padding:90px 8vw; align-self:center; }
.access h2 { font-size:clamp(27px,3vw,34px); font-weight:400; letter-spacing:.08em; white-space:nowrap; margin:10px 0 25px; }
.access img { width:100%; height:100%; min-height:560px; object-fit:cover; }
.mobile-contact { display:none; }
@media(max-width:760px) {
  body { padding-bottom:64px; }
  .intro { min-height:calc(100svh - 74px); padding:80px 24px; background-position:center 44%; }
  .intro:after { border-width:8px; }
  .hero-logo { font-size:62px; margin-bottom:35px; }
  .hero-logo small { font-size:8px; letter-spacing:3.5px; }
  .intro .en { font-size:13px; }
  .photo-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:400px 280px; gap:10px; }
  .photo-grid img:nth-child(1) { grid-column:span 2; grid-row:auto; }
  .photo-grid img:nth-child(2) { display:none; }
  .flow,.faq { padding:90px 24px; }
  .flow ol,.faq-list { margin-top:45px; }
  .flow li { grid-template-columns:52px 1fr; gap:10px; padding:30px 0; }
  .faq details { padding:22px 0; }
  .faq summary { font-size:16px; }
  .access { display:block; min-height:0; }
  .access>div { padding:75px 24px; }
  .access img { min-height:0; height:390px; }
  .mobile-contact { position:fixed; display:grid; grid-template-columns:1fr 1fr; left:0; right:0; bottom:0; height:64px; z-index:50; box-shadow:0 -5px 24px rgba(0,0,0,.1); }
  .mobile-contact a { display:flex; align-items:center; justify-content:center; background:#74736d; color:#fff; font-size:13px; }
  .mobile-contact a:last-child { background:#fff; color:#55534f; }
}