/* =====================================================================
 * Доводка контраста — отдельным файлом поверх style.css.
 *
 * Фон страницы #FBF8F3 и фон чередующихся секций #F4EFE6 отличались на три
 * процента яркости — на телефоне при дневном свете эта граница не видна, и
 * страница читалась как бесконечная лента без структуры.
 * ================================================================== */

:root{
  --bg-2:#EFE6D5;
  --seam-line:rgba(31,27,22,.09);
  --seam-glow:rgba(255,255,255,.65);
}

/* Швы между секциями */
.svc-sec,
.area-sec{
  border-top:1px solid var(--seam-line);
  border-bottom:1px solid var(--seam-line);
  box-shadow:inset 0 1px 0 var(--seam-glow), inset 0 -1px 0 var(--seam-glow);
}
.quote-sec{ border-top:1px solid var(--seam-line) }
.final{ border-top:1px solid var(--seam-line) }

/* Отзывы: белая карточка на почти белом фоне тонула */
.review{
  border-color:rgba(31,27,22,.14);
  box-shadow:0 14px 34px -26px rgba(62,42,20,.45);
}
.review .st{ font-size:16px; letter-spacing:3px }
.review .who{
  border-top:1px solid rgba(31,27,22,.10);
  padding-top:13px;
  margin-top:2px;
}

/* Работы «до и после» */
.work .ba{
  border-radius:16px;
  border:1px solid rgba(31,27,22,.12);
  box-shadow:0 16px 38px -28px rgba(62,42,20,.5);
  background:var(--surface);
}
.work figcaption{ margin-top:12px; color:var(--text-muted) }

/* Карточки услуг */
.card{ box-shadow:0 12px 30px -26px rgba(62,42,20,.4) }
.card:hover{ box-shadow:0 18px 40px -26px rgba(62,42,20,.55) }

.trust{
  border-top-color:var(--seam-line);
  border-bottom-color:var(--seam-line);
}

/* ---------------------------------------------------------------------
 * Цены на первом экране
 * ------------------------------------------------------------------- */

.ask-lead{
  margin:0 0 14px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--text-muted);
}
.ask .chip{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.ask .chip.on{
  border-color:var(--hairline-strong);
  background:var(--copper-wash);
  color:var(--copper-bright);
  font-weight:600;
}
.ask .chip:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------
 * Выбор фотографии в форме заявки.
 *
 * Разметка — дословная копия переписки (template-parts/photo-pick.php),
 * и правило скрытия здесь такое же общее: input[type=file]. Именно эта
 * связка работает на айфоне; всё, что от неё отличалось, кончалось
 * зависшей камерой.
 *
 * Тут только внешний вид: в переписке кнопки квадратные с одной иконкой,
 * в форме — широкие с подписью, потому что это первый контакт и человек
 * не должен угадывать значок.
 * ------------------------------------------------------------------- */

input[type=file]{ display:none }

.pickrow{
  display:flex;
  gap:10px;
  margin:0 0 12px;
}

.pick{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:62px;
  padding:0 14px;
  border-radius:14px;
  border:1px dashed var(--hairline-strong);
  background:transparent;
  color:var(--copper-bright);
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  line-height:1.2;
  text-align:center;
}
.pick span{
  font-size:14.5px;
  font-family:var(--sans);
}

/* Съёмка — основное действие: у человека проблема обычно перед глазами. */
.pick[for="cam"]{
  border-style:solid;
  background:var(--copper-wash);
}

#tf-photoname{
  font-family:var(--mono);
  font-size:12px;
  color:var(--copper);
  margin:0 0 16px;
}
#tf-photoname:empty{ display:none; margin:0 }

/* ---------------------------------------------------------------------
 * Планшет
 * ------------------------------------------------------------------- */

@media(min-width:769px) and (max-width:1199px){
  .review .q{ font-size:18px }
}

/* ---------------------------------------------------------------------
 * Телефон
 * ------------------------------------------------------------------- */

@media(max-width:768px){
  .review{ box-shadow:0 10px 24px -22px rgba(62,42,20,.4) }
  .work .ba{ box-shadow:0 12px 26px -24px rgba(62,42,20,.42) }
  .card{ box-shadow:none }
  .svc-sec,.area-sec{ box-shadow:inset 0 1px 0 var(--seam-glow) }

  .pick{ min-height:66px; font-size:19px }
  .pick span{ font-size:13.5px }
}

@media(prefers-reduced-motion:reduce){
  .card{ transition:none }
}