/* About 2: the Voxxy logo is built from 5 transparent letter layers (V, o, x, x, y) on one
   shared canvas, stacked on top of each other. Each layer rolls in like a letter
   (built by assets/js/about2.js). */
.saya-about--2 .saya-about__logo--layers {
  position: relative;
  width: 95%;
  aspect-ratio: 1881 / 471;
  line-height: 0;
}

.saya-about--2 .saya-about__logo--layers img.saya-about__logo-layer,
.saya-about--2 .saya-about__logo--layers .saya-about__layer-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.saya-about--2 .saya-about__layer-slot {
  overflow: hidden;
}

.saya-about--2 .saya-about__layer-slot img {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

@media (max-width: 991px) {
  .saya-about--2 .saya-about__logo--layers { width: 60%; margin: 0 auto; }
}

@media (max-width: 575px) {
  .saya-about--2 .saya-about__logo--layers { width: 80%; }
}

.saya-about--2 .saya-about__label .saya-about__letter {
  display: block;
  line-height: 1;
  color: #fff;
}

/* equal space above and below the content: cancel the Bootstrap .g-5 row's negative top
   margin (it pulled the content 48px up, so the top gap was smaller than the bottom one) */
.saya-about--2 .container-fluid > .row {
  margin-top: 0;
}

/* stacked (tablet / mobile): keep a gap between the logo and the text */
@media (max-width: 991px) {
  .saya-about--2 .text-main { margin-top: 28px; }
}

/* nothing is visible until about2.js has built the hidden letters (no flash of the plain
   logo / text before the roll-in) */
.saya-about--2:not(.is-ready) .saya-about__logo--layers,
.saya-about--2:not(.is-ready) .saya-about__label,
.saya-about--2:not(.is-ready) .saya-about__words {
  visibility: hidden;
}
/* Elementor editor: widgets are re-rendered without about2.js, so always show them there */
.elementor-editor-active .saya-about--2 .saya-about__logo--layers,
.elementor-editor-active .saya-about--2 .saya-about__label,
.elementor-editor-active .saya-about--2 .saya-about__words {
  visibility: visible;
}

/* ---------- About 2 on mobile phones ----------
   logo and text start at the same 20px left edge; whole words wrap (about2.js keeps each
   word together); the two corner ribbons sit fully inside their corners, with room kept
   above the logo and below the text so they never cover either */
@media (max-width: 767px) {
  #saya-about2.saya-about--2 {
    padding: 92px 0 118px !important;
  }
  .saya-about--2 .saya-about__label { flex-wrap: wrap; }
  /* the label stays on one line on phones (28px needs ~366px) */
  .saya-about--2 .saya-about__label,
  .saya-about--2 .saya-about__label .saya-about__letter { font-size: min(28px, 6.1vw) !important; line-height: 1.15 !important; }
  .saya-about--2 .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .saya-about--2 .container-fluid > .row { margin-left: 0; margin-right: 0; }
  .saya-about--2 .container-fluid > .row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
  .saya-about--2 .saya-about__logo--layers {
    width: 72%;
    margin: 0;
  }
  .saya-about--2 .text-main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: none;
    text-align: left;
  }
  .saya-about--2 .saya-about__row { justify-content: flex-start; }

  .saya-about--2 .saya-about__corner {
    top: 0 !important;
    left: 0 !important;
    width: 84px !important;
    max-width: none !important;
  }
  .saya-about--2 .saya-about__corner img { display: block; width: 100%; height: auto; }
  .saya-about--2 .saya-about__corner2 {
    bottom: 0 !important;
    right: 0 !important;
    width: 140px !important;
    max-width: none !important;
    transform: none !important;
  }
}