/* ============================================================
   Media & placeholders
   ============================================================ */
.section :is(img, .ph) { border-radius: var(--r-card); width: 100%; object-fit: cover; }
.ph { aspect-ratio: var(--ar, 4 / 5); background: var(--c-sand); }
.ph--alt { background: var(--c-nude); }

.link-arrow { padding-block: .25rem; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-med); letter-spacing: .04em; color: var(--c-accent-dk); }
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.section-more { display: flex; justify-content: center; margin-top: var(--sp-7); }

/* ============================================================
   Mobile menu
   ============================================================ */
.mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 40; padding: var(--sp-7) var(--sp-gutter); background: var(--c-page); overflow-y: auto; }
.mobile-menu__nav { display: grid; gap: var(--sp-7); justify-items: start; }
.mobile-menu__list { display: grid; gap: var(--sp-2); }
.mobile-menu__link { display: block; padding-block: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-h3); }

/* ============================================================
   .simple-text (WP rich text) + сторінка політики
   ============================================================ */
.simple-text { display: grid; gap: var(--sp-4); line-height: 1.7; }
.simple-text :is(h2, h3, h4) { margin-top: var(--sp-6); }
.simple-text h2 { font-size: var(--fs-h3); }
.simple-text h3 { font-size: var(--fs-lead); }
.simple-text :is(ul, ol) { display: grid; gap: var(--sp-2); padding-left: 1.25rem; }
.simple-text ul { list-style: disc; }
.simple-text ol { list-style: decimal; }
.simple-text a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.simple-text img, .simple-text iframe { width: 100%; border-radius: var(--r-card); }
.simple-text iframe { aspect-ratio: 16 / 9; border: 0; }
.simple-text__table-wrap { overflow-x: auto; }
.legal { padding-top: calc(var(--header-h) + var(--sp-8)); }
.legal__back { margin-bottom: var(--sp-6); }
.legal__back .icon { transform: scaleX(-1); }
.legal__lead { margin: var(--sp-4) 0 var(--sp-7); }
@media (max-width: 768px) { .legal .section-head__title { font-size: var(--fs-h3); } } /* довге слово «конфиденциальности» не влазить у fs-h2 на 360px */

/* ============================================================
   Accordion
   ============================================================ */
.accordion { border-bottom: 1px solid var(--c-line); }
.accordion__summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-5); padding-block: var(--sp-5); cursor: pointer; list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__name { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.3; }
.accordion__icon { transition: transform .3s var(--ease); }
.accordion[open] .accordion__icon { transform: rotate(45deg); }
.accordion__body { display: grid; gap: var(--sp-4); justify-items: start; padding-bottom: var(--sp-6); }
.price-group { margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); }
.price-list { width: 100%; display: grid; gap: var(--sp-3); }
.price-list__row { display: grid; grid-template-columns: 1fr auto 2rem; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); }
.price-list__book { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--c-muted); opacity: .4; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.price-list__book:hover, .price-list__book:focus-visible { opacity: 1; background: var(--c-sand); }
.price-list__book { position: relative; }
@media (hover: hover) {
  .price-list__book::after { content: attr(aria-label); position: absolute; right: 0; bottom: calc(100% + .25rem); padding: .375rem .625rem; border-radius: .375rem; background: var(--c-ink); color: var(--c-page); font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateY(.25rem); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .price-list__book:hover::after, .price-list__book:focus-visible::after { opacity: 1; transform: none; }
}
.price-list__book .icon { width: 1.125rem; height: 1.125rem; transform-origin: 50% 80%; }
@keyframes book-wiggle { 0%, 12%, 100% { transform: rotate(0); } 3% { transform: rotate(-12deg); } 6% { transform: rotate(10deg); } 9% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: no-preference) {
  .price-list__book .icon { animation: book-wiggle 7s var(--ease) infinite; }
  .price-list__row:nth-child(2n) .icon { animation-delay: -2.3s; }
  .price-list__row:nth-child(3n) .icon { animation-delay: -4.6s; }
  .price-list__book:hover .icon, .price-list__book:focus-visible .icon { animation: none; }
}
.price-list__row dd { font-family: var(--font-display); white-space: nowrap; }

/* ============================================================
   Positioning
   ============================================================ */
.positioning { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); margin-top: var(--sp-8); }
.positioning__item { display: grid; gap: var(--sp-3); justify-items: center; align-content: start; text-align: center; }
.positioning__item .icon { color: var(--c-accent); }
.positioning__title { font-size: var(--fs-h3); }
@media (max-width: 768px) { .positioning { grid-template-columns: 1fr; } }

/* ============================================================
   About
   ============================================================ */
.about { display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-8); align-items: center; }
.about__copy { display: grid; gap: var(--sp-5); max-width: 40rem; }
@media (max-width: 1080px) { .about { grid-template-columns: 1fr; } .about__media { max-width: 32rem; } }

