/***************************/
/* BELOW 1632px */
/***************************/
/* 1em = 16px */
@media (max-width: 102em) {
  .container-testimonials {
    padding: 6.4rem 4.8rem;
  }
}

/***************************/
/* BELOW 1408px */
/***************************/
@media (max-width: 88em) {
  .step-img-taavi {
    width: 50%;
  }

  .step-img-katre {
    width: 80%;
  }

  .step-img-riia {
    width: 50%;
  }
}

/***************************/
/* BELOW 1312px (Smaller desktops) */
/***************************/
/* Second breaking point is 1290 px. We need some buffer, so: 82em = 1312px / 16 */
@media (max-width: 82em) {
  .hero {
    gap: 3.2rem;
  }

  .hero-img {
    width: 105%;
  }

  .hero .heading-tertiary {
    font-size: 2.4rem;
  }

  .container-executive-review,
  .container-cta {
    padding: 6.4rem 3.2rem;
  }
}

/***************************/
/* BELOW 1040px */
/***************************/
@media (max-width: 65em) {
  .execution-drift h2.heading-secondary {
    text-align: left;
    font-size: 3.6rem;
  }

  .container-testimonials h2 {
    font-size: 3.6rem;
    margin-bottom: 3.2rem;
  }

  .calculator-expl p,
  .calculator-expl ul {
    font-size: 1.6rem;
  }

  .calculator-expl h2 {
    font-size: 2.4rem;
  }

  .step-img-taavi {
    width: 72%;
  }

  .step-img-katre {
    width: 111%;
  }

  .step-img-riia {
    width: 65%;
  }

  .testimonial-card {
    padding: 3.2rem;
  }

  .testimonial-card p {
    font-size: 1.6rem;
  }

  .testimonial-text::before {
    font-size: 5.2rem;
  }
}

/***************************/
/* BELOW 912px */
/***************************/
/* Switch testimonial cards from 3 columns to 2 columns on smaller screens */
@media (max-width: 57em) {
  .testimonial-cards > .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-img-taavi {
    width: 50%;
  }

  .step-img-katre {
    width: 81%;
  }

  .step-img-riia {
    width: 47%;
  }

  .grid {
    row-gap: 3.6rem;
    column-gap: 3.6rem;
  }

  .container-executive-review.grid {
    row-gap: 0;
  }

  .justify-text {
    text-align: left;
  }
}

/***************************/
/* BELOW 864px */
/***************************/
@media (max-width: 54em) {
  .section-hero {
    margin-bottom: 6.4rem;
    padding: 4.8rem 0 6.4rem 0;
  }

  .calc {
    margin-bottom: 6.4rem;
  }

  .section-sample-report {
    margin-bottom: 3.2rem;
  }

  .container-executive-review {
    padding: 6.4rem 3.2rem 4.8rem;
  }

  .clarity-compass-container {
    padding: 4.8rem 3.2rem;
  }
}

/***************************/
/* BELOW 640px */
/***************************/
@media (max-width: 40em) {
  .calculator-expl {
    display: none;
  }

  .testimonial-cards > .grid {
    grid-template-columns: 1fr;
  }

  .grid-calc {
    grid-template-columns: 1fr;
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.6rem;
    padding: 1.6rem 2.4rem;
  }

  .execution-drift {
    padding: 4.8rem 3.2rem 9.6rem;
  }

  p,
  ul,
  .hero-description {
    font-size: 1.6rem;
  }

  .hero .heading-tertiary {
    font-size: 2rem;
  }

  .heading-primary {
    margin-bottom: 2.4rem;
  }

  .heading-secondary {
    font-size: 3.6rem;
  }

  .section-hero {
    padding-bottom: 4.8rem;
    margin-bottom: 4.8rem;
  }

  .sample-report-copy {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .sample-report-container {
    /* align-items: start; */
    grid-template-columns: 1fr;
  }

  .hero-img-box {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .execution-drift .grid {
    grid-template-columns: 1fr;
  }

  .step-2-text {
    /* Mobile layout adjustments:
   - Hide the hero report mockup because it becomes too small to add useful information.
   - Change the Execution Drift section from a 2-column Z-pattern to a single-column layout.
   - Keep all three Execution Drift diagrams visible and place them below their corresponding text.
   - STEP 2 originally has the image before the text in the HTML because of the desktop Z-pattern.
   - To control the mobile order cleanly, two new helper classes were added in the HTML:
     .step-2-img was added to the STEP 2 image box,
     .step-2-text was added to the STEP 2 text box.
   - In the 40em media query, .step-2-text is moved to grid row 3.
     This makes the mobile reading order:
     Clarity breaks → image → Execution slows → image → Business impact → image.
*/
    grid-row: 3;
  }

  .sample-report-visual {
    width: 80%;
    margin: 0 auto;
  }

  .container-executive-review {
    grid-template-columns: 1fr;
    padding: 4.8rem 3.2rem 3.2rem;
  }

  .container-executive-review.grid {
    row-gap: 1.6rem;
  }

  .executive-risk-review-cta .heading-secondary {
    margin-bottom: 0.8rem;
  }

  .executive-risk-review-details .heading-tertiary {
    margin-bottom: 1.6rem;
  }

  .executive-review-item {
    margin-bottom: 1.6rem;
  }

  .executive-risk-review-details {
    grid-column: auto;
    grid-row: auto;
  }

  .footer {
    grid-template-columns: 1fr;
  }

  .links-contact {
    justify-content: flex-start;
  }

  .step-img-taavi {
    width: 40%;
  }

  .step-img-katre {
    width: 67%;
  }

  .step-img-riia {
    width: 37%;
  }

  .testimonial-text {
    padding-right: 3.6rem;
  }

  .container-cta {
    flex-direction: column;
  }
}