/* ==========================================================================
   Home page
   Geometry target: layout/ref-home-1440.txt (1425px of usable width).

   Band stack, measured from the top of the page content:
     hero            y    0 .. 904   (320 + 64 + 200 + 320)
     ABOUT           y 1054 .. 1410  (150 margin + 356 tall pills)
     products        y 1560 .. 2869
     numbers         y 3029 .. 3657  (160 margin; heading pulled 100px above)
     why us/careers  y 3807 .. 4403  (150 margin top and bottom)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.page-home .home-hero {
  padding: 320px 0;
  background-image: url('/assets/images/Background-Rokappa.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.page-home .home-hero__kicker {
  color: var(--color-secondary);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.page-home .home-hero__title {
  color: var(--color-secondary);
  font-size: 200px;
  font-weight: 600;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   2. ABOUT — a white pill and a green pill that meet in the middle.
   -------------------------------------------------------------------------- */
.page-home .home-about { margin: 150px 0; }

.page-home .home-about__inner {
  --content-width: 1268px;
  flex-direction: row;
}

.page-home .home-about__pane {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 0;
}

/* Elementor's background overlay: a 30%-opacity gradient that sits above the
   pane's own colour but below its content. */
.page-home .home-about__pane::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: .3;
}

.page-home .home-about__pane--logo {
  justify-content: center;
  padding-left: 100px;
  border-radius: 160px 0 0 160px;
  background-color: var(--color-invert);
  box-shadow: 0 0 37px 0 rgba(0, 0, 0, .25);
}