/* ============================================================
   Cards & advantages
   ============================================================ */
.card { padding: var(--sp-6); border-radius: var(--r-card); background: var(--c-cream); display: grid; gap: var(--sp-3); align-content: start; }
.card__icon { color: var(--c-accent); margin-bottom: var(--sp-2); }
.card__title { font-size: var(--fs-lead); }
.advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 1080px) { .advantages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .advantages { grid-template-columns: 1fr; } }

/* ============================================================
   Services
   ============================================================ */
.services__banner { margin-bottom: var(--sp-7); }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.service-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); min-height: 9.5rem; height: 100%; padding: var(--sp-6); background: var(--c-page); border: 1px solid transparent; border-radius: var(--r-card); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.service-card:hover { transform: translateY(-3px); border-color: var(--c-accent); }
.service-card__name { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.3; }
.service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.service-card__price { font-family: var(--font-display); }
.service-card__arrow { color: var(--c-accent); transition: transform .3s var(--ease); }
.service-card:hover .service-card__arrow { transform: translateX(3px); }
.services__more { display: flex; justify-content: center; margin-top: var(--sp-7); }
.services__more .icon { transition: transform .3s var(--ease); }
.services__more [aria-expanded="true"] .icon { transform: rotate(45deg); }
.js .pricelist { display: none; }
.js .pricelist.is-open { display: block; }
.pricelist { max-width: 56rem; margin: var(--sp-8) auto 0; }
.pricelist__title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.accordion:first-of-type { border-top: 1px solid var(--c-line); }
@media (max-width: 1080px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } .accordion__from { display: none; } .accordion__summary { grid-template-columns: 1fr auto; } }

/* ============================================================
   Technology
   ============================================================ */
.tech { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.tech__item { display: grid; gap: var(--sp-2); align-content: start; }
.tech__img { margin-bottom: var(--sp-3); }
.tech__name { font-size: var(--fs-h3); }
@media (max-width: 768px) { .tech { grid-template-columns: 1fr; } .tech__item { max-width: 26rem; } }

/* ============================================================
   Results / Before-After
   ============================================================ */
.results__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.results__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.slider-controls { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.slider-controls__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-accent-dk); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.slider-controls__btn:hover { border-color: var(--c-accent); background: var(--c-sand); }
.slider-controls__btn--prev .icon { transform: scaleX(-1); }
.slider-controls__count { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.chip { padding: .625rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-med); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.chip:hover { border-color: var(--c-accent); }
.chip[aria-selected="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.case { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
/* Перехід між кейсами — той самий blur-fade, що й у splash. filter на великому блоці коротко, лише під час переходу. */
.case { transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); }
.case.is-fading { opacity: 0; filter: blur(12px); transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .case { transition: none; } }
.case__copy { display: grid; gap: var(--sp-5); justify-items: start; max-width: 38rem; }
.case__title { font-size: var(--fs-h2); }
.ba { --pos: 50%; position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--r-card); background: var(--c-sand); user-select: none; }
.ba .ba__img, .ba .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ba__img--after { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position: absolute; bottom: var(--sp-3); padding: .25rem .75rem; border-radius: var(--r-pill); background: rgba(250, 248, 245, .92); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.ba__tag--before { left: var(--sp-3); }
.ba__tag--after { right: var(--sp-3); }
.ba__handle { position: absolute; top: 50%; left: var(--pos); width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-page); color: var(--c-accent-dk); pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; left: calc(50% - 1px); top: -100vh; bottom: -100vh; width: 2px; background: var(--c-page); z-index: -1; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:focus-within .ba__handle { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (max-width: 768px) { .chip { padding: .4375rem .875rem; font-size: var(--fs-xs); } .slider-controls__btn { width: 2.25rem; height: 2.25rem; } .slider-controls__btn .icon { width: 1rem; height: 1rem; } .case { grid-template-columns: 1fr; gap: var(--sp-6); } .results__bar { flex-direction: column; align-items: stretch; gap: var(--sp-4); margin-bottom: var(--sp-6); } .slider-controls { justify-content: flex-end; } .results__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sp-gutter) * -1); padding-inline: var(--sp-gutter); scrollbar-width: none; } .chip { flex: none; } }

/* ============================================================
   Team
   ============================================================ */
.team__photo { max-width: 90rem; }

/* ============================================================
   Philosophy
   ============================================================ */
