/* ===== COLOR THEMES ===== */
body[data-theme="warmcream"] {
  --bg: #f7f4ef;
  --bg-2: #f3ede5;
  --text: #0f0f10;
  --muted: #5f5f5f;
  --accent: #a67c52;
  --accent-light: #c89b6f;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.08);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}

body[data-theme="moderngray"] {
  --bg: #f3f6f8;
  --bg-2: #e9eef1;
  --text: #0f0f10;
  --muted: #60676d;
  --accent: #2f5061;
  --accent-light: #4b6b7a;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.08);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}

body[data-theme="dreamy"] {
  --bg: #fff3f8;
  --bg-2: #f8e8ff;
  --text: #3a2d3f;
  --muted: #7a6a84;
  --accent: #ff6fa9;
  --accent-light: #ffa1c5;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  /* added for parity */
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.08);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}

body[data-theme="blackgold"] {
  --bg: #0b0b0c;
  --bg-2: #161616;
  --text: #d4af37;
  --muted: #b7b7b7;
  --accent: #d4af37;
  --accent-light: #e2c765;
  --accent-contrast: #0b0b0c;
  --card: #121212;
  /* added for parity */
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.6);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.5);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}

body[data-theme="blackgold"] .btn-ghost {
  background: transparent;
  border: 2px solid var(--accent);
  color: #ffffff !important;
}
body[data-theme="blackgold"] .btn-ghost:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--accent-light);
  color: #ffffff !important;
}

body[data-theme="solid"] {
  --bg: #ffffff;
  --bg-2: #f6f7fb;
  --text: #111318;
  --muted: #5c6470;
  --accent: #2b6cff;
  --accent-light: #5b8cff;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  /* added for parity */
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.08);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}

body[data-theme="mint"] {
  --bg: #f0fdfa;
  --bg-2: #d1fae5;
  --text: #064e3b;
  --muted: #4b635e;
  --accent: #10b981;
  --accent-light: #34d399;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  /* added for parity */
  --radius: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.08);
  --tt: .25s cubic-bezier(.2,.8,.2,1);
}


/* ===== Template A: Split Hero (Text Left, Gallery Right) ===== */
.hero-split {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid color-mix(in oklab, var(--bg-2), #000 8%);
  padding: clamp(40px, 4vw, 72px) 0;
  overflow: hidden; /* prevent swiper bleed */
}

/* Two-column layout: text left, media right */
.hero-wrap {
  width: min(1400px, 95%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1/3 and 2/3 split */
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}

.hero-copy, .hero-media {
  align-self: center;
  justify-content: stretch;
  min-width: 0;
}

/* ---- COPY (left) ---- */
.hero-copy { text-align: left; }
.hero-title {
  color: var(--text);
  font-weight: 900;
  font-size: clamp(2.6rem, 2.2rem + 3vw, 4.8rem);
  line-height: 1.05;
  margin: 0 0 12px;
}
.hero-copy p {
  color: var(--accent) !important;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.45rem);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 0 22px;
}
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; margin-top: 20px;
}
.btn-cta {
  border-radius: 999px;
  padding: 16px 28px;
  font-weight: 800;
  background: var(--accent);
  border: 0;
  color: var(--accent-contrast) !important;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease;
}
.btn-cta:hover,
.btn-cta:active {
  background-color: color-mix(in srgb, var(--accent) 85%, white) !important;
}

.btn-service {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Keep your original ghost base */
.btn-ghost {
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  background: var(--card);
  border: 1px solid #e5e2dd;
  color: #222 !important;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.btn-ghost:hover,
.btn-ghost:active {
  background-color: color-mix(in srgb, var(--accent) 15%, white);
  border-color: color-mix(in srgb, var(--accent) 60%, white);
}
.hero-meta { color: var(--muted); font-weight: 700 }
.hero-meta .meta-dot { margin: 0 8px }

/* ---- MEDIA / GALLERY (right) ---- */
.hero-media { 
    position: relative; 
    overflow: hidden; 
}
.hero-swiper { overflow: visible; max-width: 100%; }
.hero-swiper .swiper-wrapper { padding: 12px 0 40px; }

/* Center slide pops; neighbors are softened */
.hero-swiper .swiper-slide {
  width: clamp(260px, 26vw, 360px) !important;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transform: scale(.86);
  opacity: .38;
  filter: blur(1.2px) saturate(.85);
  transition: transform var(--tt), filter var(--tt), opacity var(--tt), box-shadow var(--tt);
}
.hero-swiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
  box-shadow: var(--shadow);
}
.hero-swiper img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4;
}

/* Soft side fades */
.hero-swiper::before, .hero-swiper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6%;
  pointer-events: none; z-index: 2;
}
.hero-swiper::before {
  left: 0; background: linear-gradient(90deg, var(--bg-2), transparent 65%);
}
.hero-swiper::after {
  right: 0; background: linear-gradient(-90deg, var(--bg-2), transparent 65%);
}

/* Controls */
#section-menu {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-top: 1px solid color-mix(in oklab, var(--bg-2), #000 8%);
  padding: clamp(40px, 4vw, 72px) 0 72px;
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow-sm);
}
.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after { font-size: 16px; color: var(--text); }
.hero-swiper .swiper-pagination-bullet { opacity: .35 }
.hero-swiper .swiper-pagination-bullet-active { background: var(--text); opacity: 1 }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .hero-split { padding-top: 120px; }
  .hero-wrap { grid-template-columns: 1.2fr 1.8fr; }
  .hero-copy { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-swiper .swiper-slide { width: clamp(280px, 34vw, 460px) !important; }
}

@media (max-width: 992px) {
  .hero-split { padding-top: 100px; }
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-swiper .swiper-slide { width: clamp(260px, 70vw, 420px) !important; }
}

@media (min-width: 993px) {
  .hero-media {
    position: relative;
    overflow: hidden;
    padding-top: 20px;   /* push downward */
    padding-left: 15px;  /* push rightward */
  }

  .hero-wrap {
    padding-right: 20px; /* keep spacing from right edge */
  }
}