/* ─────────────────────────────────────
   Makeup Exquisite — home.css (FIXED)
   Home page only — fixed service image gap
───────────────────────────────────── */

/* ── Hero slider ── */
.hero-slider { position:relative; width:100%; height:100vh; min-height:37.5rem; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg); }
.hero-slide  { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.active { opacity:1; }
.slide-parallax { position:absolute; inset:-8% 0; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center top; will-change:transform; }
.slide-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 55%, transparent 100%); }

.hero-wordmark-wrap { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:flex-end; transform-origin:bottom center; pointer-events:none; z-index:4; padding:0 1%; }
.hero-wordmark-wrap svg { width:98%; display:block; }

.slider-nav   { position:absolute; bottom:2rem; right:2.5rem; z-index:20; display:flex; align-items:center; gap:1rem; }
.slider-dots  { display:flex; gap:.5rem; }
.slider-dot   { width:1.25rem; height:1px; background:rgba(255,255,255,.35); border:none; padding:0; cursor:pointer; transition:background .3s, width .3s; }
.slider-dot.active { background:white; width:2.25rem; }
.slider-arrow { background:none; border:1px solid rgba(255,255,255,.4); color:white; width:2.5rem; height:2.5rem; border-radius:50%; font-size:.875rem; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.slider-arrow:hover { background:rgba(255,255,255,.12); }

/* ── Service catalogue ── */
.svc-cat { background:var(--c-pink-light); padding:4rem 5%; position:relative; min-height:70vh; display:flex; align-items:stretch; }

.svc-cat-img-panel {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(32vw,360px); aspect-ratio:4/5;
  border-radius:var(--r-md); overflow:hidden; z-index:1;
  pointer-events:none; opacity:0; transition:opacity .5s ease;
}
.svc-cat:has(.svc-cat-item:hover) .svc-cat-img-panel { opacity:1; }

/* FIX: Ensure image slides fully cover the panel — explicit dimensions + background-size:cover */
.svc-cat-img-slide {
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  opacity:0; transition:opacity .5s ease;
}
.svc-cat-img-slide.active { opacity:1; }

.svc-cat-grid {
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1fr 2.5rem 1fr;
}
.svc-cat-item.svc-cat-featured { grid-column:1/-1; justify-content:center; }
.svc-cat-div { grid-column:2; position:relative; display:flex; align-items:center; overflow:visible; }
.svc-cat-div::after {
  content:''; position:absolute; top:50%;
  left:50%; transform:translateX(-50%);
  width:100vw;
  height:1px; background:rgba(249,120,163,.3);
}

.svc-cat-item { display:flex; align-items:flex-start; gap:.5rem; padding:1.1rem 1.25rem; text-decoration:none; }
.svc-cat-num  { font-size:1.35rem; font-style:italic; color:var(--c-pink); font-family:var(--f-head); letter-spacing:.04em; line-height:1; position:relative; z-index:1; transition:color .3s; padding-top:.15em; }
.svc-cat-name { font-family:var(--f-head); font-weight:300; font-size:clamp(2.5rem,5vw,6.5rem); letter-spacing:-.05em; line-height:.95; color:var(--c-black); transition:color .35s, font-style .25s; position:relative; z-index:1; }
.svc-cat-item:hover .svc-cat-num  { color:var(--c-pink); }
.svc-cat-item:hover .svc-cat-name { color:var(--c-pink); font-style:italic; }

/* ── Photo strip ── */
.photo-strip-wrap { overflow:hidden; width:100%; background:var(--c-pink-light); }
.photo-strip { display:flex; gap:.25rem; width:150%; will-change:transform; }
.ps-item { flex-shrink:0; width:24vw; aspect-ratio:3/4; background-size:cover; background-position:center top; border-radius:var(--r-sm); overflow:hidden; }

/* ── About teaser ── */
.about-teaser      { background:var(--c-pink-light); }
.about-teaser-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-img-placeholder { width:100%; aspect-ratio:3/4; background-size:cover; background-position:center top; background-color:#f0b4c8; border-radius:var(--r-md); }
.about-content { display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; }
.about-creds   { display:flex; gap:2rem; flex-wrap:wrap; padding:1.5rem 0; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); width:100%; }
.about-cred    { display:flex; flex-direction:column; gap:.25rem; }
.about-cred-val   { font-family:var(--f-head); font-weight:300; font-size:1.75rem; letter-spacing:-.03em; color:var(--c-pink); line-height:1; }
.about-cred-label { font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--c-grey-mid); }

