/**
 * Yubeen Site Assets — About Us Page
 * Version: 0.18.0
 * Stage 3N full-page CSS handoff.
 * Extracted from the seven current About Us Elementor HTML widgets in source order.
 */

/*
 * Runtime patch history:
 * - 2026-08-23 / Site Assets v0.27.24:
 *   About Hero CSS now supports an initial-HTML <img> for LCP delivery.
 *   Existing shade, depth, typography and responsive focal points are preserved.
 */

/* ===== About Us Widget 01 Style 01 ===== */
/* =========================================================
   01. RESET
========================================================= */

.yba-hero,
.yba-hero * {
  box-sizing: border-box;
}

.yba-hero {
  --yba-white: #f8f5ef;
  --yba-cream: #f4eee4;
  --yba-text: rgba(244, 241, 235, 0.88);
  --yba-muted: rgba(235, 231, 223, 0.74);

  --yba-background:
    url("/wp-content/uploads/2026/08/about-us-hero-yubeen-2026-scaled.png");

  position: relative;

  width: 100vw;
  max-width: none;

  min-height: clamp(500px, 31.2vw, 620px);

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  color: var(--yba-white);
  background: #171711;

  isolation: isolate;

  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   02. HERO MEDIA / LCP IMAGE
========================================================= */

/*
 * 2026-08-23 — About Hero LCP delivery refinement
 *
 * WHY THIS CHANGE EXISTS
 * ---------------------------------------------------------
 * Lighthouse showed that the About Hero image was discovered
 * about 3.39 seconds late because it existed only as a CSS
 * background image. CSS backgrounds cannot receive the HTML
 * image priority hints that Lighthouse requested.
 *
 * MIGRATION-SAFE DESIGN
 * ---------------------------------------------------------
 * The base .yba-hero__image rule keeps the old CSS background
 * temporarily so the page still looks correct if this plugin
 * is installed before the Elementor HTML is updated.
 *
 * After the Elementor Hero markup is changed, add the class:
 *
 *     yba-hero__image--html-media
 *
 * and place a real <img> inside the wrapper.
 *
 * That modifier disables the CSS background. The <img> then
 * becomes the single Hero image source and can be discovered
 * directly from the initial HTML with fetchpriority="high".
 */

.yba-hero__image {
  position: absolute;
  inset: 0;

  z-index: -4;

  /* Temporary fallback for the old Elementor markup. */
  background-image: var(--yba-background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  overflow: hidden;

  transform: scale(1.002);
}


/*
 * New production mode.
 *
 * Once Elementor contains the real <img>, this class prevents
 * the old CSS background from remaining as a second image layer.
 */
.yba-hero__image--html-media {
  background-image: none;
}


/*
 * The HTML image reproduces the former background-size: cover
 * behavior without changing Hero geometry, overlays or copy.
 *
 * Do not add loading="lazy" to this image in Elementor.
 * The Hero is the LCP image and must load immediately.
 */
.yba-hero__image > img {
  width: 100%;
  height: 100%;
  max-width: none;

  display: block;

  object-fit: cover;
  object-position: center center;

  pointer-events: none;
  user-select: none;
}


/*
 * Main left dark region.
 * The gradient transition follows the reference:
 * dense dark area on the left, fading near the centre.
 */

.yba-hero__shade {
  position: absolute;
  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(15, 14, 10, 0.97) 0%,
      rgba(18, 17, 12, 0.95) 22%,
      rgba(20, 19, 14, 0.86) 33%,
      rgba(21, 20, 15, 0.59) 42%,
      rgba(20, 19, 15, 0.19) 50%,
      rgba(18, 18, 15, 0.03) 63%,
      rgba(18, 18, 15, 0.06) 100%
    );
}


/*
 * Soft bottom depth and slight edge control.
 */

.yba-hero__depth {
  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(5, 5, 4, 0.05) 0%,
      rgba(5, 5, 4, 0.00) 48%,
      rgba(5, 5, 4, 0.23) 100%
    ),
    radial-gradient(
      circle at 56% 28%,
      rgba(255, 248, 232, 0.08),
      transparent 34%
    );
}


/* =========================================================
   03. INNER LAYOUT
========================================================= */

.yba-hero__inner {
  position: relative;
  z-index: 2;

  width: min(88vw, 1450px);
  min-height: inherit;

  margin: 0 auto;

  display: flex;
  align-items: center;

  padding:
    clamp(42px, 4.2vw, 72px)
    0
    clamp(42px, 4vw, 66px);
}


