/*
 * Yubeen DH9 Product Detail — consolidated page CSS
 * Version 1.0.0 / plugin 0.27.28
 * Scope: /products/digital-night-vision/dh9/ only
 * Source: approved Elementor Final-QA screens 01–07.
 */

/* ============================================================
   SCREEN 01 — HERO
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 01 — HERO
   Final QA v1.6 — Performance Motion
   ============================================================ */




.ybn-dh9-hero-host,
.ybn-dh9-hero-host > .e-con-inner,
.ybn-dh9-hero-host .elementor-widget-html,
.ybn-dh9-hero-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   01. HERO ROOT
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 {
  --dh9-red: #ff2638;
  --dh9-red-hover: #e91f30;

  position: relative;

  width: 100%;

  
  min-height: clamp(680px, 88svh, 900px);

  overflow: hidden;

  isolation: isolate;

  background:
    #08100b;

  color:
    #ffffff;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ------------------------------------------------------------
   02. BACKGROUND IMAGE
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__image {
  position: absolute;

  z-index: -4;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

 
  object-position: 64% 54%;
}


/* ------------------------------------------------------------
   03. LEFT TEXT LEGIBILITY GRADIENT
   Keeps copy readable while preserving the central product image.
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__shade {
  position: absolute;

  z-index: -3;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 5, 0.88) 0%,
      rgba(2, 7, 5, 0.74) 22%,
      rgba(2, 7, 5, 0.42) 42%,
      rgba(2, 7, 5, 0.10) 64%,
      rgba(2, 7, 5, 0.06) 100%
    );
}


/* ------------------------------------------------------------
   04. CINEMATIC VIGNETTE
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__vignette {
  position: absolute;

  z-index: -2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(1, 5, 4, 0.26) 0%,
      rgba(1, 5, 4, 0.03) 28%,
      rgba(1, 5, 4, 0.04) 70%,
      rgba(1, 5, 4, 0.48) 100%
    );
}


/* ------------------------------------------------------------
   05. CONTENT WIDTH
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
  position: relative;

  width:
    min(
      calc(100% - 96px),
      1420px
    );

  min-height:
    clamp(
      680px,
      88svh,
      900px
    );

  margin:
    0 auto;

  /* Header-safe top spacing. */
  padding:
    138px
    0
    28px;

  box-sizing:
    border-box;
}


/* ------------------------------------------------------------
   06. COPY
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    min(
      520px,
      42vw
    );

  transform:
    translateY(-47%);
}


/* Eyebrow */

#ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow {
  margin:
    0
    0
    18px;

  color:
    var(--dh9-red);

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.30em;

  text-transform:
    uppercase;
}


/* DH9 */

#ybn-dh9-hero-v1 .ybn-dh9-hero__title {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      92px,
      8vw,
      142px
    );

  font-weight:
    720;

  line-height:
    0.82;

  letter-spacing:
    -0.065em;

  text-shadow:
    0 12px 42px rgba(0, 0, 0, 0.28);
}


/* Main statement */

#ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
  max-width:
    520px;

  margin:
    28px
    0
    0;

  color:
    rgba(255, 255, 255, 0.96);

  font-size:
    clamp(
      30px,
      3vw,
      46px
    );

  font-weight:
    520;

  line-height:
    1.05;

  letter-spacing:
    -0.045em;
}


/* Description */

#ybn-dh9-hero-v1 .ybn-dh9-hero__description {
  max-width:
    450px;

  margin:
    22px
    0
    0;

  color:
    rgba(255, 255, 255, 0.78);

  font-size:
    14px;

  font-weight:
    420;

  line-height:
    1.65;

  letter-spacing:
    -0.01em;

  text-wrap:
    balance;
}


/* ------------------------------------------------------------
   07. CTA
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    30px;
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button {
  min-height:
    50px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  box-sizing:
    border-box;

  padding:
    0
    22px;

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    620;

  line-height:
    1;

  text-decoration:
    none;

  --ybn-magnet-x: 0px;
  --ybn-magnet-y: 0px;
  --ybn-hover-lift: 0px;

  transform:
    translate3d(
      var(--ybn-magnet-x),
      calc(var(--ybn-magnet-y) + var(--ybn-hover-lift)),
      0
    );

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button:hover {
  --ybn-hover-lift:
    -2px;
}


/* Primary */

#ybn-dh9-hero-v1 .ybn-dh9-hero__button--primary {
  border:
    1px solid
    var(--dh9-red);

  background:
    var(--dh9-red);

  color:
    #ffffff;

  box-shadow:
    0 14px 34px
    rgba(255, 38, 56, 0.22);
    
  justify-content: center;
  gap: 0;
  padding-left: 22px;
  padding-right: 22px;
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button--primary:hover {
  border-color:
    var(--dh9-red-hover);

  background:
    var(--dh9-red-hover);
}


/* Secondary */

#ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.38);

  background:
    rgba(7, 12, 9, 0.14);

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary:hover {
  border-color:
    rgba(255, 255, 255, 0.66);

  background:
    rgba(255, 255, 255, 0.10);
}


/* ------------------------------------------------------------
   PERFORMANCE MOTION 01
   SECONDARY CTA — LIGHTWEIGHT GLARE HOVER
   Pure CSS. No external library.
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary {
  position:
    relative;

  overflow:
    hidden;
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary > * {
  position:
    relative;

  z-index:
    2;
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary::before {
  content:
    "";

  position:
    absolute;

  z-index:
    1;

  top:
    -55%;

  bottom:
    -55%;

  left:
    -42%;

  width:
    28%;

  pointer-events:
    none;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      rgba(255, 255, 255, 0.28) 50%,
      rgba(255, 255, 255, 0.06) 72%,
      rgba(255, 255, 255, 0.00) 100%
    );

  transform:
    skewX(-18deg)
    translate3d(-150%, 0, 0);

  transition:
    transform 620ms
    cubic-bezier(.2,.7,.2,1),
    opacity 160ms ease;
}


@media (hover: hover) and (pointer: fine) {

  #ybn-dh9-hero-v1 .ybn-dh9-hero__button--secondary:hover::before {
    opacity:
      1;

    transform:
      skewX(-18deg)
      translate3d(560%, 0, 0);
  }

}


/* ------------------------------------------------------------
   08. RIGHT SIDE BRAND NOTE
   ------------------------------------------------------------ */

#ybn-dh9-hero-v1 .ybn-dh9-hero__side-note {
  position:
    absolute;

  top:
    144px;

  right:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    5px;

  color:
    rgba(255, 255, 255, 0.70);

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    0.22em;

  text-align:
    right;

  text-transform:
    uppercase;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.40);
}


#ybn-dh9-hero-v1 .ybn-dh9-hero__side-note strong {
  color:
    rgba(255, 255, 255, 0.94);

  font-weight:
    700;
}



/* ============================================================
   PERFORMANCE MOTION LAYER

   Chosen for the current DH9 Hero:
   1) Blur Fade / Soft Blur In inspired entrance
   2) One-time cinematic background settle
   3) True Focus inspired side-note cycle
   4) Magnet CTA via tiny vanilla JS

   No React, Framer Motion, canvas, shader, particles, or extra asset.
   ============================================================ */


/* ------------------------------------------------------------
   ONE-TIME IMAGE SETTLE
   ------------------------------------------------------------ */

@keyframes ybnDh9HeroImageSettle {

  from {
    opacity:
      0.88;

    transform:
      scale(1.018);
  }

  to {
    opacity:
      1;

    transform:
      scale(1);
  }

}


/* ------------------------------------------------------------
   COPY REVEAL
   ------------------------------------------------------------ */

@keyframes ybnDh9HeroReveal {

  from {
    opacity:
      0;

    filter:
      blur(6px);

    transform:
      translate3d(0, 8px, 0);
  }

  to {
    opacity:
      1;

    filter:
      blur(0);

    transform:
      translate3d(0, 0, 0);
  }

}


/* ------------------------------------------------------------
   SIDE NOTE FOCUS
   ------------------------------------------------------------ */

@keyframes ybnDh9HeroFocus {

  0%,
  21% {
    opacity:
      1;

    filter:
      blur(0);
  }

  31%,
  100% {
    opacity:
      0.48;

    filter:
      blur(0.7px);
  }

}


