/* VERSION E9 — MOBILE PRECISION + COMPACT LAYOUT
   Every visual refinement is deliberately scoped to the mobile breakpoint. */

@media (max-width: 767px) {
  /* Teaching photograph → list transition: keep the E8 photograph intact. */
  .concept-e9 .mirror {
    padding-top: 10px;
  }

  /* Two-column list rows keep every marker and text start on one axis. */
  .concept-e9 .mirror-list p {
    display: grid;
    grid-template-columns: .42rem minmax(0, 1fr);
    align-items: center;
    column-gap: .72rem;
    padding: .74rem 0;
    text-align: left;
  }

  .concept-e9 .mirror-list p::before {
    position: static;
    grid-column: 1;
    align-self: center;
    justify-self: center;
  }

  .concept-e9 .mirror-list p > span {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }

  /* Process: no timeline rail or circular badges on mobile. */
  .concept-e9 .process-flow {
    padding-left: 0;
  }

  .concept-e9 .process-flow::before {
    content: none;
  }

  .concept-e9 .process-flow article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: .82rem .95rem .86rem;
  }

  .concept-e9 .process-flow article > span {
    position: absolute;
    z-index: -1;
    top: .3rem;
    right: .65rem;
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(183, 146, 79, .15);
    font-size: clamp(3rem, 14vw, 3.7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    pointer-events: none;
  }

  .concept-e9 .process-flow article h3,
  .concept-e9 .process-flow article p {
    position: relative;
    z-index: 1;
  }

  .concept-e9 .process-flow article h3 {
    padding-right: 3.25rem;
    margin-bottom: .34rem;
  }

  /* Reviews: natural-height active card with integrated controls. */
  .concept-e9 .reviews {
    padding-bottom: 38px;
  }

  .concept-e9 .review-grid {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  .concept-e9 .review-grid blockquote,
  .concept-e9 .review-grid blockquote.is-active {
    min-height: 0;
    padding: 1.08rem 3.18rem 1.12rem;
  }

  .concept-e9 .review-grid blockquote {
    display: none;
  }

  .concept-e9 .review-grid blockquote.is-active {
    display: block;
  }

  .concept-e9 .review-carousel-controls {
    position: absolute;
    z-index: 3;
    inset: 0 .3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    pointer-events: none;
  }

  .concept-e9 .review-carousel-controls button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-color: rgba(29, 51, 42, .25);
    background: rgba(250, 248, 242, .86);
    color: #1d332a;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(29, 51, 42, .06);
    pointer-events: auto;
  }

  .concept-e9 .review-carousel-controls button:hover,
  .concept-e9 .review-carousel-controls button:focus-visible {
    border-color: #b7924f;
    background: #f8f3e8;
  }

  .concept-e9 .reviews-link {
    margin-top: 1rem;
  }

  /* A single deliberate Reviews → About transition. */
  .concept-e9 .about {
    padding-top: 46px;
  }

  /* About carousel controls live inside the image; no counter row remains. */
  .concept-e9 .about-mobile-carousel {
    margin: 28px auto 24px;
  }

  .concept-e9 .about-mobile-stage {
    position: relative;
  }

  .concept-e9 .about-mobile-carousel-controls {
    position: absolute;
    z-index: 4;
    inset: 0 .62rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    pointer-events: none;
  }

  .concept-e9 .about-mobile-carousel-controls button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(214, 181, 111, .46);
    background: rgba(17, 40, 30, .74);
    color: #f3e7c9;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(9, 22, 17, .12);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: auto;
  }

  .concept-e9 .about-mobile-carousel-controls button:hover,
  .concept-e9 .about-mobile-carousel-controls button:focus-visible {
    border-color: rgba(226, 196, 130, .78);
    background: rgba(17, 40, 30, .9);
    color: #fff8e8;
  }

  /* Final conversion hierarchy and tonal separation, mobile only. */
  .concept-e9 .final-cta {
    background: linear-gradient(155deg, #203a2f 0%, #1d352b 52%, #172f26 100%);
  }

  .concept-e9 .final-cta .eyebrow-light {
    color: #d0ad68;
  }

  .concept-e9 .final-cta .contact-row .booking-mobile-calendly-button {
    order: -1;
    border-color: #c5a263;
    background: #c5a263;
    color: #173027;
    box-shadow: 0 8px 20px rgba(9, 22, 17, .14);
  }

  .concept-e9 .final-cta .contact-row .booking-mobile-calendly-button:hover,
  .concept-e9 .final-cta .contact-row .booking-mobile-calendly-button:focus-visible {
    border-color: #d0b175;
    background: #d0b175;
    color: #13271f;
  }

  .concept-e9 .final-cta .contact-row .button-light,
  .concept-e9 .final-cta .contact-row .button-outline {
    border-color: rgba(226, 205, 164, .52);
    background: transparent;
    color: #f6f0e0;
    box-shadow: none;
  }

  .concept-e9 .final-cta .contact-row .button-light:hover,
  .concept-e9 .final-cta .contact-row .button-light:focus-visible,
  .concept-e9 .final-cta .contact-row .button-outline:hover,
  .concept-e9 .final-cta .contact-row .button-outline:focus-visible {
    border-color: #c5a263;
    background: rgba(246, 240, 224, .08);
    color: #fffaf0;
  }

  .concept-e9 .site-footer {
    border-top: 1px solid rgba(198, 165, 99, .24);
    background: #12271f;
  }

  .concept-e9 .site-footer a {
    text-decoration-color: rgba(198, 165, 99, .42);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .concept-e9 .review-grid blockquote,
  .concept-e9 .about-mobile-slide {
    transition: none;
  }
}