/* VERSION E10 — FINAL MOBILE POLISH
   Deliberately mobile-only: desktop remains the E9 baseline. */

@media (max-width: 767px) {
  /* Reviews: 44px hit areas containing restrained 36 × 64px visual pills. */
  .concept-e10 .review-carousel-controls button {
    position: relative;
    width: 44px;
    height: 68px;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    box-shadow: none;
  }

  .concept-e10 .review-carousel-controls button::before {
    content: "";
    position: absolute;
    inset: 2px 4px;
    border: 1px solid rgba(183, 146, 79, .38);
    border-radius: 999px;
    background: rgba(250, 248, 242, .82);
    box-shadow: 0 2px 9px rgba(29, 51, 42, .055);
    transition: border-color .18s ease, background-color .18s ease;
  }

  .concept-e10 .review-carousel-controls button::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #1d332a;
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1;
  }

  .concept-e10 .review-carousel-controls [data-review-prev]::after {
    content: "‹";
  }

  .concept-e10 .review-carousel-controls [data-review-next]::after {
    content: "›";
  }

  .concept-e10 .review-carousel-controls button:hover,
  .concept-e10 .review-carousel-controls button:focus-visible {
    border: 0;
    background: transparent;
    color: transparent;
    box-shadow: none;
  }

  .concept-e10 .review-carousel-controls button:hover::before,
  .concept-e10 .review-carousel-controls button:focus-visible::before {
    border-color: rgba(183, 146, 79, .68);
    background: rgba(248, 243, 232, .96);
  }

  .concept-e10 .review-carousel-controls button:focus-visible {
    outline: 2px solid #b7924f;
    outline-offset: 2px;
  }

  /* About: visually bare chevrons over the approved E9 image frame. */
  .concept-e10 .about-mobile-carousel-controls button {
    width: 44px;
    height: 60px;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff9ea;
    font-size: 2.55rem;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(8, 24, 17, .9), 0 0 10px rgba(8, 24, 17, .64);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .concept-e10 .about-mobile-carousel-controls button:hover,
  .concept-e10 .about-mobile-carousel-controls button:focus-visible {
    border: 0;
    background: transparent;
    color: #fffdf5;
    box-shadow: none;
  }

  .concept-e10 .about-mobile-carousel-controls button:focus-visible {
    outline: 2px solid rgba(226, 196, 130, .9);
    outline-offset: 2px;
  }

  .concept-e10 .about-mobile-slide:nth-child(1) img {
    object-position: 50% 35%;
  }

  .concept-e10 .about-mobile-slide:nth-child(2) img {
    object-position: 55% 46%;
  }

  .concept-e10 .about-mobile-slide:nth-child(3) img {
    object-position: 50% 32%;
  }

  .concept-e10 .about-mobile-slide:nth-child(4) img {
    object-position: 50% 32%;
  }

  /* Mobile displays 1 / 2 / 3 while the unchanged desktop DOM text stays 01 / 02 / 03. */
  .concept-e10 .process-flow article > span {
    top: .18rem;
    right: .76rem;
    color: transparent;
    font-size: 0;
  }

  .concept-e10 .process-flow article > span::after {
    content: attr(data-mobile-number);
    display: block;
    color: rgba(183, 146, 79, .12);
    font-size: clamp(3.45rem, 16.5vw, 4.35rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
  }

  /* Keep the complete copyright wording readable on one line. */
  .concept-e10 .footer-brand {
    max-width: 100%;
    flex-wrap: nowrap;
    gap: .45rem;
  }

  .concept-e10 .footer-brand p {
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(.72rem, 3.05vw, .76rem);
    letter-spacing: -.02em;
  }
}