/* ==========================================================================
   About — /about/
   Rebuild of Elementor post 41. Reference boxes: layout/ref-about-1440.txt
   (1425px usable width).

   Top-down desktop geometry:
     hero          320 + 64 + 400 + 320            = 1104
     main section  margin-top 150                  -> row starts at 1254
       left column 70%  (998px)  white | green | why-us
       right col   50%  shrunk to 428px            headline + 3 counters
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.page-about .page-about__hero {
  padding: 320px 0;
  background-image: url('/assets/images/About-us-Rokappa.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-about .page-about__hero-eyebrow,
.page-about .page-about__hero-title {
  color: var(--color-secondary);
  text-align: center;
  line-height: 1;
}

.page-about .page-about__hero-eyebrow {
  font-size: 64px;
  font-weight: 400;
}

.page-about .page-about__hero-title {
  font-size: 200px;
  font-weight: 600;
}

/* --- Main band ---------------------------------------------------------- */
.page-about .page-about__main {
  --content-width: 1580px;
  margin: 150px 0;
}

.page-about .page-about__row {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}

/* Left column — 70%, does not shrink (Elementor: --flex-grow:0/--flex-shrink:0). */
.page-about .page-about__col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: 70%;
  min-width: 0;
}

/* --- White half (logo) -------------------------------------------------- */
.page-about .page-about__logo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 1 auto;
  width: 50%;
  min-width: 0;
  background-color: var(--color-invert);
  border-radius: 160px 0 0 160px;
  box-shadow: 0 0 37px 0 rgba(0, 0, 0, .25);
}

.page-about .page-about__logo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(132deg, var(--color-invert) 49%, #4a4a4a 100%);
  opacity: .3;
}

.page-about .page-about__logo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 425px;
  height: auto;
  margin-inline: auto;
}

/* --- Green half (ABOUT copy) -------------------------------------------- */
.page-about .page-about__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: 50%;
  min-width: 0;
  padding: 40px 100px 40px 60px;
  background-color: var(--color-secondary);
  border-radius: 0 160px 160px 0;
  box-shadow: 6px 0 62px 0 rgba(0, 0, 0, .25);
}

.page-about .page-about__intro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(161deg, #cecece 23%, var(--color-primary) 100%);
  opacity: .3;
}

.page-about .page-about__intro-title,
.page-about .page-about__intro-text {
  position: relative;
  z-index: 1;
  color: var(--color-invert);
}

.page-about .page-about__intro-text {
  margin-top: 20px;
}

/* --- WHY US? card ------------------------------------------------------- */
.page-about .page-about__why {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 100px;
  padding: 55px;
  border: 1px solid var(--color-secondary);
  border-radius: 40px;
  box-shadow: -6px 6px 28px 1px rgba(0, 0, 0, .25);
}

.page-about .page-about__why-text {
  margin-top: 30px;
}

/* --- Right column — headline + counters --------------------------------- */
.page-about .page-about__numbers {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: 50%;
  min-width: 0;
}

.page-about .page-about__numbers-title {
  color: var(--color-primary);
  text-align: end;
}

.page-about .page-about__stat {
  margin-top: 80px;
}

.page-about .page-about__stat-value {
  display: flex;
  justify-content: flex-end;
  color: var(--color-secondary);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.page-about .page-about__stat-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 2.5;
}

/* --- Laptop — max-width: 1366px ----------------------------------------- */
@media (max-width: 1366px) {
  .page-about .page-about__hero { padding: 280px 0; }
  .page-about .page-about__hero-eyebrow { font-size: 40px; }
  .page-about .page-about__hero-title { font-size: 150px; }

  .page-about .page-about__main { --content-width: 1100px; }
  .page-about .page-about__col { width: 75%; }

  .page-about .page-about__logo-img { width: 285px; }
  .page-about .page-about__intro { padding: 40px 50px 40px 40px; }
  .page-about .page-about__why { margin-top: 50px; }
  .page-about .page-about__stat { margin-top: 40px; }
}

/* --- Tablet extra — max-width: 1200px ----------------------------------- */
@media (max-width: 1200px) {
  .page-about .page-about__hero-eyebrow { font-size: 36px; }
  .page-about .page-about__hero-title { font-size: 130px; }

  .page-about .page-about__main {
    --content-width: 900px;
    margin: 100px 0;
  }
  .page-about .page-about__col { width: 80%; }

  .page-about .page-about__logo-img { width: 240px; }
  .page-about .page-about__stat-value { font-size: 72px; }
  .page-about .page-about__stat-label { font-size: 20px; }
}

/* --- Tablet — max-width: 1024px ----------------------------------------- */
@media (max-width: 1024px) {
  .page-about .page-about__hero { padding: 200px 0; }
  .page-about .page-about__hero-eyebrow { font-size: 32px; }
  .page-about .page-about__hero-title { font-size: 110px; }

  .page-about .page-about__main { --content-width: 700px; }
  .page-about .page-about__col { width: 75%; }

  /* The two halves stack: rounded top / rounded bottom instead of left/right. */
  .page-about .page-about__logo {
    width: 100%;
    border-radius: 140px 140px 0 0;
  }
  .page-about .page-about__logo-img {
    width: 260px;
    margin: 70px auto 50px;
  }

  .page-about .page-about__intro {
    width: 100%;
    padding: 40px 60px 60px;
    border-radius: 0 0 140px 140px;
    text-align: center;
  }
}

/* --- Mobile extra — max-width: 880px ------------------------------------ */
@media (max-width: 880px) {
  .page-about .page-about__hero-eyebrow { font-size: 28px; }
  .page-about .page-about__hero-title { font-size: 90px; }
}

/* --- Mobile — max-width: 767px ------------------------------------------
   Elementor drops every container to --width:100% and wraps the row, so the
   whole block becomes a single 300px-wide stack.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .page-about .page-about__hero { padding: 150px 0; }
  .page-about .page-about__hero-eyebrow { font-size: 20px; }
  .page-about .page-about__hero-title { font-size: 50px; }

  .page-about .page-about__main { --content-width: 300px; }

  .page-about .page-about__row { flex-wrap: wrap; }
  .page-about .page-about__col { width: 100%; }

  .page-about .page-about__logo-img {
    width: 175px;
    margin: 80px auto 60px;
  }

  .page-about .page-about__intro { padding: 40px 30px 60px; }

  .page-about .page-about__why { padding: 30px; }

  .page-about .page-about__numbers {
    width: 100%;
    margin-top: 50px;
  }
  .page-about .page-about__numbers-title { text-align: center; }
  .page-about .page-about__stat-value { justify-content: center; }
  .page-about .page-about__stat-label { justify-content: center; }
}


/* --- Wide-screen gutter -------------------------------------------------
   Above 1366px these bands have no content-width narrow enough to keep them
   off the screen edge, so they get the same 40px gutter as the header.
   ------------------------------------------------------------------------ */
@media (min-width: 1367px) {
  .page-about .page-about__hero { padding-inline: var(--gutter); }
}