@media (prefers-reduced-motion: no-preference) {

  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    transform-origin:
      64% 54%;

    animation:
      ybnDh9HeroImageSettle
      1050ms
      cubic-bezier(.18,.72,.18,1)
      both;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__title,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__description,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    opacity:
      0;

    animation:
      ybnDh9HeroReveal
      720ms
      cubic-bezier(.2,.72,.2,1)
      both;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow {
    animation-delay:
      90ms;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__title {
    animation-delay:
      150ms;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
    animation-delay:
      220ms;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__description {
    animation-delay:
      290ms;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    animation-delay:
      360ms;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note span,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note strong {
    animation:
      ybnDh9HeroFocus
      9s
      ease-in-out
      infinite;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note span:nth-child(1) {
    animation-delay:
      0s;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note span:nth-child(2) {
    animation-delay:
      -6s;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note strong {
    animation-delay:
      -3s;
  }

}


@media (prefers-reduced-motion: reduce) {

  #ybn-dh9-hero-v1 .ybn-dh9-hero__image,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__title,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__description,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note span,
  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note strong {
    animation:
      none !important;

    opacity:
      1 !important;

    filter:
      none !important;
  }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (max-width: 1600px) {

  #ybn-dh9-hero-v1 {
    min-height: clamp(660px, 86svh, 860px);
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
    min-height: clamp(660px, 86svh, 860px);
    padding-top: 132px;
    padding-bottom: 40px;
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    object-position: 66% 54%;
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
    width: min(500px, 44vw);
  }

}

/* ============================================================
   NARROW DESKTOP
   ============================================================ */

@media (max-width: 1366px) {

  #ybn-dh9-hero-v1 {
    min-height: 700px;
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
    width: calc(100% - 72px);
    min-height: 700px;
    padding-top: 126px;
    padding-bottom: 24px;
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    object-position: 69% 55%;
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
    width: min(470px, 45vw);
    transform: translateY(-45%);
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__title {
    font-size: clamp(82px, 8vw, 118px);
  }

  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
    font-size: clamp(28px, 3.2vw, 42px);
  }

}

/* ============================================================
   TABLET — 681px to 1024px
   Keeps the desktop visual logic: full-bleed image with overlaid copy.
   ============================================================ */

@media (min-width: 681px) and (max-width: 1024px) {

  #ybn-dh9-hero-v1 {
    min-height:
      clamp(
        720px,
        88svh,
        820px
      );

    background:
      #08100b;
  }


  

  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    top:
      0;

    right:
      0;

    bottom:
      0;

    left:
      0;

    width:
      100%;

    height:
      100%;

    object-fit:
      cover;

    
    object-position:
      78% 52%;
  }


  

  #ybn-dh9-hero-v1 .ybn-dh9-hero__shade {
    background:
      linear-gradient(
        90deg,
        rgba(2, 7, 5, 0.94) 0%,
        rgba(2, 7, 5, 0.90) 24%,
        rgba(2, 7, 5, 0.72) 40%,
        rgba(2, 7, 5, 0.40) 55%,
        rgba(2, 7, 5, 0.12) 72%,
        rgba(2, 7, 5, 0.06) 100%
      );
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__vignette {
    background:
      linear-gradient(
        180deg,
        rgba(1, 5, 4, 0.24) 0%,
        rgba(1, 5, 4, 0.03) 26%,
        rgba(1, 5, 4, 0.05) 68%,
        rgba(1, 5, 4, 0.48) 100%
      );
  }


  /* ------------------------------------------
     INNER
     ------------------------------------------ */

  #ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
    width:
      calc(100% - 56px);

    min-height:
      clamp(
        720px,
        88svh,
        820px
      );

    padding:
      118px
      0
      28px;
  }


  

  #ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
    top:
      50%;

    right:
      auto;

    bottom:
      auto;

    left:
      0;

    width:
      min(
        410px,
        48vw
      );

    transform:
      translateY(-42%);
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow {
    margin-bottom:
      13px;

    font-size:
      9px;

    letter-spacing:
      0.26em;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__title {
    font-size:
      clamp(
        68px,
        9.5vw,
        92px
      );

    line-height:
      0.84;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
    max-width:
      380px;

    margin-top:
      18px;

    font-size:
      clamp(
        25px,
        3.8vw,
        34px
      );

    line-height:
      1.06;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__description {
    max-width:
      360px;

    margin-top:
      14px;

    font-size:
      13px;

    line-height:
      1.55;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    gap:
      9px;

    margin-top:
      20px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__button {
    min-height:
      44px;

    padding:
      0
      16px;

    font-size:
      11px;
  }


  

  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note {
    display:
      none;
  }

}




@media (max-width: 680px) {

  #ybn-dh9-hero-v1 {
    min-height:
      820px;

    background:
      #07100b;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    top:
      0;

    right:
      0;

    bottom:
      auto;

    left:
      0;

    width:
      100%;

    height:
      56%;

    object-fit:
      cover;

    object-position:
      68% center;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(2, 7, 5, 0.12) 0%,
        rgba(2, 7, 5, 0.08) 26%,
        rgba(2, 7, 5, 0.30) 42%,
        rgba(5, 11, 8, 0.80) 54%,
        rgba(7, 16, 11, 0.98) 66%,
        #07100b 78%,
        #07100b 100%
      );
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__vignette {
    background:
      linear-gradient(
        180deg,
        rgba(1, 5, 4, 0.16) 0%,
        transparent 34%,
        rgba(1, 5, 4, 0.10) 58%,
        rgba(1, 5, 4, 0.26) 100%
      );
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
    width:
      calc(100% - 36px);

    min-height:
      820px;

    padding:
      98px
      0
      24px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
    top:
      auto;

    right:
      0;

    bottom:
      58px;

    left:
      0;

    width:
      100%;

    transform:
      none;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__eyebrow {
    margin-bottom:
      12px;

    font-size:
      9px;

    letter-spacing:
      0.25em;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__title {
    font-size:
      clamp(
        68px,
        20vw,
        88px
      );

    line-height:
      0.84;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
    margin-top:
      18px;

    font-size:
      clamp(
        27px,
        7.5vw,
        34px
      );

    line-height:
      1.06;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__description {
    max-width:
      350px;

    margin-top:
      14px;

    font-size:
      13px;

    line-height:
      1.52;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    gap:
      8px;

    margin-top:
      20px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__button {
    min-height:
      44px;

    padding:
      0
      15px;

    font-size:
      11px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__side-note {
    display:
      none;
  }

}



/* ============================================================
   SMALL MOBILE
   <= 420px
   ============================================================ */

@media (max-width: 420px) {

  #ybn-dh9-hero-v1 {
    min-height:
      800px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__inner {
    width:
      calc(100% - 30px);

    min-height:
      800px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__image {
    height:
      54%;

    object-position:
      67% center;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__copy {
    bottom:
      50px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__title {
    font-size:
      clamp(
        64px,
        21vw,
        80px
      );
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__statement {
    font-size:
      clamp(
        25px,
        7.4vw,
        31px
      );
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__description {
    max-width:
      325px;

    font-size:
      12.5px;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    align-items:
      flex-start;

    flex-direction:
      row;

    flex-wrap:
      wrap;
  }


  #ybn-dh9-hero-v1 .ybn-dh9-hero__button {
    min-height:
      43px;

    padding:
      0
      14px;

    font-size:
      10.5px;
  }

}



/* ============================================================
   VERY SMALL MOBILE
   <= 360px
   ============================================================ */

@media (max-width: 360px) {

  #ybn-dh9-hero-v1 .ybn-dh9-hero__actions {
    flex-direction:
      column;
  }

}


/* ============================================================
   SCREEN 02 — REAL MOMENTS
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 02 — REAL MOMENTS
   Cinematic Editorial v2.6 — Desktop Compact Final
   ============================================================ */


/* ------------------------------------------------------------
   ELEMENTOR HOST RESET
   ------------------------------------------------------------ */

.ybn-dh9-video-host,
.ybn-dh9-video-host > .e-con-inner,
.ybn-dh9-video-host .elementor-widget-html,
.ybn-dh9-video-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

#dh9-real-moments {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    #070a08;

  color:
    #ffffff;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ------------------------------------------------------------
   INNER — compact desktop rhythm
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__inner {
  width:
    min(
      calc(100% - 96px),
      1420px
    );

  margin:
    0 auto;

  padding:
    58px
    0
    46px;
}


/* ============================================================
   INTRO
   ============================================================ */

#dh9-real-moments .ybn-dh9-video__intro {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 430px);

  align-items:
    end;

  gap:
    80px;

  margin-bottom:
    26px;
}


/* ------------------------------------------------------------
   LEFT HEADING
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__heading-group {
  min-width:
    0;
}


#dh9-real-moments .ybn-dh9-video__eyebrow {
  margin:
    0
    0
    16px;

  color:
    #ff2638;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.29em;

  text-transform:
    uppercase;
}


#dh9-real-moments .ybn-dh9-video__title {
  max-width:
    820px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      48px,
      5vw,
      76px
    );

  font-weight:
    560;

  line-height:
    0.97;

  letter-spacing:
    -0.05em;
}


/* ------------------------------------------------------------
   RIGHT INTRO
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__intro-side {
  padding-bottom:
    5px;
}


#dh9-real-moments .ybn-dh9-video__description {
  max-width:
    420px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.67);

  font-size:
    14px;

  font-weight:
    420;

  line-height:
    1.65;
}


#dh9-real-moments .ybn-dh9-video__social-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    21px;

  color:
    rgba(255, 255, 255, 0.94);

  font-size:
    12px;

  font-weight:
    620;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


#dh9-real-moments .ybn-dh9-video__social-link:hover {
  opacity:
    0.72;

  transform:
    translateX(2px);
}


/* ============================================================
   VIDEO FRAME

   The image remains the single large click target.
   ============================================================ */

#dh9-real-moments .ybn-dh9-video__frame {
  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    clamp(
      430px,
      25.5vw,
      490px
    );

  aspect-ratio:
    auto;

  overflow:
    hidden;

  background:
    #101510;

  color:
    #ffffff;

  text-decoration:
    none;

  cursor:
    pointer;

  /*
    Scroll Mask Lite
    These variables are updated by a tiny native JS loop only while
    the section is relevant. No sticky section, no extra scroll height.
  */
  --rm-inset:
    0%;

  --rm-radius:
    0px;

  --rm-frame-y:
    0px;

  --rm-frame-opacity:
    1;

  --rm-media-scale:
    1;

  clip-path:
    inset(
      0
      var(--rm-inset)
      0
      var(--rm-inset)
      round
      var(--rm-radius)
    );

  transform:
    translate3d(
      0,
      var(--rm-frame-y),
      0
    );

  opacity:
    var(--rm-frame-opacity);

  will-change:
    clip-path,
    transform,
    opacity;
}


/* ------------------------------------------------------------
   IMAGE
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__media {
  position:
    absolute;

  inset:
    -1.2%;

  display:
    block;

  transform:
    scale(
      var(--rm-media-scale)
    );

  transform-origin:
    50% 50%;

  will-change:
    transform;
}


#dh9-real-moments .ybn-dh9-video__image {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    56% 58%;

  transform:
    scale(1.002);

  transition:
    transform 700ms
    cubic-bezier(.2,.7,.2,1);

  user-select:
    none;

  -webkit-user-drag:
    none;
}


/*
  Hover remains deliberately restrained.
  Scroll motion belongs to the media wrapper;
  hover motion belongs to the image itself.
*/

#dh9-real-moments .ybn-dh9-video__frame:hover
.ybn-dh9-video__image {
  transform:
    scale(1.012);
}


/* ------------------------------------------------------------
   SUBTLE SHADE
   Preserves the real outdoor color while smoothing the transition below.
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 7, 5, 0.07) 0%,
      rgba(3, 7, 5, 0.01) 50%,
      rgba(3, 7, 5, 0.10) 72%,
      rgba(3, 7, 5, 0.26) 100%
    );
}


/* ------------------------------------------------------------
   SMALL FRAME NOTE
   A quiet scene label only; it is not a second CTA.
   ------------------------------------------------------------ */

#dh9-real-moments .ybn-dh9-video__corner {
  position:
    absolute;

  left:
    26px;

  bottom:
    22px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    0.19em;

  text-transform:
    uppercase;

  pointer-events:
    none;
}



/* ============================================================
   VIEWPORT BLUR FADE / PRE-PAINT SAFE

   Important:
   - A tiny bootstrap script adds .ybn-rm-js to <html> BEFORE markup.
   - Therefore the initial animated state exists before first paint.
   - If JavaScript is disabled, no class is added and all content
     remains fully visible.
   - Reduced-motion users never receive the hidden initial state.
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__eyebrow,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__title,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__description,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__social-link {
    opacity:
      0;

    filter:
      blur(6px);

    transform:
      translate3d(
        0,
        10px,
        0
      );

    will-change:
      opacity,
      filter,
      transform;
  }


  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__eyebrow,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__title,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__description,

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__social-link {
    opacity:
      1;

    filter:
      blur(0);

    transform:
      translate3d(
        0,
        0,
        0
      );

    transition-property:
      opacity,
      filter,
      transform;

    transition-duration:
      700ms;

    transition-timing-function:
      cubic-bezier(.2,.7,.2,1);
  }


  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__eyebrow {
    transition-delay:
      0ms;
  }


  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__title {
    transition-delay:
      70ms;
  }


  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__description {
    transition-delay:
      150ms;
  }


  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__intro.is-visible
  .ybn-dh9-video__social-link {
    transition-delay:
      220ms;
  }

}


/* ------------------------------------------------------------
   Scroll Mask initial state is established BEFORE
   the first paint on devices that can actually use the effect.
   No initial "full image -> suddenly masked" frame.
   ------------------------------------------------------------ */

@media
(min-width: 1025px)
and
(hover: hover)
and
(pointer: fine)
and
(prefers-reduced-motion: no-preference) {

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__frame {
    --rm-inset:
      5.2%;

    --rm-radius:
      22px;

    --rm-frame-y:
      9px;

    --rm-frame-opacity:
      0.90;

    --rm-media-scale:
      1.022;
  }

}


@media
(min-width: 681px)
and
(max-width: 1024px)
and
(hover: hover)
and
(pointer: fine)
and
(prefers-reduced-motion: no-preference) {

  html.ybn-rm-js
  #dh9-real-moments
  .ybn-dh9-video__frame {
    --rm-inset:
      3.2%;

    --rm-radius:
      16px;

    --rm-frame-y:
      8px;

    --rm-frame-opacity:
      0.92;

    --rm-media-scale:
      1.018;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media
(min-width: 681px)
and
(max-width: 1024px) {

  #dh9-real-moments .ybn-dh9-video__inner {
    width:
      calc(100% - 48px);

    padding:
      56px
      0
      44px;
  }


  #dh9-real-moments .ybn-dh9-video__intro {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(250px, 310px);

    gap:
      30px;

    margin-bottom:
      26px;
  }


  #dh9-real-moments .ybn-dh9-video__eyebrow {
    margin-bottom:
      12px;

    font-size:
      9px;
  }


  #dh9-real-moments .ybn-dh9-video__title {
    font-size:
      clamp(
        38px,
        5.4vw,
        50px
      );
  }


  #dh9-real-moments .ybn-dh9-video__description {
    font-size:
      12.5px;

    line-height:
      1.55;
  }


  #dh9-real-moments .ybn-dh9-video__social-link {
    margin-top:
      14px;

    font-size:
      11px;
  }


  /*
    Tablet uses an explicitly capped frame for a compact editorial rhythm.
  */

  #dh9-real-moments .ybn-dh9-video__frame {
    height:
      clamp(
        330px,
        43vw,
        420px
      );

    aspect-ratio:
      auto;
  }


  #dh9-real-moments .ybn-dh9-video__image {
    object-position:
      56% 55%;
  }


  #dh9-real-moments .ybn-dh9-video__corner {
    left:
      18px;

    bottom:
      16px;

    font-size:
      7px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media
(max-width: 680px) {

  #dh9-real-moments .ybn-dh9-video__inner {
    width:
      calc(100% - 30px);

    padding:
      42px
      0
      34px;
  }


  #dh9-real-moments .ybn-dh9-video__intro {
    display:
      block;

    margin-bottom:
      20px;
  }


  #dh9-real-moments .ybn-dh9-video__eyebrow {
    margin-bottom:
      10px;

    font-size:
      8px;
  }


  #dh9-real-moments .ybn-dh9-video__title {
    max-width:
      320px;

    font-size:
      clamp(
        32px,
        9vw,
        40px
      );

    line-height:
      0.99;
  }


  #dh9-real-moments .ybn-dh9-video__intro-side {
    margin-top:
      14px;

    padding-bottom:
      0;
  }


  #dh9-real-moments .ybn-dh9-video__description {
    max-width:
      340px;

    font-size:
      12px;

    line-height:
      1.5;
  }


  #dh9-real-moments .ybn-dh9-video__social-link {
    margin-top:
      12px;

    font-size:
      10.5px;
  }


  /*
    v2.5:
    Previous 4:5 portrait frame was the main reason Screen 02
    felt excessively tall on phones. Keep the source as a
    cinematic landscape crop instead.
  */

  #dh9-real-moments .ybn-dh9-video__frame {
    height:
      clamp(
        220px,
        62vw,
        300px
      );

    aspect-ratio:
      auto;
  }


  #dh9-real-moments .ybn-dh9-video__media {
    inset:
      0;
  }


  #dh9-real-moments .ybn-dh9-video__image {
    object-position:
      58% 56%;
  }


  #dh9-real-moments .ybn-dh9-video__corner {
    left:
      13px;

    bottom:
      12px;

    font-size:
      6.5px;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media
