/* ===== HERO ===== */ 
.hero { 
  position: relative; 
  height: 100vh; 
  
  background-image: url("../assets/main_page/main_page_pic1.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
} 
.hero-bg {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
.hero-content { 
  position: absolute; 
  inset: 0; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  color: #fff; 
  text-align: center; 
} 
.hero-content h1 { 
  font-family: 'Anton', sans-serif; 
  font-size: 48px; 
} 
.hero-content p { 
  font-size: 20px; 
  margin-top: 12px; 
} 
/* ===== BRAND INTRO ===== */ 
.brand-intro { 
  background: #000; 
  color: #fff; 
  text-align: 
  center; 
  padding: 100px 24px; 
} 
.brand-intro h2 {   
  font-family: 'Anton', sans-serif; 
  font-size: 42px; 
  margin-bottom: 24px; 
} 
.brand-intro p { 
  max-width: 600px; 
  margin: 0 auto 40px; 
  line-height: 1.6; } 
  
.btn-outline { 
  display: inline-block; 
  padding: 14px 32px; 
  border: 1px solid #fff; 
  color: #fff; 
  text-decoration: none; 
  border-radius: 999px; } 

/* ===== MENU ===== */

.menu {
  background: #000;
  color:#fff;
  padding: 80px 24px;
  text-align: center;
}
.menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu .btn-outline {
  margin-top: clamp(32px, 10vh, 96px);
}
  
/* ===== SERVICES ===== 
.services { padding: 80px 24px; } 

.services h2 { 
  font-family: 'Anton', sans-serif; 
  text-align: center; 
  margin-bottom: 40px; } 

.services-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 24px; } 

.service-card img { 
  width: 100%; 
  aspect-ratio: 4 / 3; 
  object-fit: cover; }   */
  
.services {
  background: #000;
  color: #fff;
  padding: 48px 24px;
}

.services h2 {
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin-bottom: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;   /* ← 用 gap 控制距离 */
}

.services h2::before,
.services h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-text {
  background: #000;
  padding: 48px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-text h3 {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  text-align: center; 
  margin-bottom: 16px;
}

.service-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #ccc;
  word-break: normal;

/* max-width: 380px;  */
  margin: 0 auto;
  line-height: 1.8; 
}


/* ===== GALLERY ===== */ 
.gallery { /* padding: 80px 24px; */ } 

.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 12px; } 
  
  
  
  
  /* Instagram Follow Section */

.insta-title {
  background: #000;
  padding: 40px 20px;     /* 上下高度适中 */
  text-align: center;
}

.insta-title a {
  color: #fff;
  font-size: 20px;        /* 正常大小 */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  letter-spacing: 1px;

  display: inline-block;
  transition: opacity 0.3s ease;
}

.insta-title a:hover {
  opacity: 0.7;
}


  
/* ===== SUBSCRIBE ===== */ 
.subscribe { padding: 80px 24px; 
  background: #f5f5f5; 
  text-align: center; } 
  
/* ===== FOOTER ===== */ 
.footer { 
  background: #000; 
  color: #fff; 
  padding: 80px 24px;} 
  
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: 24px;}

/* ===== BASIC RESET (建议有) ===== */ 
* { 
  box-sizing: border-box; 
  margin: 0; padding: 0; } 
  
/* ===== HEADER ===== */ 
.site-header { 
  position: sticky; 
  top: 0; background: #fff; 
  z-index: 1000; } 
  
.header-inner { 
  height: 64px; 
  padding: 0 20px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; } 

/* ===== LOGO ===== */ 
.logo img { height: 32px; } 

.logo-sub { 
  display: block; 
  font-size: 10px; 
  letter-spacing: 0.12em; } 

/* ===== HAMBURGER ===== */ 
.nav-toggle { display: flex; 
  width: 32px; 
  height: 24px; 
  flex-direction: column; 
  justify-content: space-between; 
  background: none; 
  border: none; 
  cursor: pointer; } 
  
.nav-toggle span { 
  width: 100%; 
  height: 3px; 
  background: #000; 
  display: block; } 

/* ===== MOBILE MENU ===== */ 
.mobile-menu { 
  position: fixed; 
  inset: 0; 
  background: #3f3c3c; 
  color: #fff; 
  display: none; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  z-index: 2000; } 
  
.mobile-menu.active { display: flex; } 

/* close button */ 
.mobile-menu-close { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  width: 32px; 
  height: 32px; 
  background: none; 
  border: none; 
  cursor: pointer; } 
  
.mobile-menu-close span { 
  position: absolute; 
  top: 50%; 
  left: 50%;
  width: 24px; 
  height: 2px; 
  background: #fff; } 
  
.mobile-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } 

.mobile-menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } 

/* menu links */ 
.mobile-nav { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  font-size: 22px; 
  text-align: center; } 
  
.mobile-nav a { 
  color: #fff; 
  text-decoration: none; } 
  
/* order button */ 
.mobile-order-btn {   
  margin-top: 40px; 
  padding: 12px 28px; 
  background: #777; 
  color: #fff; 
  text-decoration: none; 
  border-radius: 24px; }
  
  
@media (min-width: 1024px) {

}