/* =========================================================
   04. COPY AREA
========================================================= */

.yba-hero__content {
  width: min(560px, 38vw);

  margin-top: 16px;

  opacity: 0;
  transform: translateY(18px);

  animation:
    yba-hero-enter
    780ms cubic-bezier(.2, .8, .2, 1)
    120ms forwards;
}

@keyframes yba-hero-enter {

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* Eyebrow */

.yba-hero__eyebrow {
  margin-bottom: 22px;

  color: rgba(241, 237, 228, 0.80);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.075em;

  text-transform: uppercase;
}


/* Main title */

.yba-hero__title {
  margin: 0;

  color: var(--yba-white);

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.24);
}


/* First line */

.yba-hero__title-main {
  display: block;

  max-width: 540px;

  font-size:
    clamp(46px, 3.75vw, 66px);

  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.047em;
}


/* Second italic serif line */

.yba-hero__title-script {
  display: block;

  margin-top: 2px;

  color: var(--yba-cream);

  font-family:
    Georgia,
    "Times New Roman",
    Times,
    serif;

  font-size:
    clamp(47px, 3.85vw, 68px);

  font-weight: 400;
  font-style: italic;
  line-height: 1.03;
  letter-spacing: -0.035em;
}


/* Description */

.yba-hero__description {
  max-width: 515px;

  margin:
    31px
    0
    0;

  color: var(--yba-text);

  font-size:
    clamp(14px, 0.93vw, 17px);

  font-weight: 400;
  line-height: 1.63;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.27);
}


/* =========================================================
   05. WATCH / PLAY LINK
========================================================= */

.yba-hero__watch {
  width: fit-content;

  margin-top: 34px;

  display: inline-flex;
  align-items: center;

  gap: 14px;

  color: rgba(250, 247, 241, 0.94);

  text-decoration: none;

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* Circular cream play button */

.yba-hero__watch-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #26221d;
  background: #f5ede1;

  box-shadow:
    0 6px 17px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);

  transition:
    transform 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.yba-hero__watch-icon svg {
  width: 20px;
  height: 20px;

  display: block;

  margin-left: 2px;
}



/* Link text */

.yba-hero__watch-text {
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
}


/* Whole link spacing */

.yba-hero__watch {
  width: fit-content;

  margin-top: 34px;

  display: inline-flex;
  align-items: center;

  gap: 16px;

  color: rgba(250, 247, 241, 0.94);

  text-decoration: none;

  transition:
    color 220ms ease,
    transform 220ms ease;
}



.yba-hero__watch:hover {
  color: #ffffff;

  transform: translateX(3px);
}