(max-width: 420px) {

  #dh9-real-moments .ybn-dh9-video__inner {
    width:
      calc(100% - 28px);

    padding-top:
      38px;

    padding-bottom:
      30px;
  }


  #dh9-real-moments .ybn-dh9-video__frame {
    height:
      clamp(
        210px,
        61vw,
        250px
      );

    aspect-ratio:
      auto;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

  #dh9-real-moments *,
  #dh9-real-moments *::before,
  #dh9-real-moments *::after {
    animation:
      none !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }


  #dh9-real-moments .ybn-dh9-video__frame {
    clip-path:
      none !important;

    transform:
      none !important;

    opacity:
      1 !important;
  }


  #dh9-real-moments .ybn-dh9-video__media {
    transform:
      none !important;
  }

}


/* ============================================================
   SCREEN 03 — NIGHT VISION EXPERIENCE
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 03 — NIGHT VISION EXPERIENCE
   Cinematic Minimal v4.4
   Final Rhythm + Interaction Polish
   ============================================================ */


/* ------------------------------------------------------------
   ELEMENTOR HOST RESET
   ------------------------------------------------------------ */

.ybn-dh9-daynight-host,
.ybn-dh9-daynight-host > .e-con-inner,
.ybn-dh9-daynight-host .elementor-widget-html,
.ybn-dh9-daynight-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #080d09 0%,
      #070b08 100%
    );

  color:
    #ffffff;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ------------------------------------------------------------
   INNER
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__inner {
  width:
    min(
      calc(100% - 96px),
      1500px
    );

  margin:
    0 auto;

  padding:
    62px
    0
    58px;
}


/* ============================================================
   INTRO
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__intro {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(360px, 0.72fr);

  align-items:
    end;

  gap:
    64px;

  margin-bottom:
    28px;
}


/* ------------------------------------------------------------
   INTRO MAIN
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__eyebrow {
  margin:
    0
    0
    15px;

  color:
    #ff2638;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.30em;

  text-transform:
    uppercase;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title {
  max-width:
    820px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      50px,
      5vw,
      78px
    );

  font-weight:
    520;

  line-height:
    0.95;

  letter-spacing:
    -0.055em;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title span {
  display:
    block;
}


/* ------------------------------------------------------------
   INTRO SIDE
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__intro-side {
  padding-bottom:
    4px;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__description {
  max-width:
    390px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.60);

  font-size:
    13px;

  font-weight:
    420;

  line-height:
    1.62;
}


/* ============================================================
   COMPARISON FRAME

   Desktop height is capped so this screen remains compact.
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare {
  position:
    relative;

  width:
    100%;

  height:
    clamp(
      440px,
      29vw,
      520px
    );

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #0d120f;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.14);

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.24);

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    pan-y;

  /*
    Interaction variables
    - label focus follows the actual split
    - grab elasticity is updated only while the user is dragging
  */

  --unaided-opacity:
    0.60;

  --vision-opacity:
    0.86;

  --unaided-blur:
    0.22px;

  --vision-blur:
    0.08px;

  --unaided-scale:
    0.992;

  --vision-scale:
    0.998;

  --grab-scale-x:
    1;

  --grab-scale-y:
    1;

  --grab-shift-x:
    0px;

  --divider-alpha:
    0.42;
}


/* ------------------------------------------------------------
   IMAGES
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center center;

  pointer-events:
    none;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__image--unaided {
  z-index:
    0;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__vision-layer {
  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  overflow:
    hidden;

  clip-path:
    inset(
      0
      0
      0
      var(--split)
    );

  will-change:
    clip-path;
}


/* ------------------------------------------------------------
   SHADE
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__shade {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(2, 5, 3, 0.04) 0%,
      rgba(2, 5, 3, 0.00) 58%,
      rgba(2, 5, 3, 0.22) 100%
    );
}


/* ============================================================
   LABELS
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label {
  position:
    absolute;

  z-index:
    5;

  top:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    7.5px;

  font-weight:
    680;

  line-height:
    1;

  letter-spacing:
    0.19em;

  text-transform:
    uppercase;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.52);

  pointer-events:
    none;

  transform-origin:
    center;

  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--unaided {
  left:
    20px;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--vision {
  right:
    20px;
}


/* ------------------------------------------------------------
   TRUE-FOCUS LABEL RESPONSE

   The currently dominant side becomes slightly clearer and more
   present. The weaker side is never hidden; the effect remains
   informational rather than decorative.
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4
.ybn-dh9-nightvision__label--unaided {
  opacity:
    var(--unaided-opacity);

  filter:
    blur(
      var(--unaided-blur)
    );

  transform:
    scale(
      var(--unaided-scale)
    );
}


#ybn-dh9-nightvision-v4
.ybn-dh9-nightvision__label--vision {
  opacity:
    var(--vision-opacity);

  filter:
    blur(
      var(--vision-blur)
    );

  transform:
    scale(
      var(--vision-scale)
    );
}



#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label-dot {
  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    #ffffff;

  opacity:
    0.66;
}


/* ============================================================
   DIVIDER
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__divider {
  position:
    absolute;

  z-index:
    6;

  top:
    0;

  bottom:
    0;

  left:
    var(--split);

  width:
    26px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translateX(-50%);

  pointer-events:
    none;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__divider-line {
  flex:
    1 1 auto;

  width:
    1px;

  background:
    rgba(
      255,
      255,
      255,
      var(--divider-alpha)
    );
}


/* ------------------------------------------------------------
   MINIMAL GRAB

   Smaller and quieter than v4.0.
   ------------------------------------------------------------ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__grab {
  flex:
    0 0 auto;

  width:
    26px;

  height:
    40px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  margin:
    7px
    0;

  border:
    1px solid
    rgba(255, 255, 255, 0.54);

  border-radius:
    999px;

  background:
    rgba(5, 9, 7, 0.44);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  box-shadow:
    0 7px 18px
    rgba(0, 0, 0, 0.18);

  transform:
    translateX(
      var(--grab-shift-x)
    )
    scaleX(
      var(--grab-scale-x)
    )
    scaleY(
      var(--grab-scale-y)
    );

  transform-origin:
    center;

  transition:
    transform 220ms
    cubic-bezier(.22,.8,.22,1),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}


#ybn-dh9-nightvision-v4
.ybn-dh9-nightvision__compare.is-dragging
.ybn-dh9-nightvision__grab {
  border-color:
    rgba(255, 255, 255, 0.72);

  background:
    rgba(7, 12, 9, 0.58);

  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, 0.24);
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__grab span {
  width:
    9px;

  height:
    1px;

  background:
    rgba(255, 255, 255, 0.68);
}


/* ============================================================
   RANGE INPUT
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__range {
  position:
    absolute;

  z-index:
    10;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  opacity:
    0;

  cursor:
    ew-resize;

  appearance:
    none;

  -webkit-appearance:
    none;

  touch-action:
    pan-y;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare:has(
  .ybn-dh9-nightvision__range:focus-visible
)
.ybn-dh9-nightvision__grab {
  outline:
    2px solid
    #ffffff;

  outline-offset:
    4px;
}


/* ============================================================
   FOOT
   ============================================================ */

#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    18px;

  padding-top:
    14px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size:
    7.5px;

  font-weight:
    580;

  line-height:
    1.4;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot p {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    0;
}


#ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot-mark {
  width:
    16px;

  height:
    1px;

  background:
    #ff2638;
}



/* ============================================================
   VIEWPORT MOTION

   Selected effects:
   1. Focus Blur Resolve — title only.
   2. Animated Content — comparison frame only.

   No Blur Fade is reused here.
   No external runtime / library is required.
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

  html.ybn-nv-js
  #ybn-dh9-nightvision-v4
  .ybn-dh9-nightvision__title {
    opacity:
      0.26;

    filter:
      blur(8px);

    transform:
      translate3d(
        0,
        5px,
        0
      );

    will-change:
      opacity,
      filter,
      transform;
  }


  html.ybn-nv-js
  #ybn-dh9-nightvision-v4.is-intro-visible
  .ybn-dh9-nightvision__title {
    opacity:
      1;

    filter:
      blur(0);

    transform:
      translate3d(
        0,
        0,
        0
      );

    transition:
      opacity 760ms
      cubic-bezier(.2,.7,.2,1),
      filter 760ms
      cubic-bezier(.2,.7,.2,1),
      transform 760ms
      cubic-bezier(.2,.7,.2,1);
  }


  html.ybn-nv-js
  #ybn-dh9-nightvision-v4
  .ybn-dh9-nightvision__compare {
    opacity:
      0.90;

    transform:
      translate3d(
        0,
        8px,
        0
      )
      scale(0.996);

    transform-origin:
      center center;

    will-change:
      opacity,
      transform;
  }


  html.ybn-nv-js
  #ybn-dh9-nightvision-v4.is-compare-visible
  .ybn-dh9-nightvision__compare {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);

    transition:
      opacity 760ms
      cubic-bezier(.2,.7,.2,1),
      transform 820ms
      cubic-bezier(.2,.7,.2,1);
  }

}


/* ============================================================
   TABLET
   681px – 1024px
   ============================================================ */