/* ── Booking CTA ── */
.booking-cta       { background:var(--c-pink-light); border-bottom:1px solid rgba(249,120,163,.2); box-shadow:0 16px 48px rgba(249,120,163,.14); }
.booking-cta-inner { max-width:42.5rem; display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; }
.booking-cta-sub   { font-size:1.0625rem; color:var(--c-grey-mid); max-width:28.75rem; }

/* ── As Seen In marquee ── */
.feat-marquee-wrap {
  margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid rgba(249,120,163,.15);
}
.feat-marquee-label-txt { display:block; text-align:center; margin-bottom:1.5rem; }
.feat-marquee-outer { overflow:hidden; width:100%; }
.feat-marquee-track { display:flex; animation:feat-scroll 30s linear infinite; will-change:transform; }
.feat-marquee-run   { display:flex; align-items:center; gap:6rem; padding-right:6rem; flex-shrink:0; }

@keyframes feat-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* Marquee image */
.feat-marq-img {
  height:7rem; width:280px;
  object-fit:contain; object-position:center;
  opacity:.55; filter:grayscale(1);
  transition:opacity .35s, filter .35s;
  flex-shrink:0; display:block;
}

/* Publication tooltip — child element approach */
.feat-pub-wrap {
  position:relative; display:inline-flex;
  flex-direction:column; align-items:center; gap:.5rem; cursor:default;
}
.feat-pub-wrap .feat-pub-name {
  position:absolute; bottom:calc(100% + .6rem);
  left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--c-black); color:#fff;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .7rem; white-space:nowrap;
  opacity:0; transition:opacity .22s, transform .22s;
  pointer-events:none;
}
.feat-pub-wrap:hover .feat-pub-name { opacity:1; transform:translateX(-50%) translateY(0); }
.feat-pub-wrap:hover .feat-marq-img { opacity:1; filter:none; }

/* ── Responsive ── */
@media(max-width:1100px) {
  .svc-cat-grid { grid-template-columns:1fr 2rem 1fr; }
  .svc-cat-name { font-size:clamp(2rem,4.5vw,5rem); }
}

@media(max-width:900px) {
  .svc-cat-img-panel { width:min(55vw,320px); }
  .svc-cat-grid { grid-template-columns:1fr; }
  .svc-cat-div  { display:none; }
  .svc-cat-item.svc-cat-featured,
  .svc-cat-item.svc-cat-l,
  .svc-cat-item.svc-cat-r { grid-column:1; justify-content:flex-start; }
  /* Animate in on scroll on mobile */
  .svc-cat-item { transform:translateX(-2rem); opacity:0; transition:transform .5s ease, opacity .5s ease; }
  .svc-cat-item.in { transform:none; opacity:1; }
  .svc-cat-item:nth-child(2) { transition-delay:.05s; }
  .svc-cat-item:nth-child(3) { transition-delay:.10s; }
  .svc-cat-item:nth-child(4) { transition-delay:.15s; }
  .svc-cat-item:nth-child(5) { transition-delay:.20s; }
  .svc-cat-item:nth-child(6) { transition-delay:.25s; }
  .svc-cat-item:nth-child(7) { transition-delay:.30s; }
  .svc-cat-item:nth-child(8) { transition-delay:.35s; }
  .svc-cat-item:nth-child(9) { transition-delay:.40s; }
  .svc-cat-name { font-size:clamp(1.75rem,8vw,3.5rem); }
  .photo-strip .ps-item { width:50vw; }
  .about-teaser-grid { grid-template-columns:1fr; }
}

/* Desktop: svc-cat grid has no divider borders */
@media(min-width:901px) {
  .svc-cat-item.svc-cat-featured,
  .svc-cat-item.svc-cat-l,
  .svc-cat-item.svc-cat-r,
  .svc-cat-div { border-bottom:none; }
  .svc-cat-grid { border-top:none; border-bottom:none; }
}

@media(max-width:768px) {
  .hero-slider { border-radius:0; }
  .slider-nav  { right:1rem; bottom:1.5rem; }
  .feat-marquee-run { gap:2.5rem; padding-right:2.5rem; }
  .feat-marq-img    { height:5rem; width:200px; }
}