.yba-hero__watch:hover .yba-hero__watch-icon {
  transform: scale(1.06);

  background: #ffffff;

  box-shadow:
    0 8px 21px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* =========================================================
   06. DESKTOP WIDE SCREEN
========================================================= */

@media (min-width: 1680px) {

  .yba-hero {
    min-height: 620px;
  }

  .yba-hero__inner {
    width: min(88vw, 1540px);
  }

  .yba-hero__content {
    width: 585px;
  }

  .yba-hero__title-main {
    font-size: 68px;
  }

  .yba-hero__title-script {
    font-size: 70px;
  }

  .yba-hero__description {
    max-width: 535px;

    font-size: 17px;
  }

}


/* =========================================================
   07. STANDARD / MEDIUM DESKTOP
========================================================= */

@media (max-width: 1450px) {

  .yba-hero {
    min-height: 520px;
  }

  .yba-hero__inner {
    width: min(89vw, 1280px);
  }

  .yba-hero__content {
    width: min(500px, 39vw);

    margin-top: 7px;
  }

  .yba-hero__eyebrow {
    margin-bottom: 17px;

    font-size: 11px;
  }

  .yba-hero__title-main {
    font-size:
      clamp(43px, 3.65vw, 57px);
  }

  .yba-hero__title-script {
    font-size:
      clamp(44px, 3.72vw, 59px);
  }

  .yba-hero__description {
    max-width: 470px;

    margin-top: 25px;

    font-size: 14px;
  }

  .yba-hero__watch {
    margin-top: 28px;
  }

}


/* =========================================================
   08. TABLET
========================================================= */

@media (max-width: 1024px) {

  .yba-hero {
    width: 100%;

    min-height: 650px;

    margin-left: 0;
    margin-right: 0;
  }

  .yba-hero__image {
    background-position: 62% center;
  }

  /*
   * Keep the same tablet focal point after moving from
   * background-position to an actual HTML image.
   */
  .yba-hero__image > img {
    object-position: 62% center;
  }

  .yba-hero__shade {
    background:
      linear-gradient(
        90deg,
        rgba(13, 12, 9, 0.96) 0%,
        rgba(15, 14, 10, 0.90) 31%,
        rgba(18, 17, 13, 0.65) 48%,
        rgba(18, 17, 13, 0.20) 68%,
        rgba(18, 17, 13, 0.07) 100%
      );
  }

  .yba-hero__inner {
    width: calc(100% - 64px);

    align-items: center;
  }

  .yba-hero__content {
    width: min(510px, 61vw);
  }

  .yba-hero__title-main {
    font-size:
      clamp(46px, 6.1vw, 62px);
  }

  .yba-hero__title-script {
    font-size:
      clamp(47px, 6.2vw, 64px);
  }

  .yba-hero__description {
    font-size: 15px;
  }

}


/* =========================================================
   09. MOBILE
========================================================= */

@media (max-width: 767px) {

  .yba-hero {
    min-height: 760px;
  }

  .yba-hero__image {
    background-position: 68% center;
  }

  /*
   * Keep the original mobile crop/focal point with the
   * new HTML <img> implementation.
   */
  .yba-hero__image > img {
    object-position: 68% center;
  }

  /*
   * On mobile the photo remains visible in the upper area,
   * while the copy sits over a stronger lower gradient.
   */

  .yba-hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(15, 14, 10, 0.10) 0%,
        rgba(15, 14, 10, 0.18) 30%,
        rgba(15, 14, 10, 0.74) 58%,
        rgba(15, 14, 10, 0.98) 78%,
        rgba(15, 14, 10, 1) 100%
      );
  }

  .yba-hero__depth {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 42%,
        rgba(0, 0, 0, 0.34) 100%
      );
  }

  .yba-hero__inner {
    width: calc(100% - 40px);

    align-items: flex-end;

    padding:
      64px
      0
      55px;
  }

  .yba-hero__content {
    width: 100%;

    margin-top: auto;
  }

  .yba-hero__eyebrow {
    margin-bottom: 13px;

    font-size: 11px;
  }

  .yba-hero__title-main {
    font-size:
      clamp(40px, 10.7vw, 54px);
  }

  .yba-hero__title-script {
    margin-top: 1px;

    font-size:
      clamp(41px, 11vw, 56px);
  }

  .yba-hero__description {
    max-width: 510px;

    margin-top: 22px;

    font-size: 14px;
    line-height: 1.58;
  }

  .yba-hero__watch {
    margin-top: 27px;
  }

}


/* =========================================================
   10. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .yba-hero {
    min-height: 720px;
  }

  .yba-hero__inner {
    width: calc(100% - 32px);

    padding-bottom: 43px;
  }

  .yba-hero__title-main {
    font-size: 39px;
  }

  .yba-hero__title-script {
    font-size: 41px;
  }

  .yba-hero__description {
    font-size: 13.5px;
  }

}


/* =========================================================
   11. REDUCED MOTION
========================================================= */

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

  .yba-hero__content {
    opacity: 1;
    transform: none;

    animation: none;
  }

  .yba-hero__watch,
  .yba-hero__watch-icon {
    transition: none;
  }

}

/* ===== About Us Widget 01 Style 02 ===== */
/* =========================================================
   ABOUT HERO HEIGHT OPTIMIZATION
========================================================= */

/* Standard desktop */
.yba-hero {
  min-height: clamp(500px, 29vw, 550px);
}

.yba-hero__inner {
  padding-top: 42px;
  padding-bottom: 42px;
}

.yba-hero__content {
  margin-top: 0;
}


/* Large desktop */
@media (min-width: 1680px) {

  .yba-hero {
    min-height: 550px;
  }

  .yba-hero__inner {
    padding-top: 46px;
    padding-bottom: 46px;
  }

}


/* Medium desktop */
@media (max-width: 1450px) {

  .yba-hero {
    min-height: 510px;
  }

  .yba-hero__inner {
    padding-top: 38px;
    padding-bottom: 38px;
  }

}


/* Tablet */
@media (max-width: 1024px) {

  .yba-hero {
    min-height: 610px;
  }

  .yba-hero__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

}


/* Mobile */
@media (max-width: 767px) {

  .yba-hero {
    min-height: 700px;
  }

  .yba-hero__inner {
    padding-top: 54px;
    padding-bottom: 44px;
  }

}


/* Small mobile */
@media (max-width: 480px) {

  .yba-hero {
    min-height: 680px;
  }

}