.page-home .home-about__pane--logo::before {
  background-image: linear-gradient(132deg, #ffffff 49%, #4a4a4a 100%);
}

.page-home .home-about__pane--copy {
  padding: 40px 100px 40px 60px;
  border-radius: 0 160px 160px 0;
  background-color: var(--color-secondary);
  box-shadow: 6px 0 62px 0 rgba(0, 0, 0, .25);
  color: var(--color-invert);
}

.page-home .home-about__pane--copy::before {
  background-image: linear-gradient(161deg, #cecece 23%, #000000 100%);
}

/* Site logo — Elementor's image widget is centred inside the pill. */
.page-home .home-about__logo { display: block; }

.page-home .home-about__logo img {
  display: block;
  width: 425px;
  margin-inline: auto;
}

.page-home .home-about__title { color: var(--color-invert); }

.page-home .home-about__text { margin-top: 20px; }

/* --------------------------------------------------------------------------
   3. Product showcase — a full-bleed wrapping row. Line 1 is BONAVIOX (60%)
   + PROLYSE (40%), line 2 is THIONEX (50%) + BONAPUR (50%), line 3 is
   HILOMEX (50%) centred.
   -------------------------------------------------------------------------- */
.page-home .home-products__inner {
  --content-width: 1614px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* The original rendered widget images inline; that is what drops the 12px
   Bonapur rule ~7px down its 24px line box. Anything taller than ~27px still
   fills its line box exactly, so the rest measure the same either way. */
.page-home .home-products img { vertical-align: middle; }

.page-home .home-products__block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 0;
}

/* Decorative rules run the full width of their block. */
.page-home .home-products__rule {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

.page-home .home-products__rule--hue img {
  filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(250deg);
}

.page-home .home-products__media { min-width: 0; }

.page-home .home-products__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-home .home-products__name--fit { align-self: flex-start; }
.page-home .home-products__name--bonaviox { margin-top: 25px; }
.page-home .home-products__name--prolyse { margin-top: 40px; }

.page-home .home-products__copy { margin-top: 20px; }

.page-home .home-products__btn { margin-top: 30px; }

/* --- BONAVIOX ----------------------------------------------------------- */
.page-home .home-products__block--bonaviox {
  width: 60%;
  align-items: flex-start;
  align-self: flex-start;
  padding-right: 135px;
}

.page-home .home-products__media--bonaviox { width: 40%; }

.page-home .home-products__body--bonaviox {
  width: 60%;
  padding-left: 30px;
}

.page-home .home-products__btn--bonaviox { margin-top: 50px; }

/* --- PROLYSE ------------------------------------------------------------ */
.page-home .home-products__block--prolyse {
  width: 40%;
  flex-wrap: nowrap;
}

.page-home .home-products__decor {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  width: 10%;
}

/* The aspect box is the decor SVG at its natural ratio; the image itself is
   drawn at 78% of it, exactly as the original resolved it. */
.page-home .home-products__decor-media {
  display: block;
  width: 100%;
  aspect-ratio: 69 / 716;
}

.page-home .home-products__decor-media img {
  display: block;
  width: 100%;
  height: 78%;
}

.page-home .home-products__body--prolyse {
  width: 100%;
  padding-left: 50px;
}

/* Elementor's image widget centres its image; visible once the column grows
   wider than the photo's intrinsic 498px. */
.page-home .home-products__body--prolyse > img { align-self: center; }

/* --- THIONEX ------------------------------------------------------------ */
.page-home .home-products__block--thionex {
  width: 50%;
  padding-right: 100px;
}

/* --- BONAPUR ------------------------------------------------------------ */
.page-home .home-products__block--bonapur { width: 50%; }

/* --- HILOMEX ------------------------------------------------------------ */
.page-home .home-products__block--hilomex {
  width: 50%;
  margin-top: 100px;
}

/* --- shared column widths for the three bottom products ----------------- */
.page-home .home-products__media--28 {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  width: 28%;
}

.page-home .home-products__body--72 {
  width: 72%;
  padding-left: 50px;
}

/* --------------------------------------------------------------------------
   4. ROKAPPA in numbers
   -------------------------------------------------------------------------- */
.page-home .home-numbers { margin-top: 160px; }

.page-home .home-numbers__inner {
  --content-width: 1614px;
  position: relative;
  z-index: 0;
  background-image: url('/assets/images/Rokappa-background.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fades the photograph out to white behind the right-aligned counters. */
.page-home .home-numbers__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(90deg, #ffffff00 64%, #ffffff 80%);
}

/* The heading hangs 100px above the band and contributes nothing to the flow
   — the slot collapses to zero height, as it did in the original. */
.page-home .home-numbers__title-slot { width: 100%; }

.page-home .home-numbers__title {
  margin-top: -100px;
  color: var(--color-primary);
  text-align: end;
}

.page-home .home-numbers__value {
  display: flex;
  justify-content: flex-end;
  color: var(--color-secondary);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
}

.page-home .home-numbers__value > span { text-align: center; }

.page-home .home-numbers__label {
  display: flex;
  justify-content: flex-end;
  font-size: 24px;
  font-weight: 600;
  line-height: 2.5;
}

.page-home .home-numbers__item { margin-top: 80px; }
.page-home .home-numbers__item--first { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. WHY US? / CAREERS
   -------------------------------------------------------------------------- */
.page-home .home-why { margin: 150px 0; }

.page-home .home-why__inner {
  --content-width: 1250px;
  flex-direction: row;
}

.page-home .home-why__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 55px;
  border: 1px solid var(--color-secondary);
  border-radius: 40px;
  box-shadow: -6px 6px 28px 1px rgba(0, 0, 0, .25);
}

.page-home .home-why__card--main {
  width: 60%;
  margin-right: 80px;
}

.page-home .home-why__card--careers {
  width: 40%;
  margin-left: 80px;
}

.page-home .home-why__copy { margin-top: 20px; }

.page-home .home-why__btn { margin-top: 30px; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* --- laptop -------------------------------------------------------------- */
@media (max-width: 1366px) {
  .page-home .home-hero { padding: 280px 0; }
  .page-home .home-hero__kicker { font-size: 40px; }
  .page-home .home-hero__title { font-size: 150px; }

  .page-home .home-about__inner { --content-width: 950px; }
  .page-home .home-about__pane--logo { padding: 10px; }
  .page-home .home-about__logo img { width: 335px; }

  .page-home .home-products__inner {
    --content-width: 1100px;
    row-gap: 40px;
  }
  .page-home .home-products__block--bonaviox { padding-right: 70px; }
  .page-home .home-products__decor-media img { height: 100%; }
  .page-home .home-products__block--hilomex { margin-top: 0; }

  .page-home .home-numbers__title { margin-top: -120px; }

  .page-home .home-why__inner { --content-width: 1000px; }
  .page-home .home-why__card--main { margin-right: 40px; }
  .page-home .home-why__card--careers { margin-left: 40px; }
}

/* --- tablet-extra -------------------------------------------------------- */
@media (max-width: 1200px) {
  .page-home .home-hero__kicker { font-size: 36px; }
  .page-home .home-hero__title { font-size: 130px; }

  .page-home .home-products__inner { --content-width: 900px; }
  .page-home .home-products__decor-media { align-self: flex-end; }
  .page-home .home-products__block--thionex {
    align-self: flex-start;
    padding-right: 30px;
  }
  .page-home .home-products__body--thionex { padding-left: 30px; }

  .page-home .home-numbers__value { font-size: 72px; }
  .page-home .home-numbers__label { font-size: 20px; }

  .page-home .home-why__inner { --content-width: 900px; }
  .page-home .home-why__card--main { margin-right: 20px; }
  .page-home .home-why__card--careers { margin-left: 20px; }
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-home .home-hero { padding: 200px 0; }
  .page-home .home-hero__kicker { font-size: 32px; }
  .page-home .home-hero__title { font-size: 110px; }

  .page-home .home-about__inner { --content-width: 700px; }
  .page-home .home-about__pane--copy { padding: 30px 70px 30px 40px; }
  .page-home .home-about__logo img { width: 260px; }

  .page-home .home-products__inner { --content-width: 700px; }
  .page-home .home-products__block { width: 100%; }
  .page-home .home-products__block--bonaviox { padding-right: 0; }
  .page-home .home-products__block--prolyse { margin-top: 50px; }
  .page-home .home-products__decor { flex-direction: column; }
  .page-home .home-products__decor-media {
    width: 45.54px;   /* 66% of the decor SVG's 69px intrinsic width */
    max-width: 100%;
  }
  .page-home .home-products__decor-media img {
    width: 66%;
    height: 100%;
    margin-inline: auto;
    object-fit: cover;
    object-position: center center;
  }
  .page-home .home-products__block--thionex,
  .page-home .home-products__block--bonapur,
  .page-home .home-products__block--hilomex { padding-top: 60px; }
  .page-home .home-products__block--thionex { padding-right: 0; }
  .page-home .home-products__media--28 { width: 40%; }
  .page-home .home-products__body--72 { width: 60%; }

  .page-home .home-numbers__title { margin-top: 20px; }
  .page-home .home-numbers__item--first { margin-top: 80px; }

  .page-home .home-why__inner {
    --content-width: 700px;
    flex-wrap: wrap;
  }
  .page-home .home-why__card { width: 100%; }
  .page-home .home-why__card--main { margin-right: 0; }
  .page-home .home-why__card--careers {
    margin-top: 50px;
    margin-left: 0;
  }
}

/* --- mobile-extra -------------------------------------------------------- */
@media (max-width: 880px) {
  .page-home .home-hero__kicker { font-size: 28px; }
  .page-home .home-hero__title { font-size: 90px; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-home .home-hero { padding: 150px 0; }
  .page-home .home-hero__kicker { font-size: 20px; }
  .page-home .home-hero__title { font-size: 50px; }

  .page-home .home-about { margin: 100px 0; }
  .page-home .home-about__inner {
    --content-width: 300px;
    flex-wrap: wrap;
  }
  .page-home .home-about__pane { width: 100%; }
  .page-home .home-about__pane--logo { border-radius: 140px 140px 0 0; }
  .page-home .home-about__logo { margin: 80px 0 60px; }
  .page-home .home-about__logo img { width: 175px; }
  .page-home .home-about__pane--copy {
    padding: 30px 30px 60px;
    border-radius: 0 0 140px 140px;
    text-align: center;
  }

  .page-home .home-products__inner { --content-width: 300px; }
  .page-home .home-products__media--bonaviox { width: 100%; }
  .page-home .home-products__body--bonaviox {
    width: 100%;
    padding: 30px 0 0;
  }
  .page-home .home-products__name--bonaviox { margin-top: 0; }
  .page-home .home-products__btn--bonaviox { margin-top: 30px; }

  .page-home .home-products__decor-media { width: 100%; }
  .page-home .home-products__decor-media img { width: 100%; }
  .page-home .home-products__body--prolyse {
    width: 90%;
    padding-left: 20px;
  }

  .page-home .home-products__block--thionex,
  .page-home .home-products__block--bonapur,
  .page-home .home-products__block--hilomex {
    margin-top: 50px;
    padding: 0;
  }
  .page-home .home-products__media--28 { width: 100%; }
  .page-home .home-products__body--72 {
    width: 100%;
    padding: 30px 0 0;
  }

  .page-home .home-numbers__inner::before {
    background-image: linear-gradient(90deg, #ffffff00 27%, #ffffff 71%);
  }
  .page-home .home-numbers__item,
  .page-home .home-numbers__item--first { margin-top: 40px; }

  .page-home .home-why { margin: 100px 0; }
  .page-home .home-why__inner { --content-width: 300px; }
  .page-home .home-why__card { padding: 30px; }
}


/* --- 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-home .home-hero { padding-inline: var(--gutter); }
}

/* The numbers band is left-aligned and bleeds to the left screen edge, exactly
   as in the original — the photograph runs off the left of the page and fades
   to white behind the counters. Only its right edge carries a gutter, because
   the counters sit flush against that edge and would otherwise touch the screen
   on viewports narrower than the band's 1614px measure. */
.page-home .home-numbers__inner {
  margin-inline: 0 auto;
  max-width: calc(100% - var(--gutter));
  padding-inline: 0;
}

@media (max-width: 767px) {
  .page-home .home-numbers__inner {
    max-width: calc(100% - var(--gutter-mobile));
  }
}