:root{
  --bg:#050505;
  --panel:#0a0b0b;
  --panel2:#0d0e0f;
  --line:rgba(255,255,255,.17);
  --text:#f5f5f5;
  --muted:#b7b7b7;
  --soft:#858585;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.wrap{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(5,5,5,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:66px;display:grid;grid-template-columns:300px 1fr 150px;
  align-items:center;gap:22px;
}
.brand img{width:255px;height:auto}
.main-nav{display:flex;justify-content:center;gap:38px;font-size:11px;letter-spacing:.01em}
.main-nav a{opacity:.88;transition:.2s}.main-nav a:hover{opacity:1}
.reserve-pill{
  justify-self:end;background:#f1f1f1;color:#111;border-radius:999px;
  padding:11px 22px;font-weight:800;font-size:13px;
}
.reserve-pill span{margin-left:16px}
.mobile-toggle{display:none;background:none;border:0;color:white;font-size:26px}

.hero{
  min-height:430px;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.95) 31%,rgba(5,5,5,.34) 58%,rgba(5,5,5,.05) 100%),
    url("assets/home-hero.jpg") 66% center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero .wrap{min-height:430px;display:flex;align-items:center}
.hero-copy{width:min(620px,66%);padding-top:8px}
.hero h1{
  font-size:clamp(31px,3.5vw,48px);
  line-height:1.08;margin:0;font-weight:800;letter-spacing:-.05em;
}
.hero-line{display:block;white-space:nowrap}
.hero h1 em{font-style:italic;font-weight:900}
.rule{width:28px;height:2px;background:white;margin:18px 0 14px}
.hero-location{
  font-size:9px;line-height:1.5;letter-spacing:.31em;color:#ddd;margin-bottom:1px;
}
.meta{font-size:9px;line-height:1.75;letter-spacing:.29em;color:#ddd}
.tagline-small{
  position:absolute;left:max(24px,calc((100% - var(--max))/2));bottom:26px;
  font-size:8px;line-height:1.7;letter-spacing:.26em;color:#d0d0d0
}

.bridge{padding:27px 20px;text-align:center;background:#0a0b0b;border-bottom:1px solid var(--line)}
.bridge h2{margin:0;font-size:20px;font-weight:400;letter-spacing:.40em}
.bridge p{margin:10px 0 0;font-size:8px;letter-spacing:.30em;color:#bcbcbc}

.about{display:grid;grid-template-columns:1.02fr .98fr;min-height:355px;background:#050505;border-bottom:1px solid var(--line)}
.about-photo{background:url("assets/about-car.jpg") center/cover no-repeat;min-height:355px}
.about-copy{padding:38px 52px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:10px;letter-spacing:.35em;color:#cfcfcf}
.display{font-size:clamp(27px,3vw,42px);font-style:italic;line-height:1.03;margin:11px 0 18px;font-weight:900}
.about-copy>p{font-size:13px;line-height:1.62;color:#ddd;margin:0 0 20px}
.values{display:grid;gap:0}
.value{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.value:first-child{border-top:0}
.value .num{font-size:28px;font-weight:300;color:#e4e4e4}
.value strong{display:block;font-size:11px;letter-spacing:.08em;margin-bottom:4px}
.value span{font-size:10px;color:#c7c7c7}

.programs{padding:18px 0 34px;background:#060606}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.program-card{border:1px solid var(--line);background:#090a0a;overflow:hidden;transition:.25s}
.program-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35)}
.program-card img{width:100%;aspect-ratio:1.75;object-fit:cover;filter:grayscale(100%)}
.program-body{padding:16px 16px 14px}
.program-body h3{margin:0 0 7px;font-size:17px;font-style:italic;font-weight:900}
.program-body p{margin:0 0 16px;font-size:11px;line-height:1.55;color:#ddd;min-height:34px}
.view-details{font-size:8px;letter-spacing:.20em;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between}

.reservation{padding:55px 0;background:linear-gradient(180deg,#080909,#050505);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reservation-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.reservation h2{font-size:clamp(34px,4vw,48px);font-style:italic;line-height:1.0;margin:10px 0 14px;font-weight:900}
.reservation-copy>p{font-size:16px;line-height:1.45;margin:0 0 22px}
.naver-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:300px;padding:14px 25px;border-radius:999px;background:#f3f3f3;color:#111;font-size:15px;font-weight:800}
.steps{border-left:1px solid var(--line);padding-left:38px}
.step{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .num{font-size:39px;font-weight:300}
.step strong{display:block;font-size:10px;letter-spacing:.30em;margin-bottom:5px}
.step span{font-size:12px;color:#ddd}

.contact{padding:38px 0 26px;background:#070808}
.contact-title{text-align:center;margin-bottom:24px}
.contact-title h2{font-weight:400;font-size:20px;letter-spacing:.35em;margin:0}
.contact-title p{font-size:9px;letter-spacing:.3em;color:#cfcfcf}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-item{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;padding:20px 18px;border-left:1px solid var(--line)}
.contact-item:first-child{border-left:0}
.contact-item svg{width:22px;height:22px;fill:none;stroke:white;stroke-width:1.6}
.contact-item strong{display:block;font-size:9px;letter-spacing:.28em;color:#dcdcdc;margin-bottom:6px}
.contact-item span{font-size:10px;white-space:nowrap}
.footer{padding:22px 0 24px;display:flex;align-items:end;justify-content:space-between}
.footer-left img{width:165px}
.footer-left p,.footer-right{font-size:8px;letter-spacing:.24em;color:#c8c8c8;line-height:1.8}
.footer-right{text-align:right;font-weight:700}

.detail-hero{min-height:470px;position:relative;border-bottom:1px solid var(--line);background-position:center right;background-size:cover;background-repeat:no-repeat}
.detail-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.94) 35%,rgba(5,5,5,.15) 75%,rgba(5,5,5,.06))}
.detail-hero .wrap{position:relative;z-index:1;min-height:470px;display:flex;align-items:center}
.detail-copy{width:min(540px,54%)}
.detail-copy .label{font-size:12px;letter-spacing:.32em}
.detail-copy h1{font-size:clamp(46px,6vw,72px);line-height:.93;margin:14px 0 8px;font-style:italic;font-weight:900}
.detail-copy .sub{font-size:13px;letter-spacing:.33em;color:#c9c9c9}
.detail-copy h2{font-size:26px;line-height:1.28;margin:26px 0 12px}
.detail-copy p{font-size:14px;line-height:1.68;color:#ddd;margin:0}

.detail-section{padding:32px 0 40px;border-bottom:1px solid var(--line)}
.section-title{text-align:center;margin-bottom:22px}
.section-title h2{font-size:21px;font-weight:400;letter-spacing:.34em;margin:0 0 9px}
.section-title span{font-size:9px;letter-spacing:.32em;color:#c3c3c3}
.service-grid{display:grid;gap:14px}
.service-grid.five{grid-template-columns:repeat(5,1fr)}
.service-grid.six{grid-template-columns:repeat(3,1fr)}
.service-grid.seven{grid-template-columns:repeat(4,1fr)}
.service-card{border:1px solid var(--line);background:#0a0a0a}
.service-card img{width:100%;aspect-ratio:1.35;object-fit:cover;filter:grayscale(100%)}
.service-card .copy{padding:13px 11px}
.service-card strong{font-size:12px;display:block;margin-bottom:3px}
.service-card span{font-size:9px;color:#bbb;line-height:1.45}

.guide{width:100%;border-collapse:collapse;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guide th,.guide td{padding:11px 15px;border-bottom:1px solid var(--line);font-size:12px;text-align:left}
.guide th{width:20%;border-right:1px solid var(--line);font-weight:800}
.guide tr:last-child th,.guide tr:last-child td{border-bottom:0}

.promise-strip{padding:30px 0;text-align:center;background:linear-gradient(90deg,#090909,#111,#090909)}
.promise-strip strong{font-size:17px;line-height:1.5}

.detail-reservation{padding:42px 0 48px;text-align:center}
.detail-reservation h2{font-size:18px;font-weight:400;letter-spacing:.35em;margin:0 0 14px}
.detail-reservation p{font-size:18px;margin:0 0 24px}

@media(max-width:760px){
  .wrap{width:min(calc(100% - 28px),680px)}
  .header-inner{
  height:66px;display:grid;grid-template-columns:300px 1fr 150px;
  align-items:center;gap:22px;
}
  .brand img{width:255px;height:auto}
  .main-nav{display:flex;justify-content:center;gap:38px;font-size:11px;letter-spacing:.01em}
  .reserve-pill{
  justify-self:end;background:#f1f1f1;color:#111;border-radius:999px;
  padding:11px 22px;font-weight:800;font-size:13px;
}
  .mobile-toggle{display:block}
  .hero{
  min-height:430px;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.95) 31%,rgba(5,5,5,.34) 58%,rgba(5,5,5,.05) 100%),
    url("assets/home-hero.jpg") 66% center/cover no-repeat;
  border-bottom:1px solid var(--line);
}

@media(max-width:760px){
  body.nav-open .main-nav{display:flex;justify-content:center;gap:38px;font-size:11px;letter-spacing:.01em}
  body.nav-open .main-nav a{padding:18px 24px;border-top:1px solid var(--line)}
}

@media(max-width:760px){
  .header-inner{grid-template-columns:1fr auto auto}
  .program-card{grid-template-columns:43% 57%}
  .contact-grid{grid-template-columns:1fr}
}


/* ===== FINAL CORRECTIONS ===== */

/* Main hero: only slogan block is image-locked. */
.hero-copy-image{
  width:min(600px,61%) !important;
  padding-top:0 !important;
}
.hero-slogan-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:485px !important;
}

/* Detail pages: all copy remains live HTML text. */
.detail-copy,
.section-title,
.service-card .copy,
.guide,
.promise-strip,
.detail-reservation,
.site-header{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Exact approved white booking-button treatment on ALL detail pages. */
.detail-naver-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:28px !important;
  min-width:340px !important;
  padding:17px 34px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#fbfbfb 0%,#e6e6e6 100%) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  color:#171717 !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.22) !important;
}
.detail-naver-btn span{
  margin:0 !important;
  font-size:22px !important;
  font-weight:500 !important;
  line-height:1 !important;
}

@media(max-width:760px){
  .hero-copy-image{width:76% !important;max-width:510px !important}
  .hero-slogan-image{width:100% !important;max-width:none !important}
  .detail-naver-btn{
    width:min(92%,360px) !important;
    min-width:0 !important;
    padding:16px 24px !important;
    font-size:16px !important;
  }
}


/* ================= DEPLOY READY FINAL LOCK ================= */

/* The approved main HERO slogan remains image artwork. Everything else is live web text. */
.hero-slogan-image{
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
  object-fit:contain;
}

/* Exact approved desktop service-card counts. */
.service-grid.five{grid-template-columns:repeat(5,minmax(0,1fr));}
.service-grid.six{grid-template-columns:repeat(6,minmax(0,1fr));}
.service-grid.five .service-card,
.service-grid.six .service-card{min-width:0;}

/* Detail booking buttons: one unified clean white pill, no green N icon. */
.detail-reservation .detail-naver-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:28px !important;
  min-width:340px !important;
  padding:17px 34px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#fbfbfb 0%,#e6e6e6 100%) !important;
  border:1px solid rgba(255,255,255,.84) !important;
  color:#171717 !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.20) !important;
}
.detail-reservation .detail-naver-btn span{
  margin:0 !important;
  font-size:22px !important;
  font-weight:500 !important;
}

/* Crisp real web text across all non-HERO sections. */
.about-copy,
.program-body,
.reservation,
.contact,
.detail-copy,
.section-title,
.service-card .copy,
.guide,
.promise-strip,
.detail-reservation{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media(max-width:760px){
  .service-grid.five,
  .service-grid.six{grid-template-columns:repeat(2,minmax(0,1fr));}
  .detail-reservation .detail-naver-btn{
    width:min(92%,360px) !important;
    min-width:0 !important;
    padding:16px 24px !important;
    font-size:16px !important;
  }
}


/* =========================================================
   USER MAIN HERO — IMAGE LOCK
   Do not crop / sharpen / recolor / reposition internal design.
   ========================================================= */
.hero-image-locked{
  width:100%;
  margin:0;
  padding:0;
  line-height:0;
  background:#000;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-image-locked > img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
}

/* The menu/header stays as live clickable HTML above the locked hero image. */


/* BASIC SERVICE IMAGE ALIGNMENT FIX */
body:has(.detail-hero[style*="basic-hero.jpg"]) .service-card img{
  width:100% !important;
  aspect-ratio:1.30 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}


/* ===== MAIN HERO EXACT IMAGE LOCK =====
   User image is displayed unchanged. No crop, filter, recolor, sharpening, or text overlay. */
.hero-image-locked-final{
  width:100%;
  margin:0;
  padding:0;
  line-height:0;
  background:#000;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-image-locked-final > img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
  filter:none !important;
  transform:none !important;
}



/* ===== PROGRAM CARD IMAGE EXACT DISPLAY FIX =====
   Keep the user's approved main hero untouched.
   Only fix the 3 program-card thumbnails so they display
   their source images without cover-cropping or visual shift. */
.program-card{
  display:flex;
  flex-direction:column;
}
.program-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:unset !important;
  object-position:center center !important;
  filter:grayscale(100%);
}
.program-card .program-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.program-card .view-details{
  margin-top:auto;
}




/* =========================================================
   DETAIL SERVICE IMAGE ALIGNMENT — FINAL FIX
   The service images are already cropped from the approved designs.
   Do not crop/zoom them again in CSS.
   ========================================================= */
.detail-section .service-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
}

/* BASIC: cancel the previous page-specific cover crop */
body:has(.detail-hero[style*="basic-hero.jpg"]) .service-card img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Keep card copy blocks aligned underneath the images */
.detail-section .service-card{
  display:flex !important;
  flex-direction:column !important;
}
.detail-section .service-card .copy{
  flex:1 !important;
}

/* Signature source crops are square in the approved mockup */
body:has(.detail-hero[style*="signature-hero.jpg"]) .service-card img{
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
}

/* Premium approved crops are about 1.26:1 */
body:has(.detail-hero[style*="premium-hero.jpg"]) .service-card img{
  aspect-ratio:auto !important;
  object-fit:contain !important;
}

@media(max-width:760px){
  .detail-section .service-card img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }
  body:has(.detail-hero[style*="signature-hero.jpg"]) .service-card img{
    aspect-ratio:1 / 1 !important;
  }
}


/* =========================================================
   SIGNATURE SERVICE INCLUDED — APPROVED DESIGN REIMPLEMENT
   Keep all six service items in ONE horizontal row.
   ========================================================= */
.signature-page .signature-services{
  padding:30px 0 20px !important;
  overflow:hidden;
}

.signature-page .signature-service-wrap{
  width:100% !important;
  max-width:none !important;
  padding:0 14px !important;
  margin:0 auto !important;
}

.signature-page .signature-services .section-title{
  margin-bottom:20px !important;
}

.signature-page .signature-services .service-grid.six{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:9px !important;
  width:100% !important;
  align-items:stretch !important;
}

.signature-page .signature-services .service-card{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  background:#090909 !important;
  border:1px solid rgba(255,255,255,.20) !important;
  overflow:hidden !important;
}

.signature-page .signature-services .service-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  filter:grayscale(100%) !important;
}

.signature-page .signature-services .service-card .copy{
  min-height:47px !important;
  padding:10px 5px 11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  flex:0 0 auto !important;
}

.signature-page .signature-services .service-card strong{
  display:block !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.signature-page .signature-services .service-card span{
  display:none !important;
}

/* Keep the six cards as one row even on narrower screens.
   The user can horizontally scroll rather than the design wrapping. */
@media(max-width:900px){
  .signature-page .signature-services{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .signature-page .signature-service-wrap{
    min-width:900px !important;
  }

  .signature-page .signature-services .service-grid.six{
    grid-template-columns:repeat(6, 140px) !important;
    justify-content:center !important;
  }
}


/* ===== SIGNATURE SERVICE STRIP FINAL LOCK ===== */
.signature-service-strip-section{
  width:100%;
  margin:0;
  padding:0;
  background:#050505;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.signature-service-strip-wrap{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:0;
}
.signature-service-strip-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
  filter:none !important;
  transform:none !important;
}


/* ===== SIGNATURE INTRO TEXT ALIGNMENT LOCK =====
   Only fixes the copy directly below the main SIGNATURE title. */
.signature-page .detail-copy{
  width:min(620px,60%) !important;
}

.signature-page .detail-copy .signature-intro{
  margin:0 !important;
  max-width:620px !important;
  font-size:14px !important;
  line-height:1.62 !important;
  color:#ddd !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}

@media(max-width:760px){
  .signature-page .detail-copy{
    width:100% !important;
  }
  .signature-page .detail-copy .signature-intro{
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.6 !important;
  }
}


/* ===== PREMIUM DETAILING SERVICE STRIP FINAL LOCK =====
   Approved image inserted as-is. No crop, filter, resize distortion, or re-layout. */
.premium-service-strip-section{
  width:100%;
  margin:0;
  padding:0;
  background:#050505;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.premium-service-strip-wrap{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:0;
}
.premium-service-strip-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
  filter:none !important;
  transform:none !important;
}

/* =========================================================
   MOBILE HEADER FINAL FIX
   Keep the approved 4 navigation links visible.
   Remove the floating hamburger and floating booking pill
   that overlapped the hero/detail pages on small screens.
   ========================================================= */
@media (max-width:760px){
  .site-header{
    position:relative !important;
    z-index:20 !important;
    background:#050505 !important;
  }

  .header-inner{
    width:100% !important;
    min-height:110px !important;
    height:auto !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:22px !important;
  }

  .brand{
    flex:0 0 62px !important;
    display:flex !important;
    align-items:center !important;
  }

  .brand img{
    display:block !important;
    width:62px !important;
    max-width:62px !important;
    height:auto !important;
  }

  .main-nav{
    flex:1 1 auto !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:center !important;
    gap:8px !important;
    font-size:10px !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }

  .main-nav a{
    display:block !important;
    padding:0 !important;
    border:0 !important;
    white-space:normal !important;
  }

  .mobile-toggle,
  .reserve-pill{
    display:none !important;
  }

  body.nav-open .main-nav{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body.nav-open .main-nav a{
    padding:0 !important;
    border:0 !important;
  }
}

/* =========================================================
   DETAIL HERO MOBILE CLEANUP
   The source hero photos contain an old baked-in nav/booking strip
   in their top area. Cover only that baked-in strip on mobile.
   Main page is untouched.
   ========================================================= */
@media (max-width:760px){
  body.detail-page .detail-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:105px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,#050505 0%,#050505 72%,rgba(5,5,5,.96) 84%,rgba(5,5,5,0) 100%);
  }
  body.detail-page .detail-hero .wrap{
    position:relative;
    z-index:2;
  }
}