@media
(min-width: 681px)
and
(max-width: 1024px) {

  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__inner {
    width:
      calc(100% - 48px);

    padding:
      48px
      0
      42px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__intro {
    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(245px, 0.88fr);

    gap:
      30px;

    margin-bottom:
      24px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__eyebrow {
    margin-bottom:
      12px;

    font-size:
      8.5px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title {
    font-size:
      clamp(
        38px,
        5.4vw,
        50px
      );
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__description {
    max-width:
      330px;

    font-size:
      12px;

    line-height:
      1.52;
  }


  /*
    Tablet comparison is intentionally compact so the module does not become a second hero.
  */

  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare {
    height:
      clamp(
        315px,
        40vw,
        390px
      );
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label {
    top:
      16px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--unaided {
    left:
      16px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--vision {
    right:
      16px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot {
    padding-top:
      11px;
  }

}


/* ============================================================
   MOBILE
   <= 680px
   ============================================================ */

@media
(max-width: 680px) {

  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__inner {
    width:
      calc(100% - 30px);

    padding:
      38px
      0
      32px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__intro {
    display:
      block;

    margin-bottom:
      18px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__eyebrow {
    margin-bottom:
      9px;

    font-size:
      7.8px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title {
    max-width:
      320px;

    font-size:
      clamp(
        32px,
        8.8vw,
        40px
      );

    line-height:
      0.99;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__intro-side {
    margin-top:
      13px;

    padding-bottom:
      0;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__description {
    max-width:
      330px;

    font-size:
      11.8px;

    line-height:
      1.48;
  }


  /*
    v4.3:
    v4.2 used 4:5, which made this screen disproportionately tall.
    Mobile now uses a landscape editorial crop while preserving
    horizontal drag interaction.
  */

  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare {
    height:
      clamp(
        220px,
        62vw,
        290px
      );

    aspect-ratio:
      auto;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__image {
    object-position:
      54% 50%;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label {
    top:
      11px;

    font-size:
      6.4px;

    letter-spacing:
      0.13em;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--unaided {
    left:
      11px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__label--vision {
    right:
      11px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__divider {
    width:
      22px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__grab {
    width:
      22px;

    height:
      34px;

    margin:
      6px
      0;

    backdrop-filter:
      blur(6px);

    -webkit-backdrop-filter:
      blur(6px);
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__grab span {
    width:
      7px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot {
    padding-top:
      10px;

    font-size:
      6.5px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__foot-mark {
    width:
      13px;
  }

}


/* ============================================================
   SMALL MOBILE
   <= 420px
   ============================================================ */

@media
(max-width: 420px) {

  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__inner {
    width:
      calc(100% - 26px);

    padding-top:
      34px;

    padding-bottom:
      28px;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare {
    height:
      clamp(
        205px,
        60vw,
        245px
      );

    aspect-ratio:
      auto;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title {
    max-width:
      300px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

  #ybn-dh9-nightvision-v4 *,
  #ybn-dh9-nightvision-v4 *::before,
  #ybn-dh9-nightvision-v4 *::after {
    animation:
      none !important;

    transition-duration:
      0.01ms !important;
  }


  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__title,
  #ybn-dh9-nightvision-v4 .ybn-dh9-nightvision__compare {
    opacity:
      1 !important;

    filter:
      none !important;

    transform:
      none !important;
  }

}


/* ============================================================
   SCREEN 04 — FIELD-READY OPERATION
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 04 — FIELD-READY OPERATION
   Progressive Dissolve v3.4 — Final QA / Interaction Polish
   ============================================================ */


/* ------------------------------------------------------------
   ELEMENTOR HOST RESET
   ------------------------------------------------------------ */

.ybn-dh9-field-host,
.ybn-dh9-field-host > .e-con-inner,
.ybn-dh9-field-host .elementor-widget-html,
.ybn-dh9-field-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    #090c0a;

  color:
    #ffffff;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ============================================================
   SHELL

   Desktop deliberately avoids a hard left/right visual split.
   The content still uses a two-column grid, but the background image
   is absolutely positioned beneath both columns and dissolves into black.
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__shell {
  position: relative;

  width:
    min(
      calc(100% - 64px),
      1600px
    );

  height:
    clamp(
      500px,
      31vw,
      520px
    );

  min-height:
    0;

  margin:
    0 auto;

  overflow:
    hidden;

  isolation:
    isolate;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    #090c0a;
}


/* ============================================================
   MEDIA LAYER
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__media {
  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;
}


/* ------------------------------------------------------------
   SHARED IMAGE RULES
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__image {
  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    47% 78%;
}


/* ------------------------------------------------------------
   CLEAR BASE IMAGE

   Important:
   The clear image extends farther right than the visual "left column".
   This means the photograph continues underneath the transition zone.
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__image--base {
  z-index:
    0;

  /*
    The clear photograph now extends well into the transition zone.
    Its right side is progressively masked instead of ending on a
    visible vertical edge.
  */
  width:
    74%;

  transform:
    scale(1.002);

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, 0.98) 64%,
      rgba(0, 0, 0, 0.86) 70%,
      rgba(0, 0, 0, 0.62) 77%,
      rgba(0, 0, 0, 0.34) 84%,
      rgba(0, 0, 0, 0.12) 91%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, 0.98) 64%,
      rgba(0, 0, 0, 0.86) 70%,
      rgba(0, 0, 0, 0.62) 77%,
      rgba(0, 0, 0, 0.34) 84%,
      rgba(0, 0, 0, 0.12) 91%,
      transparent 100%
    );
}


/* ------------------------------------------------------------
   BLURRED DUPLICATE

   A second copy of the same image sits over the transition area.
   It is slightly larger and blurred, then revealed only toward the right
   through a progressive CSS mask.

   This is what creates:
   clear photo -> soft / defocused edge -> dark background
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__image--blur {
  z-index:
    1;

  /*
    The blurred duplicate is deliberately wider than the clear image.
    It becomes visible only around the dissolve zone, then fades away
    before the fully black content area.
  */
  width:
    82%;

  opacity:
    0.78;

  filter:
    blur(34px)
    saturate(0.72)
    brightness(0.56);

  transform:
    scale(1.075);

  transform-origin:
    left center;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 46%,
      rgba(0, 0, 0, 0.08) 52%,
      rgba(0, 0, 0, 0.30) 59%,
      rgba(0, 0, 0, 0.66) 67%,
      rgba(0, 0, 0, 0.92) 74%,
      #000 80%,
      rgba(0, 0, 0, 0.88) 86%,
      rgba(0, 0, 0, 0.54) 91%,
      rgba(0, 0, 0, 0.20) 96%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 46%,
      rgba(0, 0, 0, 0.08) 52%,
      rgba(0, 0, 0, 0.30) 59%,
      rgba(0, 0, 0, 0.66) 67%,
      rgba(0, 0, 0, 0.92) 74%,
      #000 80%,
      rgba(0, 0, 0, 0.88) 86%,
      rgba(0, 0, 0, 0.54) 91%,
      rgba(0, 0, 0, 0.20) 96%,
      transparent 100%
    );
}


/* ------------------------------------------------------------
   GLOBAL DISSOLVE VEIL

   The veil spans the entire shell rather than belonging to the right panel.
   There is therefore no visible "panel starting point".

   Approximate desktop transition:
   0–45%   clear image
   45–55%  subtle darkening
   55–65%  blurred / dark transition
   65–74%  image detail nearly disappears
   74%+    full black
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__veil {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  pointer-events:
    none;

  /*
    Slower and broader darkening than v3.1.
    The image first loses sharpness, then contrast, then finally
    disappears into the section background.
  */
  background:
    linear-gradient(
      90deg,
      rgba(9, 12, 10, 0.00) 0%,
      rgba(9, 12, 10, 0.00) 48%,
      rgba(9, 12, 10, 0.03) 53%,
      rgba(9, 12, 10, 0.09) 57%,
      rgba(9, 12, 10, 0.18) 61%,
      rgba(9, 12, 10, 0.31) 65%,
      rgba(9, 12, 10, 0.46) 69%,
      rgba(9, 12, 10, 0.62) 73%,
      rgba(9, 12, 10, 0.76) 77%,
      rgba(9, 12, 10, 0.87) 81%,
      rgba(9, 12, 10, 0.94) 85%,
      rgba(9, 12, 10, 0.985) 89%,
      #090c0a 93%,
      #090c0a 100%
    );
}


/* ------------------------------------------------------------
   SECONDARY SOFTENING BAND

   Because the photo now actually extends underneath this band,
   backdrop-filter can soften real image detail instead of merely
   blurring an already-black panel.
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__soft-band {
  position:
    absolute;

  z-index:
    2;

  top:
    0;

  right:
    17%;

  bottom:
    0;

  width:
    28%;

  pointer-events:
    none;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  background:
    linear-gradient(
      90deg,
      rgba(9, 12, 10, 0.00) 0%,
      rgba(9, 12, 10, 0.035) 28%,
      rgba(9, 12, 10, 0.10) 52%,
      rgba(9, 12, 10, 0.20) 76%,
      rgba(9, 12, 10, 0.28) 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 18%,
      rgba(0, 0, 0, 0.58) 44%,
      rgba(0, 0, 0, 0.90) 70%,
      #000 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 18%,
      rgba(0, 0, 0, 0.58) 44%,
      rgba(0, 0, 0, 0.90) 70%,
      #000 100%
    );
}


/* ------------------------------------------------------------
   VERY LIGHT LOWER IMAGE SHADE
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__media::after {
  content:
    "";

  position:
    absolute;

  z-index:
    3;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(4, 5, 4, 0.00) 0%,
      rgba(4, 5, 4, 0.00) 58%,
      rgba(4, 5, 4, 0.22) 100%
    );
}


/* ============================================================
   LEFT MICRO COPY
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy {
  position:
    absolute;

  z-index:
    5;

  left:
    34px;

  bottom:
    20px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  text-shadow:
    0 2px 16px
    rgba(0, 0, 0, 0.56);

  pointer-events:
    none;
}


#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy-line {
  width:
    1px;

  height:
    40px;

  margin-top:
    1px;

  background:
    rgba(255, 38, 56, 0.78);
}


#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy strong,
#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy small {
  display:
    block;
}


#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy strong {
  color:
    rgba(255, 255, 255, 0.76);

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.25;

  letter-spacing:
    0.22em;
}


#ybn-dh9-field-v3 .ybn-dh9-field__visual-copy small {
  margin-top:
    5px;

  color:
    rgba(255, 255, 255, 0.38);

  font-size:
    7px;

  font-weight:
    620;

  line-height:
    1.35;

  letter-spacing:
    0.19em;
}


/* ============================================================
   RIGHT PANEL

   Transparent on desktop.
   The black background is created by the shell-wide veil, not by this panel.
   This avoids a visible left edge.
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__panel {
  position:
    relative;

  z-index:
    5;

  grid-column:
    2;

  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    38px
    38px
    28px
    32px;

  background:
    transparent;
}


/*
  Very subtle ambient depth on the information side.
  This is intentionally static so it adds essentially no runtime cost.
*/

#ybn-dh9-field-v3 .ybn-dh9-field__panel::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 56% 18%,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.016) 20%,
      rgba(255, 255, 255, 0.00) 48%
    );
}


/* ============================================================
   HEADING
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__heading {
  max-width:
    690px;
}


#ybn-dh9-field-v3 .ybn-dh9-field__eyebrow {
  margin:
    0
    0
    14px;

  color:
    #ff2638;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.30em;

  text-transform:
    uppercase;
}


#ybn-dh9-field-v3 .ybn-dh9-field__title {
  max-width:
    720px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      38px,
      2.9vw,
      50px
    );

  font-weight:
    520;

  line-height:
    0.93;

  letter-spacing:
    -0.045em;
}


#ybn-dh9-field-v3 .ybn-dh9-field__title span {
  display:
    block;
}


@media
(min-width: 1025px) {

  #ybn-dh9-field-v3 .ybn-dh9-field__title span:first-child {
    white-space:
      nowrap;
  }

}


/* ============================================================
   FEATURE GRID
   ============================================================ */

#ybn-dh9-field-v3 .ybn-dh9-field__features {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items:
    start;

  gap:
    30px;

  margin-top:
    18px;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-field-v3 .ybn-dh9-field__features:hover
  .ybn-dh9-field__feature {
    opacity:
      0.76;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__features:hover
  .ybn-dh9-field__feature:hover {
    opacity:
      1;
  }

}


/* ------------------------------------------------------------
   FEATURE
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__feature {
  position:
    relative;

  min-width:
    0;

  padding:
    12px
    0
    2px;

  --spot-x:
    50%;

  --spot-y:
    44%;

  isolation:
    isolate;
}


/*
  React Bits Spotlight Card idea, deliberately stripped of the card.
  The radial light lives behind the existing feature content only.
*/

#ybn-dh9-field-v3 .ybn-dh9-field__feature::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  left:
    -26px;

  right:
    -22px;

  top:
    -20px;

  bottom:
    -18px;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      190px circle
      at var(--spot-x) var(--spot-y),
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.036) 28%,
      rgba(255, 255, 255, 0.012) 48%,
      rgba(255, 255, 255, 0.00) 72%
    );

  transition:
    opacity 220ms ease;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-field-v3 .ybn-dh9-field__feature:hover::before {
    opacity:
      1;
  }

}


/* ------------------------------------------------------------
   ICON
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__icon {
  position:
    relative;

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius:
    50%;

  color:
    rgba(255, 255, 255, 0.86);

  transition:
    border-color 220ms ease,
    color 220ms ease,
    transform 220ms
    cubic-bezier(.2,.7,.2,1);
}


#ybn-dh9-field-v3 .ybn-dh9-field__icon::after {
  content:
    "";

  position:
    absolute;

  inset:
    -1px;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  border-radius:
    50%;

  opacity:
    0;

  transform:
    scale(0.92);

  pointer-events:
    none;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-field-v3 .ybn-dh9-field__feature:hover
  .ybn-dh9-field__icon {
    border-color:
      rgba(255, 255, 255, 0.42);

    color:
      rgba(255, 255, 255, 0.98);

    transform:
      translateY(-1px);
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature:hover
  .ybn-dh9-field__icon::after {
    animation:
      ybn-dh9-field-icon-ripple
      640ms
      cubic-bezier(.18,.72,.24,1)
      1;
  }

}


@keyframes
ybn-dh9-field-icon-ripple {

  0% {
    opacity:
      0.20;

    transform:
      scale(0.92);
  }

  100% {
    opacity:
      0;

    transform:
      scale(1.72);
  }

}


#ybn-dh9-field-v3 .ybn-dh9-field__icon svg {
  display:
    block;
}


/* ------------------------------------------------------------
   FEATURE TITLE
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__feature-title {
  margin:
    0;

  color:
    rgba(255, 255, 255, 0.96);

  font-size:
    16.4px;

  font-weight:
    620;

  line-height:
    1.22;

  letter-spacing:
    -0.02em;

  transition:
    color 220ms ease,
    font-weight 220ms ease,
    letter-spacing 220ms ease,
    transform 220ms
    cubic-bezier(.2,.7,.2,1);
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-field-v3 .ybn-dh9-field__feature:hover
  .ybn-dh9-field__feature-title {
    color:
      #ffffff;

    font-weight:
      660;

    letter-spacing:
      -0.026em;

    transform:
      translateY(-1px);
  }

}


/* ------------------------------------------------------------
   FEATURE LIST
   ------------------------------------------------------------ */

#ybn-dh9-field-v3 .ybn-dh9-field__feature-list {
  margin:
    11px
    0
    0;

  padding:
    0;

  list-style:
    none;
}


#ybn-dh9-field-v3 .ybn-dh9-field__feature-list li {
  margin:
    0
    0
    7px;

  padding:
    0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size:
    12.2px;

  font-weight:
    420;

  line-height:
    1.45;

  transition:
    color 220ms ease;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-field-v3 .ybn-dh9-field__feature:hover
  .ybn-dh9-field__feature-list li {
    color:
      rgba(255, 255, 255, 0.72);
  }

}


#ybn-dh9-field-v3 .ybn-dh9-field__feature-list li:last-child {
  margin-bottom:
    0;
}



/* ============================================================
   VIEWPORT MOTION

   1. Animata-inspired Mask Reveal Up for the two title lines.
   2. Product Features stagger for the three capability groups.

   No Blur Fade is reused.
   No continuous scroll animation.
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

  html.ybn-field-js
  #ybn-dh9-field-v3
  .ybn-dh9-field__eyebrow {
    opacity:
      0;

    transform:
      translate3d(
        0,
        6px,
        0
      );
  }


  html.ybn-field-js
  #ybn-dh9-field-v3
  .ybn-dh9-field__title span {
    opacity:
      0;

    clip-path:
      inset(
        100% 0 0 0
      );

    transform:
      translate3d(
        0,
        16px,
        0
      );

    will-change:
      opacity,
      clip-path,
      transform;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-heading-visible
  .ybn-dh9-field__eyebrow {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      );

    transition:
      opacity 460ms ease,
      transform 520ms
      cubic-bezier(.2,.7,.2,1);
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-heading-visible
  .ybn-dh9-field__title span {
    opacity:
      1;

    clip-path:
      inset(
        0 0 0 0
      );

    transform:
      translate3d(
        0,
        0,
        0
      );

    transition:
      opacity 520ms ease,
      clip-path 680ms
      cubic-bezier(.2,.72,.2,1),
      transform 680ms
      cubic-bezier(.2,.72,.2,1);
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-heading-visible
  .ybn-dh9-field__title span:nth-child(1) {
    transition-delay:
      55ms;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-heading-visible
  .ybn-dh9-field__title span:nth-child(2) {
    transition-delay:
      135ms;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3
  .ybn-dh9-field__feature {
    opacity:
      0;

    transform:
      translate3d(
        0,
        8px,
        0
      );

    will-change:
      opacity,
      transform;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-features-visible
  .ybn-dh9-field__feature {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      );

    transition-property:
      opacity,
      transform;

    transition-duration:
      560ms,
      620ms;

    transition-timing-function:
      ease,
      cubic-bezier(.2,.7,.2,1);
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-features-visible
  .ybn-dh9-field__feature:nth-child(1) {
    transition-delay:
      0ms;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-features-visible
  .ybn-dh9-field__feature:nth-child(2) {
    transition-delay:
      80ms;
  }


  html.ybn-field-js
  #ybn-dh9-field-v3.is-features-visible
  .ybn-dh9-field__feature:nth-child(3) {
    transition-delay:
      160ms;
  }

}


/* ============================================================
   LARGE DESKTOP
   <= 1366px
   ============================================================ */

@media
(max-width: 1366px) {

  #ybn-dh9-field-v3 .ybn-dh9-field__shell {
    width:
      calc(100% - 48px);

    height:
      500px;

    min-height:
      0;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__panel {
    min-height:
      0;

    height:
      100%;

    padding:
      34px
      28px
      24px
      24px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__title {
    font-size:
      clamp(
        36px,
        3.05vw,
        50px
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__features {
    gap:
      22px;

    margin-top:
      16px;
  }



  #ybn-dh9-field-v3 .ybn-dh9-field__feature::before {
    display:
      none;
  }

  #ybn-dh9-field-v3 .ybn-dh9-field__feature-title {
    font-size:
      14.4px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-list li {
    font-size:
      11px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image {
    object-position:
      47% 82%;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--base {
    width:
      74%;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--blur {
    width:
      82%;

    filter:
      blur(30px)
      saturate(0.72)
      brightness(0.56);
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__soft-band {
    right:
      15%;

    width:
      30%;

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);
  }

}


/* ============================================================
   TABLET
   681px – 1024px

   Stacked layout.
   The desktop dissolve is intentionally removed because there is no
   horizontal left/right split to blend.
   ============================================================ */

@media
(min-width: 681px)
and
(max-width: 1024px) {

  #ybn-dh9-field-v3 .ybn-dh9-field__shell {
    width:
      calc(100% - 40px);

    height:
      auto;

    min-height:
      auto;

    display:
      block;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__media {
    position:
      relative;

    inset:
      auto;

    aspect-ratio:
      16 / 9;

    background:
      #151611;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--base {
    width:
      100%;

    height:
      100%;

    object-position:
      48% 48%;

    mask-image:
      none;

    -webkit-mask-image:
      none;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--blur,
  #ybn-dh9-field-v3 .ybn-dh9-field__soft-band {
    display:
      none;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__veil {
    background:
      linear-gradient(
        180deg,
        rgba(9, 12, 10, 0.00) 0%,
        rgba(9, 12, 10, 0.02) 54%,
        rgba(9, 12, 10, 0.46) 100%
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__panel {
    min-height:
      auto;

    padding:
      44px
      34px
      36px;

    background:
      linear-gradient(
        180deg,
        #0b0e0c 0%,
        #090c0a 100%
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__title {
    max-width:
      620px;

    font-size:
      clamp(
        40px,
        6vw,
        54px
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__features {
    gap:
      22px;

    margin-top:
      30px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-title {
    font-size:
      14px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-list li {
    font-size:
      10.8px;
  }

}


/* ============================================================
   MOBILE
   <= 680px
   ============================================================ */

@media
(max-width: 680px) {

  #ybn-dh9-field-v3 .ybn-dh9-field__shell {
    width:
      calc(100% - 30px);

    height:
      auto;

    min-height:
      auto;

    display:
      block;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__media {
    position:
      relative;

    inset:
      auto;

    aspect-ratio:
      4 / 3;

    background:
      #151611;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--base {
    width:
      100%;

    height:
      100%;

    object-position:
      48% 50%;

    mask-image:
      none;

    -webkit-mask-image:
      none;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__image--blur,
  #ybn-dh9-field-v3 .ybn-dh9-field__soft-band {
    display:
      none;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__veil {
    background:
      linear-gradient(
        180deg,
        rgba(9, 12, 10, 0.00) 0%,
        rgba(9, 12, 10, 0.02) 54%,
        rgba(9, 12, 10, 0.48) 100%
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__visual-copy {
    left:
      18px;

    bottom:
      17px;

    gap:
      9px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__visual-copy-line {
    height:
      34px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__visual-copy strong {
    font-size:
      7px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__visual-copy small {
    font-size:
      6.4px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__panel {
    min-height:
      auto;

    padding:
      36px
      22px
      30px;

    background:
      linear-gradient(
        180deg,
        #0b0e0c 0%,
        #090c0a 100%
      );
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__eyebrow {
    margin-bottom:
      11px;

    font-size:
      8px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__title {
    max-width:
      360px;

    font-size:
      clamp(
        34px,
        9.6vw,
        44px
      );

    line-height:
      1;
  }


  /*
    Mobile:
    three desktop columns become three stacked rows.
  */

  #ybn-dh9-field-v3 .ybn-dh9-field__features {
    display:
      block;

    margin-top:
      28px;
  }



  #ybn-dh9-field-v3 .ybn-dh9-field__feature::before {
    display:
      none;
  }

  #ybn-dh9-field-v3 .ybn-dh9-field__feature {
    display:
      grid;

    grid-template-columns:
      46px
      minmax(0, 1fr);

    column-gap:
      13px;

    padding:
      19px
      0
      21px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature
  + .ybn-dh9-field__feature {
    border-top:
      1px solid
      rgba(255, 255, 255, 0.10);
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__icon {
    grid-row:
      1 / span 2;

    width:
      40px;

    height:
      40px;

    margin:
      0;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__icon svg {
    width:
      24px;

    height:
      24px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-title {
    align-self:
      center;

    font-size:
      15px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-list {
    grid-column:
      2;

    margin-top:
      10px;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__feature-list li {
    margin-bottom:
      6px;

    font-size:
      11.2px;

    line-height:
      1.42;
  }

}


/* ============================================================
   SMALL MOBILE
   <= 420px
   ============================================================ */

@media
(max-width: 420px) {

  #ybn-dh9-field-v3 .ybn-dh9-field__shell {
    width:
      calc(100% - 24px);
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__panel {
    padding-left:
      18px;

    padding-right:
      18px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

  #ybn-dh9-field-v3 *,
  #ybn-dh9-field-v3 *::before,
  #ybn-dh9-field-v3 *::after {
    animation:
      none !important;

    transition-duration:
      0.01ms !important;
  }


  #ybn-dh9-field-v3 .ybn-dh9-field__eyebrow,
  #ybn-dh9-field-v3 .ybn-dh9-field__title span,
  #ybn-dh9-field-v3 .ybn-dh9-field__feature {
    opacity:
      1 !important;

    clip-path:
      none !important;

    transform:
      none !important;
  }

}


/* ============================================================
   SCREEN 05 — TECHNICAL SPECIFICATIONS
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 05 — TECHNICAL SPECIFICATIONS
   Warm Engineering Editorial v1.3 — Final Balance + Interactive Notes
   ============================================================ */


/* ------------------------------------------------------------
   ELEMENTOR HOST RESET
   ------------------------------------------------------------ */

.ybn-dh9-specs-host,
.ybn-dh9-specs-host > .e-con-inner,
.ybn-dh9-specs-host .elementor-widget-html,
.ybn-dh9-specs-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    #f2efe9;

  color:
    #111411;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ------------------------------------------------------------
   INNER
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__inner {
  width:
    min(
      calc(100% - 96px),
      1500px
    );

  margin:
    0 auto;

  padding:
    74px
    0
    60px;
}


/* ============================================================
   INTRO
   ============================================================ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__intro {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.34fr)
    minmax(340px, 0.66fr);

  align-items:
    end;

  gap:
    50px;

  margin-bottom:
    36px;
}


/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__eyebrow {
  margin:
    0
    0
    16px;

  color:
    #d91f2e;

  font-size:
    9px;

  font-weight:
    720;

  line-height:
    1;

  letter-spacing:
    0.30em;

  text-transform:
    uppercase;
}


/* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__title {
  max-width:
    980px;

  margin:
    0;

  color:
    #111411;

  font-size:
    clamp(
      46px,
      4.45vw,
      68px
    );

  font-weight:
    520;

  line-height:
    0.95;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}


/* ------------------------------------------------------------
   INTRO COPY
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__intro-copy {
  max-width:
    390px;

  margin:
    0
    0
    5px;

  color:
    rgba(17, 20, 17, 0.66);

  font-size:
    14px;

  font-weight:
    430;

  line-height:
    1.62;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__layout {
  display:
    grid;

  grid-template-columns:
    minmax(360px, 0.86fr)
    minmax(0, 1.14fr);

  gap:
    42px;

  align-items:
    start;

  padding-top:
    28px;

  border-top:
    1px solid
    rgba(17, 20, 17, 0.18);
}


/* ============================================================
   PRODUCT VISUAL
   ============================================================ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__visual {
  position:
    sticky;

  top:
    96px;

  min-width:
    0;
}


/* ------------------------------------------------------------
   STAGE
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage {
  position:
    relative;

  min-height:
    510px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    visible;

  background:
    transparent;
}


/*
  Static engineering grid.
  Deliberately restricted to the product visual area.
  No animation, no runtime cost.
*/

#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage::before {
  content:
    "";

  position:
    absolute;

  z-index:
    0;

  inset:
    8% 2% 10%;

  pointer-events:
    none;

  opacity:
    0.72;

  background-image:
    linear-gradient(
      rgba(17, 20, 17, 0.046) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 20, 17, 0.046) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  -webkit-mask-image:
    radial-gradient(
      ellipse 62% 48% at 50% 52%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.30) 76%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 62% 48% at 50% 52%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.30) 76%,
      transparent 100%
    );
}


/* ------------------------------------------------------------
   PRODUCT IMAGE
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__image {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      112%,
      735px
    );

  height:
    auto;

  transform:
    translateY(-18px);

  display:
    block;

  object-fit:
    contain;
}


/* ------------------------------------------------------------
   VISUAL SHADOW
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-shadow {
  position:
    absolute;

  z-index:
    1;

  left:
    50%;

  bottom:
    72px;

  width:
    58%;

  height:
    34px;

  border-radius:
    50%;

  background:
    rgba(17, 20, 17, 0.12);

  filter:
    blur(22px);

  transform:
    translateX(-50%);

  pointer-events:
    none;
}


/* ------------------------------------------------------------
   PRODUCT INSPECTION LENS
   Desktop / fine-pointer only.
   It activates only when the source image has enough resolution.
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__lens {
  position:
    absolute;

  z-index:
    5;

  width:
    138px;

  height:
    138px;

  left:
    0;

  top:
    0;

  border:
    1px solid
    rgba(17, 20, 17, 0.24);

  border-radius:
    50%;

  background-color:
    #f2efe9;

  background-repeat:
    no-repeat;

  box-shadow:
    0 18px 46px
    rgba(17, 20, 17, 0.16),
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.52);

  opacity:
    0;

  transform:
    translate3d(-999px, -999px, 0)
    scale(0.96);

  pointer-events:
    none;

  transition:
    opacity 160ms ease,
    transform 200ms
    cubic-bezier(.2,.72,.2,1);

  will-change:
    transform,
    background-position;
}


#ybn-dh9-specs-v1
.ybn-dh9-specs__visual-stage.is-lens-enabled {
  cursor:
    zoom-in;
}


#ybn-dh9-specs-v1
.ybn-dh9-specs__visual-stage.is-lens-active
.ybn-dh9-specs__lens {
  opacity:
    1;
}


/* ------------------------------------------------------------
   IMAGE META
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    10px;

  color:
    rgba(17, 20, 17, 0.46);

  font-size:
    7.5px;

  font-weight:
    680;

  line-height:
    1;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-meta span:first-child {
  color:
    rgba(17, 20, 17, 0.82);

  font-weight:
    720;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__visual-meta-line {
  width:
    38px;

  height:
    1px;

  background:
    rgba(17, 20, 17, 0.20);
}


/* ============================================================
   SPEC TABLES
   ============================================================ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__tables {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    58px;
}


/* ------------------------------------------------------------
   GROUP
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__group {
  min-width:
    0;
}


/* ------------------------------------------------------------
   GROUP HEAD
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__group-head {
  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  align-items:
    baseline;

  gap:
    12px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    rgba(17, 20, 17, 0.22);
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__group-index {
  color:
    #d91f2e;

  font-size:
    8px;

  font-weight:
    720;

  line-height:
    1;

  letter-spacing:
    0.16em;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__group-title {
  margin:
    0;

  color:
    #111411;

  font-size:
    18px;

  font-weight:
    650;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}


/* ------------------------------------------------------------
   DL RESET
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__list {
  margin:
    0;

  padding:
    0;
}


/* ------------------------------------------------------------
   SPEC ROW
   ------------------------------------------------------------ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__row {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(120px, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    18px;

  margin:
    0
    -10px;

  padding:
    12px
    10px
    11px;

  border-bottom:
    1px solid
    rgba(17, 20, 17, 0.11);

  background:
    linear-gradient(
      90deg,
      rgba(17, 20, 17, 0.00) 0%,
      rgba(17, 20, 17, 0.00) 100%
    );

  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__row:hover {
    background:
      rgba(17, 20, 17, 0.032);

    box-shadow:
      inset 2px 0 0
      rgba(217, 31, 46, 0.34);
  }

}


#ybn-dh9-specs-v1 .ybn-dh9-specs__row dt,
#ybn-dh9-specs-v1 .ybn-dh9-specs__row dd {
  margin:
    0;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__row dt {
  color:
    rgba(17, 20, 17, 0.58);

  font-size:
    12.2px;

  font-weight:
    520;

  line-height:
    1.45;

  transition:
    color 180ms ease;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__row:hover dt {
    color:
      rgba(17, 20, 17, 0.78);
  }

}


#ybn-dh9-specs-v1 .ybn-dh9-specs__row dd {
  color:
    #111411;

  font-size:
    12.8px;

  font-weight:
    610;

  line-height:
    1.45;

  text-align:
    right;

  transition:
    color 180ms ease,
    font-weight 180ms ease,
    letter-spacing 180ms ease;
}


@media
(hover: hover)
and
(pointer: fine) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__row:hover dd {
    color:
      #090b09;

    font-weight:
      660;

    letter-spacing:
      -0.008em;
  }

}


/* ============================================================
   SPEC TOOLTIP CARD
   Aceternity Tooltip Card idea, adapted for technical notes.
   One shared tooltip = low DOM / low runtime overhead.
   ============================================================ */

#ybn-dh9-specs-v1 .ybn-dh9-specs__tip-trigger {
  appearance:
    none;

  -webkit-appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    16px;

  height:
    16px;

  margin:
    0
    0
    0
    2px;

  padding:
    0;

  border:
    0;

  border-bottom:
    1px dotted
    rgba(17, 20, 17, 0.42);

  background:
    transparent;

  color:
    #d91f2e;

  font:
    inherit;

  font-size:
    0.82em;

  font-weight:
    760;

  line-height:
    1;

  cursor:
    help;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tip-trigger:focus-visible {
  outline:
    1px solid
    rgba(217, 31, 46, 0.72);

  outline-offset:
    3px;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tooltip {
  position:
    fixed;

  z-index:
    9999;

  width:
    min(
      310px,
      calc(100vw - 32px)
    );

  padding:
    16px
    17px
    15px;

  border:
    1px solid
    rgba(17, 20, 17, 0.13);

  background:
    rgba(249, 247, 242, 0.98);

  color:
    #111411;

  box-shadow:
    0 18px 54px
    rgba(17, 20, 17, 0.16);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translate3d(
      0,
      6px,
      0
    )
    scale(0.985);

  transform-origin:
    20px 100%;

  pointer-events:
    none;

  transition:
    opacity 160ms ease,
    transform 180ms
    cubic-bezier(.2,.72,.2,1),
    visibility 0s linear 180ms;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tooltip.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(1);

  transition-delay:
    0s;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tooltip-kicker {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #d91f2e;

  font-size:
    7.5px;

  font-weight:
    760;

  line-height:
    1;

  letter-spacing:
    0.20em;

  text-transform:
    uppercase;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tooltip-title {
  display:
    block;

  margin-bottom:
    6px;

  font-size:
    13px;

  font-weight:
    680;

  line-height:
    1.28;

  letter-spacing:
    -0.018em;
}


#ybn-dh9-specs-v1 .ybn-dh9-specs__tooltip-text {
  display:
    block;

  color:
    rgba(17, 20, 17, 0.66);

  font-size:
    11.5px;

  font-weight:
    430;

  line-height:
    1.55;
}


/* ============================================================
   LARGE DESKTOP
   <= 1366px
   ============================================================ */

@media
(max-width: 1366px) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__inner {
    width:
      calc(100% - 72px);

    padding-top:
      66px;

    padding-bottom:
      54px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__intro {
    gap:
      34px;

    margin-bottom:
      36px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__layout {
    grid-template-columns:
      minmax(320px, 0.84fr)
      minmax(0, 1.16fr);

    gap:
      44px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage {
    min-height:
      460px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__image {
    width:
      min(
        110%,
        690px
      );

    transform:
      translateY(-14px);
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-shadow {
    bottom:
      62px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__tables {
    gap:
      42px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row {
    grid-template-columns:
      minmax(108px, 0.9fr)
      minmax(0, 1.1fr);

    gap:
      14px;

    padding-top:
      12px;

    padding-bottom:
      11px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row dt {
    font-size:
      11.6px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row dd {
    font-size:
      12.1px;
  }

}


/* ============================================================
   TABLET
   681px – 1024px
   ============================================================ */

@media
(min-width: 681px)
and
(max-width: 1024px) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage::before {
    opacity:
      0.56;

    background-size:
      32px 32px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__lens {
    display:
      none;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__inner {
    width:
      calc(100% - 56px);

    padding:
      54px
      0
      46px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__intro {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      14px;

    margin-bottom:
      24px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__intro-copy {
    max-width:
      580px;

    margin:
      0;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__title {
    max-width:
      760px;

    font-size:
      clamp(
        40px,
        5.9vw,
        54px
      );
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__layout {
    display:
      block;

    padding-top:
      28px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual {
    position:
      relative;

    top:
      auto;

    margin-bottom:
      30px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage {
    min-height:
      0;

    aspect-ratio:
      16 / 7.4;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__image {
    width:
      min(
        88%,
        680px
      );

    transform:
      none;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-shadow {
    bottom:
      52px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__tables {
    gap:
      48px;
  }

}


/* ============================================================
   MOBILE
   <= 680px
   ============================================================ */

@media
(max-width: 680px) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage::before {
    opacity:
      0.40;

    background-size:
      28px 28px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__lens {
    display:
      none;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row {
    margin-left:
      -6px;

    margin-right:
      -6px;

    padding-left:
      6px;

    padding-right:
      6px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__inner {
    width:
      calc(100% - 36px);

    padding:
      44px
      0
      38px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__intro {
    display:
      block;

    margin-bottom:
      22px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__eyebrow {
    margin-bottom:
      11px;

    font-size:
      8px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__title {
    max-width:
      100%;

    font-size:
      clamp(
        34px,
        9.2vw,
        42px
      );

    line-height:
      0.98;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__intro-copy {
    max-width:
      350px;

    margin:
      13px
      0
      0;

    font-size:
      12.8px;

    line-height:
      1.55;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__layout {
    display:
      block;

    padding-top:
      20px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual {
    position:
      relative;

    top:
      auto;

    margin-bottom:
      22px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-stage {
    min-height:
      0;

    aspect-ratio:
      4 / 2.55;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__image {
    width:
      min(
        102%,
        560px
      );

    transform:
      none;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-shadow {
    bottom:
      24px;

    width:
      62%;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__visual-meta {
    margin-top:
      14px;

    font-size:
      6.8px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__tables {
    display:
      block;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__group
  + .ybn-dh9-specs__group {
    margin-top:
      34px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__group-head {
    padding-bottom:
      15px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__group-title {
    font-size:
      16px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap:
      16px;

    padding:
      10px
      0
      9px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row dt {
    font-size:
      11.6px;
  }


  #ybn-dh9-specs-v1 .ybn-dh9-specs__row dd {
    font-size:
      12.1px;
  }

}


/* ============================================================
   SMALL MOBILE
   <= 420px
   ============================================================ */

@media
(max-width: 420px) {

  #ybn-dh9-specs-v1 .ybn-dh9-specs__inner {
    width:
      calc(100% - 30px);

    padding-top:
      40px;

    padding-bottom:
      34px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

  #ybn-dh9-specs-v1 *,
  #ybn-dh9-specs-v1 *::before,
  #ybn-dh9-specs-v1 *::after {
    animation:
      none !important;

    transition-duration:
      0.01ms !important;
  }

}


/* ============================================================
   SCREEN 06 — INCLUDED ACCESSORIES
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 06 — INCLUDED ACCESSORIES
   v1.4 — Editorial Carousel / Final Tone + In-Card Inspection
   ============================================================ */

.ybn-box-host,
.ybn-box-host > .e-con-inner,
.ybn-box-host .elementor-widget-html,
.ybn-box-host .elementor-widget-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#ybn-dh9-box-v1 {
  --bg: #ece8e0;
  --card: rgba(255,255,255,.66);
  --text: #111411;
  --muted: rgba(17,20,17,.58);
  --line: rgba(17,20,17,.10);
  --line-strong: rgba(17,20,17,.16);
  --accent: #e42b38;

  position: relative;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 13% 8%,
      rgba(255,255,255,.78),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #e8e4dc 0%,
      #efebe4 16%,
      var(--bg) 100%
    );
  color: var(--text);

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

#ybn-dh9-box-v1 * {
  box-sizing: border-box;
}

#ybn-dh9-box-v1 .ybn-box__inner {
  width: min(calc(100% - 96px), 1550px);
  margin: 0 auto;
  padding: 72px 0 76px;
}


/* ============================================================
   HEADER
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 26px;
}

#ybn-dh9-box-v1 .ybn-box__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
}

#ybn-dh9-box-v1 .ybn-box__title {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font-size: clamp(46px, 4.05vw, 68px);
  font-weight: 540;
  line-height: .96;
  letter-spacing: -.052em;
  text-wrap: balance;
}

#ybn-dh9-box-v1 .ybn-box__copy {
  max-width: 500px;
  margin: 0 0 17px;
  color: rgba(17,20,17,.66);
  font-size: 14px;
  font-weight: 430;
  line-height: 1.62;
}

#ybn-dh9-box-v1 .ybn-box__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#ybn-dh9-box-v1 .ybn-box__pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(17,20,17,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  color: rgba(17,20,17,.60);
  font-size: 8.5px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 12px;
}

/* ============================================================
   CAROUSEL
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 22.5%);
  gap: 18px;

  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  padding: 4px 2px 9px;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

#ybn-dh9-box-v1 .ybn-box__track::-webkit-scrollbar {
  display: none;
}

#ybn-dh9-box-v1 .ybn-box__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}


/* ============================================================
   CARD
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  scroll-snap-align: start;

  border: 1px solid rgba(17,20,17,.085);
  border-radius: 19px;
  background: var(--card);

  box-shadow:
    0 12px 34px rgba(17,20,17,.045);

  opacity: 1;
  transform: none;

  transition:
    transform 300ms cubic-bezier(.2,.72,.2,1),
    border-color 220ms ease,
    box-shadow 260ms ease,
    opacity 260ms ease,
    filter 260ms ease;
}

@media (hover:hover) and (pointer:fine) {

  #ybn-dh9-box-v1 .ybn-box__card:hover {
    border-color:
      rgba(17,20,17,.14);

    box-shadow:
      0 22px 54px
      rgba(17,20,17,.085);
  }

}


/* ------------------------------------------------------------
   ACTIVE CAROUSEL STATE
   The card closest to the visual center becomes the "inspection"
   item. Neighbours recede slightly instead of every card carrying
   equal visual weight.
   ------------------------------------------------------------ */

#ybn-dh9-box-v1.is-visible
.ybn-box__track.has-active
.ybn-box__card {
  opacity:
    .84;

  filter:
    saturate(.93)
    contrast(.99);

  transform:
    translate3d(
      0,
      1px,
      0
    )
    scale(.989);
}


#ybn-dh9-box-v1.is-visible
.ybn-box__track.has-active
.ybn-box__card.is-active {
  z-index:
    2;

  opacity:
    1;

  filter:
    none;

  transform:
    translate3d(
      0,
      -4px,
      0
    )
    scale(1.014);

  border-color:
    rgba(17,20,17,.15);

  box-shadow:
    0 24px 60px
    rgba(17,20,17,.095);
}


/*
  Short one-shot settling feedback whenever a new item becomes active.
  No loop; it only runs when the carousel focus changes.
*/

#ybn-dh9-box-v1
.ybn-box__card.is-active-enter
.ybn-box__image.is-loaded {
  animation:
    ybn-box-active-settle
    360ms
    cubic-bezier(.18,.78,.22,1)
    1;
}


@keyframes
ybn-box-active-settle {

  0% {
    transform:
      translate3d(
        var(--media-shift-x, 0px),
        var(--media-shift-y, 0px),
        0
      )
      scale(1.006);
  }

  55% {
    transform:
      translate3d(
        var(--media-shift-x, 0px),
        var(--media-shift-y, 0px),
        0
      )
      scale(1.038);
  }

  100% {
    transform:
      translate3d(
        var(--media-shift-x, 0px),
        var(--media-shift-y, 0px),
        0
      )
      scale(1.025);
  }

}


@media
(max-width:680px) {

  #ybn-dh9-box-v1.is-visible
  .ybn-box__track.has-active
  .ybn-box__card {
    opacity:
      .90;

    transform:
      scale(.992);
  }


  #ybn-dh9-box-v1.is-visible
  .ybn-box__track.has-active
  .ybn-box__card.is-active {
    opacity:
      1;

    transform:
      scale(1);
  }

}


/* ------------------------------------------------------------
   One-shot viewport reveal.
   Only visible cards animate; images still load independently.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:no-preference) {
  html.ybn-box-js
  #ybn-dh9-box-v1
  .ybn-box__card {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card {
    opacity: 1;
    transform: translate3d(0,0,0);

    transition:
      opacity 620ms ease,
      transform 680ms cubic-bezier(.2,.72,.2,1),
      border-color 220ms ease,
      box-shadow 260ms ease;
  }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card:nth-child(1) { transition-delay: 0ms; }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card:nth-child(2) { transition-delay: 55ms; }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card:nth-child(3) { transition-delay: 110ms; }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card:nth-child(4) { transition-delay: 165ms; }

  html.ybn-box-js
  #ybn-dh9-box-v1.is-visible
  .ybn-box__card:nth-child(n+5) { transition-delay: 210ms; }
}


/* ============================================================
   MEDIA
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__media {
  position:
    relative;

  aspect-ratio:
    1.18 / 1;

  min-height:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    22px;

  --inspect-x:
    50%;

  --inspect-y:
    42%;

  background:
    radial-gradient(
      circle at 50% 37%,
      rgba(255,255,255,.86),
      transparent 57%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.62),
      rgba(239,234,226,.90)
    );

  transition:
    background-color 240ms ease;
}


/*
  In-card inspection light:
  replaces the old floating preview.
  It remains inside the current card and adds depth without
  duplicating the accessory image or information.
*/

#ybn-dh9-box-v1 .ybn-box__media::after {
  content:
    "";

  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      150px circle
      at var(--inspect-x) var(--inspect-y),
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.13) 34%,
      rgba(255,255,255,0) 72%
    );

  transition:
    opacity 220ms ease;
}


@media
(hover:hover)
and
(pointer:fine) {

  #ybn-dh9-box-v1
  .ybn-box__card:hover
  .ybn-box__media::after {
    opacity:
      1;
  }

}

#ybn-dh9-box-v1 .ybn-box__index,
#ybn-dh9-box-v1 .ybn-box__qty {
  position: absolute;
  z-index: 3;

  min-height: 25px;
  display: inline-flex;
  align-items: center;

  padding: 0 9px;

  border: 1px solid rgba(17,20,17,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.74);

  color: rgba(17,20,17,.61);
  font-size: 7.5px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#ybn-dh9-box-v1 .ybn-box__index {
  top: 12px;
  left: 12px;
}

#ybn-dh9-box-v1 .ybn-box__qty {
  right: 12px;
  bottom: 11px;
}


#ybn-dh9-box-v1 .ybn-box__qty,
#ybn-dh9-box-v1 .ybn-box__index {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms
    cubic-bezier(.2,.72,.2,1);
}


#ybn-dh9-box-v1
.ybn-box__card.is-active
.ybn-box__qty {
  color:
    rgba(17,20,17,.76);

  background:
    rgba(255,255,255,.90);

  border-color:
    rgba(17,20,17,.13);
}


@media
(hover:hover)
and
(pointer:fine) {

  #ybn-dh9-box-v1
  .ybn-box__card:hover
  .ybn-box__qty {
    color:
      rgba(17,20,17,.82);

    background:
      rgba(255,255,255,.95);

    border-color:
      rgba(17,20,17,.15);

    transform:
      translateY(-1px);
  }


  #ybn-dh9-box-v1
  .ybn-box__card:hover
  .ybn-box__index {
    color:
      rgba(17,20,17,.72);

    background:
      rgba(255,255,255,.88);
  }

}

#ybn-dh9-box-v1 .ybn-box__skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      100deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.48) 49%,
      rgba(255,255,255,0) 68%
    ),
    rgba(17,20,17,.014);

  background-size: 220% 100%, 100% 100%;
  animation: ybn-box-skeleton 1.45s linear infinite;

  transition: opacity 320ms ease;
}

@keyframes ybn-box-skeleton {
  from { background-position: 180% 0, 0 0; }
  to   { background-position: -80% 0, 0 0; }
}

#ybn-dh9-box-v1 .ybn-box__card.is-loaded .ybn-box__skeleton {
  opacity: 0;
  pointer-events: none;
}

#ybn-dh9-box-v1 .ybn-box__image {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  object-position: center;

  opacity: 0;

  transform:
    translate3d(
      var(--media-shift-x, 0px),
      var(--media-shift-y, 0px),
      0
    )
    scale(.965);

  filter:
    drop-shadow(0 16px 26px rgba(17,20,17,.11));

  transition:
    opacity 380ms ease,
    transform 600ms cubic-bezier(.2,.72,.2,1);

  user-select: none;
  -webkit-user-drag: none;
}

#ybn-dh9-box-v1 .ybn-box__image.is-loaded {
  opacity:
    1;

  transform:
    translate3d(
      var(--media-shift-x, 0px),
      var(--media-shift-y, 0px),
      0
    )
    scale(
      var(--media-scale, 1)
    );
}


#ybn-dh9-box-v1 .ybn-box__card.is-active
.ybn-box__image.is-loaded {
  --media-scale:
    1.025;
}


@media
(hover:hover)
and
(pointer:fine) {

  #ybn-dh9-box-v1 .ybn-box__card:hover
  .ybn-box__image.is-loaded {
    --media-scale:
      1.045;
  }

}


/* ============================================================
   CARD BODY
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__body {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;

  padding: 16px 16px 15px;
}

#ybn-dh9-box-v1 .ybn-box__card-title {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 610;
  line-height: 1.08;
  letter-spacing: -.025em;
}

#ybn-dh9-box-v1 .ybn-box__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-top: 11px;
  border-top: 1px solid rgba(17,20,17,.085);

  color: rgba(17,20,17,.44);
  font-size: 7.5px;
  font-weight: 740;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
}

#ybn-dh9-box-v1 .ybn-box__dot {
  position:
    relative;

  width:
    6px;

  height:
    6px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 5px
    rgba(228,43,56,.08);
}


#ybn-dh9-box-v1 .ybn-box__dot::after {
  content:
    "";

  position:
    absolute;

  inset:
    -1px;

  border:
    1px solid
    rgba(228,43,56,.35);

  border-radius:
    50%;

  opacity:
    0;

  transform:
    scale(.8);

  pointer-events:
    none;
}


@media
(hover:hover)
and
(pointer:fine) {

  #ybn-dh9-box-v1 .ybn-box__card:hover
  .ybn-box__dot::after {
    animation:
      ybn-box-dot-ripple
      620ms
      cubic-bezier(.2,.7,.2,1)
      1;
  }

}


@keyframes
ybn-box-dot-ripple {

  0% {
    opacity:
      .30;

    transform:
      scale(.8);
  }

  100% {
    opacity:
      0;

    transform:
      scale(2.2);
  }

}


/* ============================================================
   PLACEHOLDERS
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__placeholder {
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.86), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(239,234,226,.90));
}

#ybn-dh9-box-v1 .ybn-box__placeholder-icon {
  width: 92px;
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px dashed rgba(17,20,17,.15);
  border-radius: 20px;

  color: rgba(17,20,17,.39);
  background: rgba(255,255,255,.26);
}

#ybn-dh9-box-v1 .ybn-box__placeholder-icon svg {
  width: 46px;
  height: 46px;
}


/* ============================================================
   PROGRESS
   ============================================================ */

#ybn-dh9-box-v1 .ybn-box__progress {
  position: relative;

  width: 100%;
  height: 2px;

  margin-top: 14px;
  overflow: hidden;

  background: rgba(17,20,17,.08);
}

#ybn-dh9-box-v1 .ybn-box__progress-thumb {
  position: absolute;
  top: 0;
  left: 0;

  width: var(--progress-size, 25%);
  height: 100%;

  background: var(--accent);

  transform:
    translateX(
      var(--progress-x, 0px)
    );

  will-change: transform;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:681px) and (max-width:1024px) {

  #ybn-dh9-box-v1 .ybn-box__inner {
    width: calc(100% - 48px);
    padding: 58px 0 62px;
  }

  #ybn-dh9-box-v1 .ybn-box__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }

  #ybn-dh9-box-v1 .ybn-box__title {
    max-width: 760px;
    font-size: clamp(40px, 6vw, 54px);
  }

  #ybn-dh9-box-v1 .ybn-box__copy {
    max-width: 680px;
    font-size: 13px;
  }

  #ybn-dh9-box-v1 .ybn-box__track {
    grid-auto-columns: minmax(250px, 42%);
    gap: 16px;
  }

  #ybn-dh9-box-v1 .ybn-box__body {
    min-height: 100px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:680px) {

  #ybn-dh9-box-v1 .ybn-box__inner {
    width: calc(100% - 30px);
    padding: 44px 0 48px;
  }

  #ybn-dh9-box-v1 .ybn-box__head {
    display: block;
    margin-bottom: 24px;
  }

  #ybn-dh9-box-v1 .ybn-box__eyebrow {
    margin-bottom: 10px;
    font-size: 8px;
  }

  #ybn-dh9-box-v1 .ybn-box__title {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 43px);
    line-height: .98;
  }

  #ybn-dh9-box-v1 .ybn-box__copy {
    max-width: 360px;
    margin-top: 16px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.52;
  }

  #ybn-dh9-box-v1 .ybn-box__meta {
    gap: 6px;
  }

  #ybn-dh9-box-v1 .ybn-box__pill {
    min-height: 28px;
    padding: 0 10px;
    font-size: 7.5px;
  }

  #ybn-dh9-box-v1 .ybn-box__toolbar {
    margin-bottom: 12px;
  }

  #ybn-dh9-box-v1 .ybn-box__nav {
    display: none;
  }

  #ybn-dh9-box-v1 .ybn-box__track {
    grid-auto-columns: minmax(242px, 82%);
    gap: 13px;
    padding-top: 2px;
  }

  #ybn-dh9-box-v1 .ybn-box__card {
    border-radius: 17px;
  }

  #ybn-dh9-box-v1 .ybn-box__media {
    aspect-ratio: 1.22 / 1;
    padding: 18px;
  }

  #ybn-dh9-box-v1 .ybn-box__body {
    min-height: 92px;
    padding: 14px;
    gap: 14px;
  }

  #ybn-dh9-box-v1 .ybn-box__card-title {
    font-size: 15px;
  }

  #ybn-dh9-box-v1 .ybn-box__progress {
    margin-top: 11px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce) {

  #ybn-dh9-box-v1 *,
  #ybn-dh9-box-v1 *::before,
  #ybn-dh9-box-v1 *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  #ybn-dh9-box-v1 .ybn-box__card {
    opacity: 1 !important;
    transform: none !important;
  }

  #ybn-dh9-box-v1 .ybn-box__track {
    scroll-behavior:
      auto;
  }


  #ybn-dh9-box-v1
  .ybn-box__image {
    --media-shift-x:
      0px !important;

    --media-shift-y:
      0px !important;
  }

}


/* ============================================================
   SCREEN 07 — CLOSING CTA
   Migrated from Elementor Final QA source
   ============================================================ */

/* ============================================================
   YUBEEN DH9
   SCREEN 07 — CLOSING CTA
   Cinematic Closing v1.3 — Natural Wrap / CTA Final
   ============================================================ */


/* ------------------------------------------------------------
   ELEMENTOR HOST RESET
   ------------------------------------------------------------ */

.ybn-dh9-closing-host,
.ybn-dh9-closing-host > .e-con-inner,
.ybn-dh9-closing-host .elementor-widget-html,
.ybn-dh9-closing-host .elementor-widget-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

#ybn-dh9-closing-v1 {
  position: relative;

  width: 100%;

  height:
    clamp(
      500px,
      36vw,
      560px
    );

  min-height:
    500px;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #080b09;

  color:
    #ffffff;

  font-family:
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ============================================================
   MEDIA
   ============================================================ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__media {
  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  overflow:
    hidden;
}


/* ------------------------------------------------------------
   BACKGROUND IMAGE

   The source image already places the DH9 toward the right.
   Desktop crop preserves:
   - dark text-safe area on the left
   - product on the right
   - warm dusk depth in the center
   ------------------------------------------------------------ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    56% 64%;

  transform:
    scale(1.002);

  pointer-events:
    none;
}


/* ============================================================
   GRADIENTS
   ============================================================ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;
}


/*
  Main text-safe gradient.
  Darkest on the left, but leaves the center/right image readable.
*/

#ybn-dh9-closing-v1 .ybn-dh9-closing__shade--left {
  z-index:
    1;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 6, 0.70) 0%,
      rgba(5, 8, 6, 0.56) 18%,
      rgba(5, 8, 6, 0.36) 33%,
      rgba(5, 8, 6, 0.16) 47%,
      rgba(5, 8, 6, 0.05) 58%,
      rgba(5, 8, 6, 0.00) 68%
    );
}


/*
  Bottom fade helps the closing section transition smoothly
  into the global dark footer.
*/

#ybn-dh9-closing-v1 .ybn-dh9-closing__shade--bottom {
  z-index:
    2;

  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 7, 0.00) 62%,
      rgba(6, 8, 7, 0.05) 74%,
      rgba(6, 8, 7, 0.20) 87%,
      rgba(6, 8, 7, 0.54) 100%
    );
}


/*
  Very subtle top control.
  Prevents the sky / highlights from becoming visually detached
  from the rest of the page.
*/

#ybn-dh9-closing-v1 .ybn-dh9-closing__shade--top {
  z-index:
    3;

  background:
    linear-gradient(
      180deg,
      rgba(5, 7, 6, 0.08) 0%,
      rgba(5, 7, 6, 0.00) 27%
    );
}


/* ============================================================
   INNER
   ============================================================ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__inner {
  position:
    relative;

  z-index:
    5;

  width:
    min(
      calc(100% - 96px),
      1500px
    );

  height:
    100%;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    0
    0
    48px;
}


/* ============================================================
   CONTENT
   ============================================================ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__content {
  width:
    min(
      100%,
      540px
    );
}


/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__eyebrow {
  margin:
    0
    0
    16px;

  color:
    #ff2638;

  font-size:
    9px;

  font-weight:
    720;

  line-height:
    1;

  letter-spacing:
    0.30em;

  text-transform:
    uppercase;
}


/* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__title {
  max-width:
    430px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      44px,
      4.15vw,
      60px
    );

  font-weight:
    520;

  line-height:
    0.96;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}




/* ------------------------------------------------------------
   BODY COPY
   ------------------------------------------------------------ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__copy {
  max-width:
    470px;

  margin:
    18px
    0
    0;

  color:
    rgba(255, 255, 255, 0.74);

  font-size:
    13px;

  font-weight:
    430;

  line-height:
    1.62;
}


/* ============================================================
   CTA
   ============================================================ */

#ybn-dh9-closing-v1 .ybn-dh9-closing__cta {
  position:
    relative;

  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    24px;

  padding:
    0
    0
    9px;

  color:
    rgba(255, 255, 255, 0.94);

  font-size:
    11px;

  font-weight:
    720;

  line-height:
    1;

  letter-spacing:
    0.10em;

  text-decoration:
    none;

  text-transform:
    uppercase;

  transition:
    color 220ms ease;
}


/*
  Underline is deliberately simple and flat.
  No pill button, no card, no oversized red CTA.
*/

#ybn-dh9-closing-v1 .ybn-dh9-closing__cta::before,
#ybn-dh9-closing-v1 .ybn-dh9-closing__cta::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  height:
    1px;

  pointer-events:
    none;
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta::before {
  background:
    rgba(255, 255, 255, 0.58);

  transform:
    scaleX(1);

  transform-origin:
    right center;

  transition:
    transform 280ms
    cubic-bezier(.2,.7,.2,1);
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta::after {
  background:
    #ff2638;

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform 300ms
    cubic-bezier(.2,.7,.2,1);
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta-icon {
  flex:
    0
    0 auto;

  transition:
    transform 260ms
    cubic-bezier(.2,.7,.2,1);
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:hover,
#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:focus-visible {
  color:
    #ffffff;
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:hover::before,
#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:focus-visible::before {
  transform:
    scaleX(0);
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:hover::after,
#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:focus-visible::after {
  transform:
    scaleX(1);
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:hover
.ybn-dh9-closing__cta-icon,
#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:focus-visible
.ybn-dh9-closing__cta-icon {
  transform:
    translate(
      3px,
      -3px
    );
}


#ybn-dh9-closing-v1 .ybn-dh9-closing__cta:focus-visible {
  outline:
    1px solid
    rgba(255, 255, 255, 0.82);

  outline-offset:
    7px;
}



/* ============================================================
   CLOSING MOTION

   Selected:
   1. Animata-inspired Micro Scale Fade for the closing copy group.
   2. One-time Shimmer Sweep for the eyebrow.
   3. Underline Hover Text for the CTA (defined above).

   Intentionally NOT used:
   - Light Rays / continuous background animation
   - Backlight
   - Scroll Float
   - Blur Fade
   - Specular / large button treatment

   Goal:
   the final screen should settle, not perform.
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

  html.ybn-closing-js
  #ybn-dh9-closing-v1
  .ybn-dh9-closing__content {
    opacity:
      0.72;

    transform:
      translate3d(
        0,
        8px,
        0
      )
      scale(0.985);

    transform-origin:
      left bottom;

    will-change:
      opacity,
      transform;
  }


  html.ybn-closing-js
  #ybn-dh9-closing-v1.is-closing-visible
  .ybn-dh9-closing__content {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);

    transition:
      opacity 720ms ease,
      transform 780ms
      cubic-bezier(.2,.72,.2,1);
  }


  @supports
  (
    (-webkit-background-clip: text)
    or
    (background-clip: text)
  ) {

    html.ybn-closing-js
    #ybn-dh9-closing-v1
    .ybn-dh9-closing__eyebrow {
      background:
        linear-gradient(
          110deg,
          #ff2638 0%,
          #ff2638 40%,
          rgba(255, 232, 218, 0.96) 49%,
          #ff5361 54%,
          #ff2638 62%,
          #ff2638 100%
        );

      background-size:
        240% 100%;

      background-position:
        125% 0;

      -webkit-background-clip:
        text;

      background-clip:
        text;

      -webkit-text-fill-color:
        transparent;
    }


    html.ybn-closing-js
    #ybn-dh9-closing-v1.is-closing-visible
    .ybn-dh9-closing__eyebrow {
      animation:
        ybn-dh9-closing-shimmer
        820ms
        380ms
        cubic-bezier(.2,.7,.2,1)
        1
        both;
    }

  }

}


@keyframes
ybn-dh9-closing-shimmer {

  from {
    background-position:
      125% 0;
  }

  to {
    background-position:
      -125% 0;
  }

}


/* ============================================================
   LARGE DESKTOP
   <= 1366px
   ============================================================ */

@media
(max-width: 1366px) {

  #ybn-dh9-closing-v1 {
    height:
      clamp(
        460px,
        38vw,
        500px
      );

    min-height:
      460px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__inner {
    width:
      calc(100% - 72px);

    padding-bottom:
      42px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__content {
    width:
      min(
        100%,
        520px
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__title {
    max-width:
      400px;

    font-size:
      clamp(
        40px,
        4vw,
        54px
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__copy {
    max-width:
      440px;

    font-size:
      13px;
  }

}


/* ============================================================
   TABLET
   681px – 1024px
   ============================================================ */

@media
(min-width: 681px)
and
(max-width: 1024px) {

  #ybn-dh9-closing-v1 {
    height:
      540px;

    min-height:
      540px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__image {
    object-position:
      61% 62%;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__shade--left {
    background:
      linear-gradient(
        90deg,
        rgba(5, 8, 6, 0.72) 0%,
        rgba(5, 8, 6, 0.56) 26%,
        rgba(5, 8, 6, 0.30) 48%,
        rgba(5, 8, 6, 0.09) 68%,
        rgba(5, 8, 6, 0.00) 83%
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__inner {
    width:
      calc(100% - 56px);

    padding-bottom:
      42px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__content {
    width:
      min(
        100%,
        480px
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__title {
    max-width:
      410px;

    font-size:
      clamp(
        42px,
        6.2vw,
        56px
      );
  }

}


/* ============================================================
   MOBILE
   <= 680px
   ============================================================ */

@media
(max-width: 680px) {

  #ybn-dh9-closing-v1 {
    height:
      580px;

    min-height:
      580px;
  }


  /*
    On mobile the image is shifted to keep:
    - text-safe darkness on the left/top-left
    - enough of the product visible in the lower-right
  */

  #ybn-dh9-closing-v1 .ybn-dh9-closing__image {
    object-position:
      64% 50%;

    /*
      The original composition places the product low in the frame.
      On narrow screens a small bottom-origin scale shifts the product
      visually upward and slightly right, away from the text block,
      without introducing a second mobile asset.
    */

    transform:
      scale(1.12);

    transform-origin:
      50% 100%;
  }


  /*
    Mobile uses a stronger vertical+left gradient because
    the text stack occupies more of the available width.
  */

  #ybn-dh9-closing-v1 .ybn-dh9-closing__shade--left {
    background:
      linear-gradient(
        90deg,
        rgba(5, 8, 6, 0.68) 0%,
        rgba(5, 8, 6, 0.46) 48%,
        rgba(5, 8, 6, 0.16) 78%,
        rgba(5, 8, 6, 0.00) 100%
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__shade--bottom {
    background:
      linear-gradient(
        180deg,
        rgba(6, 8, 7, 0.00) 0%,
        rgba(6, 8, 7, 0.07) 48%,
        rgba(6, 8, 7, 0.30) 76%,
        rgba(6, 8, 7, 0.62) 100%
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__inner {
    width:
      calc(100% - 36px);

    align-items:
      flex-end;

    padding-bottom:
      34px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__content {
    width:
      min(
        100%,
        310px
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__eyebrow {
    margin-bottom:
      11px;

    font-size:
      8px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__title {
    max-width:
      310px;

    font-size:
      clamp(
        36px,
        9.8vw,
        44px
      );

    line-height:
      0.98;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__copy {
    max-width:
      300px;

    margin-top:
      15px;

    font-size:
      12.5px;

    line-height:
      1.55;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__cta {
    margin-top:
      20px;

    font-size:
      10px;
  }

}


/* ============================================================
   SMALL MOBILE
   <= 420px
   ============================================================ */

@media
(max-width: 420px) {

  #ybn-dh9-closing-v1 {
    height:
      540px;

    min-height:
      540px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__inner {
    width:
      calc(100% - 30px);

    padding-bottom:
      30px;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__image {
    object-position:
      62% 50%;

    transform:
      scale(1.15);

    transform-origin:
      50% 100%;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__content {
    width:
      min(
        100%,
        286px
      );
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__title {
    max-width:
      286px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

  #ybn-dh9-closing-v1 *,
  #ybn-dh9-closing-v1 *::before,
  #ybn-dh9-closing-v1 *::after {
    animation:
      none !important;

    transition-duration:
      0.01ms !important;
  }


  #ybn-dh9-closing-v1 .ybn-dh9-closing__content {
    opacity:
      1 !important;

    transform:
      none !important;
  }

}