/* ============================================================================
   Es Bassol Nou — About / Our Studio
   Calcado del mockup (vw/%): hero "Our Studio" sobre imagen, "Company Story"
   con 4 columnas escalonadas, imagen, "Team Values" en cascada diagonal,
   imagen tapial + "Let's Talk". Desktop-first fiel; en móvil se apila.
   ========================================================================== */

.ab-hero,
.ab-story,
.ab-image,
.ab-values,
.ab-outro {
  position: relative;
}

.ab-story,
.ab-values {
  background-color: var(--c-cream);
  /* rejilla vertical fina (12 col) como el mockup */
  color: var(--c-ink);
}

/* --- HERO --------------------------------------------------------------- */
.ab-hero {
  height: 77.6vw;
  overflow: hidden;
  color: #221f20;
}

.ab-hero__media {
  position: absolute;
  inset: 0;
}

.ab-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-hero__title {
  position: absolute;
  top: 17.7vw;
  left: 2.1%;
  right: 2.1%;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3rem, 9.375vw, 15rem);
  /* 180pt */
  line-height: 0.86;
}

/* --- COMPANY STORY ------------------------------------------------------ */
.ab-story {
  height: 94vw;
}

.ab-story__title {
  position: absolute;
  top: 10.6vw;
  left: 50%;
  width: max-content;
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 5.21vw;
  /* 100pt */
  line-height: 0.82;
  text-align: left;
  transform: translateX(-50%);
  color: #221f20;
}

.ab-story__title span {
  display: block;
}

.ab-story__title span:first-child {
  position: static;
}

.ab-story__title span:last-child {
  position: static;
  transform: translateX(-0.35em);
}

.ab-story__col {
  position: absolute;
  width: 21.4vw;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.61vw;
  line-height: 1.16;
  letter-spacing: 0;

  font-kerning: normal;
  font-synthesis: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* para que se vea más “chata” */
  transform: scaleY(0.90);
  transform-origin: top left;
}

.ab-story__col--1 {
  top: 29.5vw;
  left: 2.1%;
}

.ab-story__col--2 {
  top: 42.5vw;
  left: 26.5%;
}

.ab-story__col--3 {
  top: 55.5vw;
  left: 50.8%;
}

.ab-story__col--4 {
  top: 68.5vw;
  left: 75.1%;
}

/* --- IMAGEN INTERMEDIA -------------------------------------------------- */
.ab-image {
  overflow: hidden;
}

.ab-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- TEAM VALUES -------------------------------------------------------- */
.ab-values {
  height: 87.6vw;
}

.ab-values__title {
  position: absolute;
  left: 2.1%;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 5.21vw;
  line-height: 0.82;
  color: #221f20;
}

.ab-values__title span {
  display: block;
}

.ab-values__title span:first-child {
  position: absolute;
  top: 13.9vw;
  left: 2.1%;
}

.ab-values__title span:last-child {
  position: absolute;
  top: 18.2vw;
  left: 2.1%;
  transform: translateX(0.57em);

}


.ab-value {
  position: absolute;
  width: 15%;
}

.ab-value h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 3.12vw;
  /* 60pt */
  line-height: 0.92;
  margin-bottom: 1vw;
}

.ab-value h3 span {
  display: block;
}

.ab-value p {
  font-size: 1.61vw;
  line-height: 1.16;
}

.ab-value--respect {
  top: 14.7vw;
  left: 81.7%;
  width: 16%;
}

.ab-value--comm {
  top: 41vw;
  left: 50.8%;
  width: 17%;
}

.ab-value--detail {
  top: 46.6vw;
  left: 34.6%;
}

.ab-value--care {
  top: 57.9vw;
  left: 18.4%;
}

.ab-value--trust {
  top: 69.1vw;
  left: 2.1%;
}

/* --- OUTRO (tapial + Let's Talk) ---------------------------------------- */
.ab-outro {
  height: 91.3vw;
  background: url("/assets/img/about/tapial-1920.jpg") center / cover no-repeat;
  overflow: visible;
}

.ab-outro__inset {
  position: absolute;
  top: 21.5vw;
  left: 50%;
  width: 44.7vw;
  height: 44.7vw;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.ab-outro__inset picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ab-outro__inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-outro .lets-talk {
  position: absolute;
  right: 11.7%;
  bottom: 0;
  height: 25vw;
}

/* ========================================================================
   MÓVIL: apilado
   ======================================================================== */
@media (max-width: 63.99rem) {
  .ab-hero {
    height: 70vw;
  }

  .ab-hero__media {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .ab-hero__title {
    position: absolute;
    inset: 17.7vw 2.1% auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    font-size: clamp(3rem, 9.375vw, 15rem);
    line-height: 0.86;
    text-align: left;
    color: var(--c-ink);
  }

  .ab-story,
  .ab-values {
    height: auto;
    padding: 3rem 1.25rem;
    background-image: none;
  }

  .ab-story__title span,
  .ab-values__title span {
    position: static !important;
    width: auto !important;
    inset: auto !important;
    margin: 0 !important;
  }

  .ab-story__col,
  .ab-value {
    position: static !important;
    width: auto !important;
    inset: auto !important;
    display: block;
    margin-bottom: 1.5rem;
  }

  .ab-story__title {
    position: static;
    width: max-content;
    display: block;
    margin: 0 auto 2.5rem;
    line-height: 0.82;
    text-align: left;
    transform: none;
  }

  .ab-story__title span:last-child {
    transform: translateX(-0.35em);
  }

  .ab-story__title span,
  .ab-values__title span {
    font-size: 2.4rem;
  }

  .ab-values__title {
    position: static;
    display: block;
    width: max-content;
    margin: 0 auto 3rem;
    line-height: 0.82;
    text-align: left;
  }

  .ab-values__title span {
    display: block;
  }

  .ab-values__title span:last-child {
    transform: translateX(0.57em);
  }

  .ab-story__col,
  .ab-value p {
    font-size: 1.15rem;
  }

  .ab-value h3 {
    font-size: 2rem;
  }

  .ab-value h3 span {
    display: inline;
  }

  .ab-value--respect h3 {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.22em;
    font-size: clamp(1.55rem, 7.5vw, 2rem);
  }

  .ab-image {
    height: auto;
  }

  .ab-image img {
    height: auto;
  }

  .ab-outro {
    height: 75vw;
    padding: 3rem 1.25rem 0;
  }

  .ab-outro__inset {
    position: static;
    width: 60vw;
    height: 60vw;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    transform: none;
  }

  .ab-outro .lets-talk {
    position: absolute;
    top: auto;
    right: 11.7%;
    bottom: 0;
    left: auto;
    width: 11.8%;
    height: 25vw;
    min-width: 0;
    margin: 0;
    padding: 1.4vw 0;
  }
}

@media (max-width: 47.99rem) {
  .ab-outro .lets-talk {
    right: 11.5%;
    width: 12.4%;
  }
}