.philosophy { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.philosophy__media { max-width: 30rem; }
.philosophy__quote { font-family: var(--font-accent); font-style: italic; font-size: var(--fs-quote); line-height: 1.2; }
@media (max-width: 768px) { .philosophy { grid-template-columns: 1fr; } }

/* ============================================================
   Reviews
   ============================================================ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.review { gap: var(--sp-4); }
@media (min-width: 769px) { .reviews .review:nth-child(n+4) { display: none; } }
.review__stars { display: flex; gap: 2px; color: var(--c-accent); }
.review__author { display: grid; gap: 2px; margin-top: var(--sp-2); }
@media (max-width: 768px) {
  .reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-gutter); margin-inline: calc(var(--sp-gutter) * -1); padding-inline: var(--sp-gutter); scrollbar-width: none; }
  .review { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ============================================================
   News
   ============================================================ */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.news-card { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; }
.news-card__img { margin-bottom: var(--sp-2); }
.news-card__title { font-size: var(--fs-lead); line-height: 1.3; }
@media (max-width: 768px) { .news { grid-template-columns: 1fr; } }

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; overflow: hidden; background: var(--c-sand); }
.cta .cta__mark { position: absolute; right: -6%; top: 50%; width: min(42rem, 70vw); height: auto; transform: translateY(-50%); opacity: .07; border-radius: 0; pointer-events: none; }
.cta__inner { position: relative; display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }

/* ============================================================
   Contact & form
   ============================================================ */
.contact { display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-8); align-items: start; }
.contact__info { display: grid; gap: var(--sp-5); justify-items: start; }
.contact__name { font-family: var(--font-display); font-size: var(--fs-h3); }
.contact__list { display: grid; gap: var(--sp-5); }
.contact__list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact__list .icon { margin-top: .2rem; color: var(--c-accent); }
.contact__list a { display: inline-flex; align-items: center; min-height: 1.5rem; border-bottom: 1px solid var(--c-line); transition: border-color .3s; }
.contact__list a:hover { border-color: var(--c-accent); }
.form { display: grid; gap: var(--sp-4); padding: var(--sp-7); border-radius: var(--r-card); background: var(--c-cream); }
.form__title { font-size: var(--fs-h3); }
.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.field__input { width: 100%; padding: .875rem 1rem; border: 1px solid var(--c-line); border-radius: .75rem; background: var(--c-page); transition: border-color .3s var(--ease); }
.field__input:focus { outline: none; border-color: var(--c-accent); }
.field__input.is-invalid { border-color: #A8483A; }
textarea.field__input { resize: vertical; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.check a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 3px; } /* посилання в тексті має відрізнятись не лише кольором */
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--c-accent); }
.check.is-invalid span { color: #A8483A; }
.form__submit:disabled { opacity: .6; cursor: progress; }
.form__status:empty { display: none; }
.form__status.is-error { color: #A8483A; }
@media (max-width: 1080px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { padding: var(--sp-6); } }

/* ============================================================
   Footer
   ============================================================ */
.footer { padding-block: var(--sp-8) var(--sp-6); background: var(--c-sand); }
.footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-8); align-items: center; }
.footer__logo img { height: 3.5rem; width: auto; }
.footer__list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: center; font-size: var(--fs-sm); }
.footer__list a, .footer__links a, .footer__social { display: inline-flex; align-items: center; min-height: 1.5rem; }
.footer__list a:hover, .footer__links a:hover { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 4px; }
.footer__side { display: grid; gap: var(--sp-4); justify-items: end; }
.footer__social { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.footer__links { display: flex; gap: var(--sp-5); }
@media (max-width: 1080px) { .footer__inner { grid-template-columns: 1fr; justify-items: start; gap: var(--sp-6); } .footer__list { justify-content: flex-start; } .footer__side { justify-items: start; } }

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 60; width: min(26rem, calc(100% - 2 * var(--sp-4))); display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--c-page); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.cookie__prefs { display: grid; gap: var(--sp-2); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ============================================================
   Team members (опційні картки; без блоків — лише групове фото)
   ============================================================ */
.team__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-7); }
.team__member { display: grid; gap: var(--sp-2); align-content: start; }
.team__name { font-size: var(--fs-lead); margin-top: var(--sp-2); }
@media (max-width: 1080px) { .team__list { grid-template-columns: repeat(2, 1fr); } }

/* === Brands (бігуча стрічка; виняток із «без автокарусельки» — за рішенням клієнта) === */
.brands__title { text-align: center; margin-bottom: var(--sp-6); font-family: var(--font-body); font-weight: var(--fw-reg); }
.brands__marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands__track { display: flex; width: max-content; }
.brands__list { display: flex; flex: none; align-items: center; }
.brands__item { flex: none; padding-inline: var(--sp-6); font-family: var(--font-display); font-size: var(--fs-lead); color: var(--c-muted); white-space: nowrap; }
@keyframes brands-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) { .brands__track { animation: brands-marquee 50s linear infinite; will-change: transform; } }
@media (prefers-reduced-motion: reduce) { .brands__marquee { mask-image: none; } .brands__track { width: auto; justify-content: center; } .brands__list[aria-hidden] { display: none; } .brands__list { flex-wrap: wrap; justify-content: center; } }