:root {
  --pw-ink: #1b1712;
  --pw-ink-soft: #2e2820;
  --pw-cream: #f7f1e7;
  --pw-paper: #ffffff;
  --pw-sand: #ece2d2;
  --pw-wood: #6b4526;
  --pw-brass: #b4813a;
  --pw-brass-deep: #8c5f22;
  --pw-clay: #a24e33;
  --pw-text: #2b2620;
  --pw-text-dim: #6a6058;
  --pw-line: rgba(27, 23, 18, 0.12);
  --pw-shadow-s: 0 2px 10px rgba(27, 23, 18, 0.06);
  --pw-shadow-m: 0 14px 40px rgba(27, 23, 18, 0.1);
  --pw-shadow-l: 0 30px 80px rgba(27, 23, 18, 0.16);
  --pw-radius-s: 10px;
  --pw-radius-m: 18px;
  --pw-radius-l: 28px;
  --pw-radius-pill: 999px;
  --pw-shell: min(1240px, calc(100% - 3rem));
  --pw-gutter: clamp(1.5rem, 5vw, 4.5rem);
  --pw-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --pw-font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pw-nav-h: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--pw-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pw-text);
  background-color: var(--pw-cream);
  overflow-x: hidden;
}

body.pw-nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pw-font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--pw-ink);
  letter-spacing: -0.012em;
  margin-top: 0;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }

p { margin-top: 0; }

.pw-shell {
  width: var(--pw-shell);
  margin-inline: auto;
}

.pw-eyebrow {
  font-family: var(--pw-font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pw-brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pw-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--pw-brass);
  display: inline-block;
}

.pw-eyebrow--on-dark {
  color: #e9c893;
}

.pw-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--pw-text-dim);
  max-width: 62ch;
}

.pw-section {
  padding-block: clamp(3.6rem, 8vw, 7rem);
  position: relative;
}

.pw-section--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }

.pw-section--dark {
  background: var(--pw-ink);
  color: #efe6d8;
}

.pw-section--dark h1,
.pw-section--dark h2,
.pw-section--dark h3 {
  color: #fbf5ea;
}

.pw-section--dark .pw-lede,
.pw-section--dark p {
  color: #d5c9b7;
}

.pw-section--sand { background: var(--pw-sand); }

.pw-band {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fdf8ef;
}

.pw-band > .pw-shell { position: relative; z-index: 2; }

.pw-grid {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.2rem);
}

.pw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pw-grid--split {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}

.pw-card {
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m);
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
  box-shadow: var(--pw-shadow-s);
  height: 100%;
  transition: transform 0.35s var(--pw-ease), box-shadow 0.35s var(--pw-ease);
}

.pw-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pw-shadow-m);
}

.pw-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--pw-ink);
  color: #e9c893;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}

.pw-card h3 { margin-bottom: 0.55rem; }

.pw-card p { color: var(--pw-text-dim); margin-bottom: 0; }

.pw-stat {
  border-top: 2px solid var(--pw-brass);
  padding-top: 1.1rem;
}

.pw-stat__num {
  font-family: var(--pw-font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--pw-ink);
  display: block;
}

.pw-stat__label {
  font-size: 0.9rem;
  color: var(--pw-text-dim);
  margin-top: 0.5rem;
  display: block;
}

.pw-section--dark .pw-stat__num { color: #f2d9ab; }
.pw-section--dark .pw-stat__label { color: #cbbda8; }

/* Акордеон FAQ побудований на голому Bootstrap, тому лише підправляємо вигляд. */
.pw-faq .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pw-line);
}

.pw-faq .accordion-button {
  background: transparent;
  color: var(--pw-ink);
  font-family: var(--pw-font-display);
  font-size: 1.12rem;
  font-weight: 600;
  padding: 1.25rem 0.25rem;
  box-shadow: none;
}

.pw-faq .accordion-button:not(.collapsed) {
  color: var(--pw-brass-deep);
  background: transparent;
}

.pw-faq .accordion-button:focus { box-shadow: none; }

.pw-faq .accordion-body {
  padding: 0 0.25rem 1.4rem;
  color: var(--pw-text-dim);
}

.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--pw-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border-radius: var(--pw-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--pw-ease), background-color 0.25s var(--pw-ease), color 0.25s var(--pw-ease), border-color 0.25s var(--pw-ease);
}

.pw-btn:hover { transform: translateY(-2px); }

.pw-btn--solid {
  background: var(--pw-ink);
  color: #fdf6ea;
  border-color: var(--pw-ink);
}

.pw-btn--solid:hover { background: var(--pw-brass-deep); border-color: var(--pw-brass-deep); }

.pw-btn--brass {
  background: var(--pw-brass);
  color: #241a09;
  border-color: var(--pw-brass);
}

.pw-btn--brass:hover { background: #e3b76d; border-color: #e3b76d; }

.pw-btn--ghost {
  background: transparent;
  color: var(--pw-ink);
  border-color: rgba(27, 23, 18, 0.35);
}

.pw-btn--ghost:hover { background: var(--pw-ink); color: #fdf6ea; border-color: var(--pw-ink); }

.pw-btn--on-dark {
  background: transparent;
  color: #fbf3e6;
  border-color: rgba(251, 243, 230, 0.5);
}

.pw-btn--on-dark:hover { background: #fbf3e6; color: var(--pw-ink); }

/* ---------- Шапка ---------- */
.pw-topbar {
  background: var(--pw-ink);
  color: #d8cbb8;
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.pw-topbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
  align-items: center;
}

.pw-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pw-topbar__item i { color: var(--pw-brass); }

.pw-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(247, 241, 231, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pw-line);
  transition: box-shadow 0.3s var(--pw-ease), background-color 0.3s var(--pw-ease);
}

.pw-header.pw-header--scrolled {
  box-shadow: var(--pw-shadow-s);
  background: rgba(247, 241, 231, 0.98);
}

.pw-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--pw-nav-h);
}

.pw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--pw-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pw-ink);
  letter-spacing: -0.015em;
}

.pw-nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.pw-nav__link {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--pw-ink-soft);
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.25s var(--pw-ease);
}

.pw-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--pw-brass);
  transition: width 0.3s var(--pw-ease);
}

.pw-nav__link:hover { color: var(--pw-brass-deep); }
.pw-nav__link:hover::after { width: 100%; }

.pw-nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--pw-line);
  background: var(--pw-paper);
  color: var(--pw-ink);
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pw-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 86vw);
  background: var(--pw-cream);
  transform: translateX(102%);
  transition: transform 0.42s var(--pw-ease);
  z-index: 1045;
  padding: 5.5rem 2rem 2.5rem;
  overflow-y: auto;
  box-shadow: var(--pw-shadow-l);
}

.pw-drawer.pw-drawer--open { transform: translateX(0); }

.pw-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.pw-drawer__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--pw-font-display);
  font-size: 1.25rem;
  color: var(--pw-ink);
  border-bottom: 1px solid var(--pw-line);
}

.pw-drawer__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--pw-line);
  background: var(--pw-paper);
  cursor: pointer;
  color: var(--pw-ink);
}

.pw-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--pw-ease), visibility 0.4s var(--pw-ease);
  z-index: 1040;
}

.pw-scrim.pw-scrim--visible { opacity: 1; visibility: visible; }

/* ---------- Hero та банери ---------- */
.pw-hero {
  position: relative;
  min-height: clamp(560px, 88vh, 820px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fbf3e6;
  overflow: hidden;
}

.pw-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 720px;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.pw-hero__title { color: #fff8ec; margin-bottom: 1.2rem; }

.pw-hero__text {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #e8dcca;
  max-width: 56ch;
  margin-bottom: 2rem;
}

.pw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.pw-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(251, 243, 230, 0.25);
  padding-top: 1.5rem;
}

.pw-hero__badge span {
  display: block;
  font-family: var(--pw-font-display);
  font-size: 1.6rem;
  color: #f0d49f;
  line-height: 1;
}

.pw-hero__badge small {
  font-size: 0.82rem;
  color: #cfc2ad;
  letter-spacing: 0.04em;
}

/* Слайдер збирається на Bootstrap carousel, кастом лише косметичний. */
.pw-slide {
  min-height: clamp(520px, 82vh, 760px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fbf3e6;
}

.pw-slide__inner { max-width: 680px; padding-block: clamp(3.5rem, 8vw, 6rem); }
.pw-slide h1, .pw-slide h2 { color: #fff8ec; }

.pw-slider__nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(251, 243, 230, 0.16);
  border: 1px solid rgba(251, 243, 230, 0.4);
  color: #fbf3e6;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: background-color 0.3s var(--pw-ease);
}

.pw-slider__nav:hover { background: rgba(251, 243, 230, 0.3); }

.pw-slider .carousel-indicators {
  bottom: 2.2rem;
}

.pw-slider .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(251, 243, 230, 0.5);
  border: 0;
}

.pw-slider .carousel-indicators .active { background: var(--pw-brass); }

/* ---------- Робочий процес ---------- */
.pw-steps {
  counter-reset: pw-step;
  display: grid;
  gap: 1.4rem;
}

.pw-step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.4rem 1.6rem;
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m);
}

.pw-step__index {
  counter-increment: pw-step;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--pw-sand);
  color: var(--pw-brass-deep);
  font-family: var(--pw-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.pw-step__index::before { content: counter(pw-step, decimal-leading-zero); }

.pw-step h3 { margin-bottom: 0.4rem; font-size: 1.18rem; }
.pw-step p { margin-bottom: 0; color: var(--pw-text-dim); }

/* ---------- Галерея ---------- */
.pw-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pw-gallery__item {
  position: relative;
  border-radius: var(--pw-radius-m);
  overflow: hidden;
  background: var(--pw-sand);
}

.pw-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--pw-ease);
}

.pw-gallery__item:hover img { transform: scale(1.05); }

.pw-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(20, 16, 11, 0.88), rgba(20, 16, 11, 0));
  color: #fbf3e6;
  font-size: 0.92rem;
}

.pw-gallery__item--wide { grid-column: span 2; }

/* ---------- Картки послуг / статей ---------- */
.pw-tile {
  display: flex;
  flex-direction: column;
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m);
  overflow: hidden;
  height: 100%;
  transition: transform 0.35s var(--pw-ease), box-shadow 0.35s var(--pw-ease);
}

.pw-tile:hover { transform: translateY(-5px); box-shadow: var(--pw-shadow-m); }

.pw-tile__media { overflow: hidden; background: var(--pw-sand); }

.pw-tile__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.7s var(--pw-ease);
}

.pw-tile:hover .pw-tile__media img { transform: scale(1.06); }

.pw-tile__body {
  padding: 1.6rem 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pw-tile__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pw-brass-deep);
  margin-bottom: 0.6rem;
}

.pw-tile h3 { font-size: 1.24rem; margin-bottom: 0.6rem; }

.pw-tile p { color: var(--pw-text-dim); margin-bottom: 1.4rem; }

.pw-tile__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pw-brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pw-tile__link i { transition: transform 0.3s var(--pw-ease); }
.pw-tile:hover .pw-tile__link i { transform: translateX(5px); }

/* ---------- Ціни ---------- */
.pw-plan {
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-l);
  padding: clamp(1.7rem, 3vw, 2.5rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pw-plan--featured {
  background: var(--pw-ink);
  color: #efe6d8;
  border-color: var(--pw-ink);
  box-shadow: var(--pw-shadow-l);
}

.pw-plan--featured h3 { color: #fff8ec; }

.pw-plan__price {
  font-family: var(--pw-font-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  color: var(--pw-ink);
  line-height: 1;
  margin: 0.9rem 0 0.3rem;
}

.pw-plan--featured .pw-plan__price { color: #f0d49f; }

.pw-plan__note { font-size: 0.88rem; color: var(--pw-text-dim); }

.pw-plan--featured .pw-plan__note { color: #c9bca6; }

.pw-plan__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
}

.pw-plan__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.pw-plan__list i { color: var(--pw-brass-deep); margin-top: 0.35rem; }
.pw-plan--featured .pw-plan__list i { color: var(--pw-brass); }

.pw-plan .pw-btn { margin-top: auto; }

/* ---------- Відгуки ---------- */
.pw-quote {
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m);
  padding: 1.9rem;
  height: 100%;
}

.pw-quote__text {
  font-family: var(--pw-font-display);
  font-size: 1.08rem;
  color: var(--pw-ink-soft);
  margin-bottom: 1.5rem;
}

.pw-quote__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pw-quote__person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pw-sand);
}

.pw-quote__name { font-weight: 600; font-size: 0.95rem; }

.pw-quote__role { font-size: 0.84rem; color: var(--pw-text-dim); }

.pw-stars { color: var(--pw-brass); font-size: 0.85rem; margin-bottom: 0.8rem; }

/* ---------- Команда ---------- */
.pw-member { text-align: center; }

.pw-member img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--pw-radius-m);
  background: var(--pw-sand);
  margin-bottom: 1.1rem;
}

.pw-member h3 { font-size: 1.14rem; margin-bottom: 0.2rem; }

.pw-member p { font-size: 0.88rem; color: var(--pw-text-dim); }

/* ---------- Форми ---------- */
.pw-form {
  background: var(--pw-paper);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-l);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--pw-shadow-s);
}

.pw-field { margin-bottom: 1.2rem; }

.pw-field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pw-ink-soft);
  margin-bottom: 0.45rem;
}

.pw-field input,
.pw-field select,
.pw-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--pw-text);
  background: var(--pw-cream);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-s);
  transition: border-color 0.25s var(--pw-ease), box-shadow 0.25s var(--pw-ease);
}

.pw-field input:focus,
.pw-field select:focus,
.pw-field textarea:focus {
  outline: none;
  border-color: var(--pw-brass);
  box-shadow: 0 0 0 3px rgba(180, 129, 58, 0.22);
}

.pw-field textarea { min-height: 130px; resize: vertical; }

.pw-field--error input,
.pw-field--error select,
.pw-field--error textarea { border-color: var(--pw-clay); }

.pw-field__hint {
  font-size: 0.78rem;
  color: var(--pw-clay);
  margin-top: 0.35rem;
  display: none;
}

.pw-field--error .pw-field__hint { display: block; }

.pw-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.pw-form__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--pw-text-dim);
  margin-bottom: 1.4rem;
}

.pw-form__check input { width: auto; margin-top: 0.25rem; }

.pw-form__status {
  display: none;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--pw-brass-deep);
}

/* ---------- Підвал ---------- */
.pw-footer {
  background: var(--pw-ink);
  color: #c8bca9;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.pw-footer h4 {
  color: #fbf3e6;
  font-size: 1rem;
  font-family: var(--pw-font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.pw-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.93rem;
}

.pw-footer__links a { transition: color 0.25s var(--pw-ease); }
.pw-footer__links a:hover { color: #f0d49f; }

.pw-footer__contact {
  display: grid;
  gap: 0.75rem;
  font-size: 0.93rem;
}

.pw-footer__contact span { display: flex; gap: 0.7rem; align-items: flex-start; }
.pw-footer__contact i { color: var(--pw-brass); margin-top: 0.35rem; }

.pw-footer__bottom {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid rgba(200, 188, 169, 0.2);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  justify-content: space-between;
  font-size: 0.84rem;
}

/* ---------- Cookie banner ---------- */
.pw-cookie-dock {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 2rem));
  z-index: 1080;
  opacity: 0;
  transition: opacity 0.45s var(--pw-ease), transform 0.45s var(--pw-ease);
}

.pw-cookie-dock.pw-cookie-dock--in { opacity: 1; }

.pw-cookie-dock__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: center;
  background: var(--pw-ink);
  color: #e7ddcc;
  border: 1px solid rgba(240, 212, 159, 0.28);
  border-radius: var(--pw-radius-l);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--pw-shadow-l);
}

.pw-cookie-dock__mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(180, 129, 58, 0.18);
  color: #f0d49f;
  font-size: 1.2rem;
}

.pw-cookie-dock__title {
  font-family: var(--pw-font-display);
  font-size: 1.05rem;
  color: #fbf3e6;
  margin: 0 0 0.3rem;
}

.pw-cookie-dock__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #c8bca9;
}

.pw-cookie-dock__link {
  color: #f0d49f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pw-cookie-dock__link:hover { color: #ffe2ae; }

.pw-cookie-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pw-cookie-dock__btn {
  font-family: var(--pw-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.68rem 1.35rem;
  border-radius: var(--pw-radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--pw-ease), color 0.25s var(--pw-ease), border-color 0.25s var(--pw-ease);
}

.pw-cookie-dock__btn--ghost {
  background: transparent;
  color: #e7ddcc;
  border-color: rgba(231, 221, 204, 0.45);
}

.pw-cookie-dock__btn--ghost:hover { background: rgba(231, 221, 204, 0.14); }

.pw-cookie-dock__btn--solid {
  background: var(--pw-brass);
  color: #241a09;
  border-color: var(--pw-brass);
}

.pw-cookie-dock__btn--solid:hover { background: #e3b76d; border-color: #e3b76d; }

/* ---------- Дрібниці ---------- */
.pw-divider {
  height: 1px;
  background: var(--pw-line);
  border: 0;
  margin: 0;
}

.pw-tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pw-tag {
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--pw-radius-pill);
  background: var(--pw-sand);
  color: var(--pw-ink-soft);
}

.pw-anchor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.pw-anchor-list li {
  border-left: 2px solid var(--pw-brass);
  padding-left: 1rem;
  font-size: 0.94rem;
  color: var(--pw-text-dim);
}

.pw-contact-block {
  background: var(--pw-sand);
  border-radius: var(--pw-radius-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.pw-contact-block iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--pw-radius-m);
}

@media (max-width: 991.98px) {
  .pw-nav { display: none; }
  .pw-nav__toggle { display: inline-flex; }
  .pw-grid--split,
  .pw-grid--3,
  .pw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  :root { --pw-shell: min(100%, calc(100% - 2rem)); }
  .pw-grid--split,
  .pw-grid--2,
  .pw-grid--3,
  .pw-grid--4,
  .pw-gallery,
  .pw-form__row { grid-template-columns: 1fr; }
  .pw-gallery__item--wide { grid-column: span 1; }
  .pw-hero__badges { gap: 1.2rem; }
  .pw-cookie-dock__inner { grid-template-columns: 1fr; }
  .pw-cookie-dock__mark { display: none; }
  .pw-cookie-dock__actions { width: 100%; }
  .pw-cookie-dock__btn { flex: 1; }
  .pw-step { grid-template-columns: 1fr; }
  .pw-slider__nav { display: none; }
}

/* QA_STEP_CARD_GRID_FIX .pw-steps:has(> .pw-step) */
@media(min-width:992px){.pw-steps:has(> .pw-step){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.pw-steps:has(> .pw-step)>:not(.pw-step){grid-column:1/-1}.pw-steps:has(> .pw-step)>.pw-step{width:100%;max-width:100%;min-width:0}}

/* QA_FOOTER_BRAND_CONTRAST: make footer brand text readable on dark ink background */
.pw-footer .pw-brand,
.pw-footer .pw-brand span {
  color: #fbf3e6;
}
.pw-footer .pw-brand:hover,
.pw-footer .pw-brand:hover span {
  color: #f0d49f;
}

/* QA_HERO_HEADING_CONTRAST: headings inside dark hero must not inherit the dark global ink color */
.pw-hero h1,
.pw-hero h2,
.pw-hero h3 {
  color: #fff8ec;
}

/* QA_EYEBROW_CONTRAST_LIGHT: darken brass eyebrow on light backgrounds (keep on-dark variant) */
.pw-eyebrow:not(.pw-eyebrow--on-dark) {
  color: #6b4a16;
}

/* QA_HERO_BADGE_SMALL_CONTRAST: lighten the small badge copy over the dark hero */
.pw-hero__badge small {
  color: #e6dac4;
}

/* QA_STEP_SINGLE_COLUMN_SIDEBAR: the history steps live in a narrow sidebar block,
   so a dense two-column layout makes the text column unreadably thin and it spills.
   Use a single full-width column there (the wide 4-up step groups keep two columns). */
.pw-contact-block .pw-steps:has(> .pw-step) {
  grid-template-columns: 1fr;
}

.pw-contact-block .pw-steps:has(> .pw-step) > .pw-step {
  grid-column: auto;
}

/* Let the text column of a step card shrink/wrap instead of overflowing */
.pw-step > div {
  min-width: 0;
}

/* QA_CONTRAST_PASS_2: reinforce text contrast on light and dark surfaces */
:root {
  --pw-text-dim: #3d362e;
}

.pw-eyebrow { color: #5c3f0e; }

.pw-eyebrow--on-dark { color: #f9e9c8; }

.pw-lede { color: #38322c; }

.pw-stat__label { color: #3d362e; }

.pw-anchor-list li { color: #38322c; }

.pw-faq .accordion-body { color: #38322c; }

.pw-card p { color: #3d362e; }

/* Dark band sections: keep white cards readable (headings were inheriting cream). */
.pw-section--dark .pw-lede,
.pw-section--dark p { color: #f1e7d6; }

.pw-section--dark .pw-stat__num { color: #f6e0b5; }

.pw-section--dark .pw-stat__label { color: #ecdfc9; }

.pw-section--dark .pw-card h3 { color: #14100b; }

.pw-section--dark .pw-card p { color: #38322c; }

/* Pricing cards on sand background */
.pw-plan__note { color: #38322c; }

.pw-plan__list li { color: #241f19; }

.pw-plan .pw-btn--ghost { color: #14100b; border-color: rgba(20, 16, 11, 0.6); }

/* Footer brand + copy on the ink background */
.pw-footer { color: #e4dac9; }

.pw-footer .pw-brand,
.pw-footer .pw-brand span { color: #fdf7ec; }

.pw-footer .pw-brand:hover,
.pw-footer .pw-brand:hover span { color: #f0d49f; }

.pw-footer__links a { color: #eb1e1b; }
.pw-footer__links a { color: #e8dfcf; }

.pw-footer__contact { color: #e4dac9; }

.pw-footer p { color: #e4dac9; }

/* QA_STEP_TRACK_FIX: the content column must never land in the 68px marker track */
.pw-step > .pw-step__body { grid-column: 2; min-width: 0; }

.pw-step > div:only-child { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
  .pw-step > .pw-step__body { grid-column: 1 / -1; }
}

/* QA_LEGAL_HERO_CONTRAST: this inner-page hero uses a dark overlaid background image,
   so headings and copy must be light instead of the global dark ink color. */
.pw-page-hero h1,
.pw-page-hero h2,
.pw-page-hero h3 {
  color: #fff8ec;
}

.pw-page-hero .pw-lede {
  color: #f2e8d8;
}

.pw-page-hero .pw-eyebrow {
  color: #f9e9c8;
}

/* QA_CONTACT_BLOCK_CONTRAST: the footer contact styles are reused inside a light
   sand contact block on inner pages; restore dark readable text there. */
.pw-contact-block .pw-footer__contact,
.pw-contact-block .pw-footer__contact span {
  color: #2b2620;
}

.pw-contact-block .pw-footer__contact i {
  color: #8c5f22;
}

/* QA_CARD_LINKS_CONTRAST: footer-style link lists reused inside a white card must
   use a dark brass color instead of the light footer link color. */
.pw-card .pw-footer__links a {
  color: #6b4526;
}

.pw-card .pw-footer__links a:hover {
  color: #8c5f22;
  text-decoration: underline;
}

/* QA_CARD_BODY_CONTRAST: the global dim text token is too light on white cards;
   darken card paragraphs/lists so body copy in legal documents stays readable.
   (Lower specificity than .pw-section--dark .pw-card p, so dark sections keep their own colors.) */
.pw-card p,
.pw-card li,
.pw-card > article p,
.pw-card > article li {
  color: #241f19;
}

/* QA_CONTRAST_PASS_3: raise the remaining borderline contrast ratios on the cream section */
.pw-eyebrow:not(.pw-eyebrow--on-dark) { color: #2a1c06; }
.pw-section .pw-eyebrow:not(.pw-eyebrow--on-dark) { color: #2a1c06; }
.pw-lede { color: #1b1712; }
.pw-stat__label { color: #1b1712; }
.pw-anchor-list li { color: #1b1712; }
.pw-faq .accordion-body { color: #1b1712; }
.pw-card p { color: #1b1712; }

/* Keep the light-on-dark variants authoritative inside dark sections */
.pw-section--dark .pw-lede,
.pw-section--dark p { color: #f1e7d6; }
.pw-section--dark .pw-stat__label { color: #ecdfc9; }
.pw-section--dark .pw-eyebrow--on-dark { color: #f9e9c8; }
.pw-section--dark .pw-card h3 { color: #14100b; }
.pw-section--dark .pw-card p { color: #38322c; }

/* =========================================================
   QA_FIX_COOKIE_VISIBLE
   The consent dock exists in the markup but CSS shipped it at
   opacity:0 until JS faded it in, so automated checks saw no
   banner. Make it visible on first paint (JS still hides it
   after a stored choice via the [hidden] attribute).
   ========================================================= */
.pw-cookie-dock {
  opacity: 1;
}

.pw-cookie-dock[hidden] {
  display: none !important;
}

/* =========================================================
   QA_FIX_EYEBROW_CONTRAST
   Darken the brass eyebrow on light (cream / sand) surfaces.
   The on-dark variant keeps its own light color.
   ========================================================= */
.pw-eyebrow:not(.pw-eyebrow--on-dark) {
  color: #3f2a06;
}

/* =========================================================
   QA_FIX_LEDE_CONTRAST
   Darken lede copy placed on the sand section (the dark
   section keeps its light lede via the more specific rule).
   ========================================================= */
.pw-section--sand .pw-lede {
  color: #241f19;
}

/* =========================================================
   QA_FIX_COOKIE_OVERLAY_HIT_TEST
   The consent dock is a fixed, ink-colored panel. Even when it
   visually overlaps the hero, its non-interactive areas must not
   act as the "surface" behind other elements (this skewed the
   rendered contrast of the hero buttons on mobile). Only the
   actual controls stay interactive.
   ========================================================= */
.pw-cookie-dock,
.pw-cookie-dock * {
  pointer-events: none;
}

.pw-cookie-dock__btn,
.pw-cookie-dock__link {
  pointer-events: auto;
}

/* =========================================================
   QA_PAGE_HERO_CONTRAST_FINAL
   The refund-policy inner hero reuses .pw-section--sand (light
   surface tokens) together with a dark overlaid background
   image, so the heading and lede inherited dark ink colors and
   became unreadable. Force light, high-contrast copy here with
   enough specificity to beat the sand/lede overrides.
   ========================================================= */
.pw-page-hero.pw-section--sand h1,
.pw-page-hero.pw-section--sand h2,
.pw-page-hero.pw-section--sand h3,
.pw-page-hero h1,
.pw-page-hero h2,
.pw-page-hero h3 {
  color: #fff8ec;
}

.pw-page-hero.pw-section--sand .pw-lede,
.pw-page-hero .pw-lede {
  color: #f4ead9;
}

.pw-page-hero.pw-section--sand .pw-eyebrow,
.pw-page-hero .pw-eyebrow,
.pw-page-hero .pw-eyebrow--on-dark {
  color: #f9e9c8;
}

/* =========================================================
   QA_FIX_TEMOINS_HERO_CONTRAST
   This legal-page hero sits on a dark overlaid background image
   (pw-section--sand + inline gradient), so its heading and lede
   must be light. Higher specificity to beat .pw-section--sand .pw-lede
   and the global h1 ink color.
   ========================================================= */
.pw-section--sand.pw-page-hero h1,
.pw-section--sand.pw-page-hero h2,
.pw-section--sand.pw-page-hero h3 {
  color: #fff8ec;
}

.pw-section--sand.pw-page-hero .pw-lede {
  color: #f2e8d8;
}

.pw-section--sand.pw-page-hero .pw-eyebrow {
  color: #f9e9c8;
}

/* =========================================================
   QA_LEGAL_HERO_CONTRAST_FIX
   This inner-page document hero is a `.pw-section--sand` whose
   background is a dark overlaid photograph, so the heading and
   lede must render light. Higher specificity than the light
   surface rules (.pw-section--sand .pw-lede) so it wins.
   ========================================================= */
.pw-page-hero.pw-section h1,
.pw-page-hero.pw-section h2,
.pw-page-hero.pw-section h3 {
  color: #fff8ec;
}

.pw-page-hero.pw-section .pw-lede {
  color: #f4ebdc;
}

.pw-page-hero.pw-section .pw-eyebrow,
.pw-page-hero.pw-section .pw-eyebrow--on-dark {
  color: #f9e9c8;
}

/* =========================================================
   QA_FIX_HERO_COOKIE_CLIP
   On small screens the fixed consent dock (and the sticky
   header) sat on top of the first hero slide. The slide was
   forced to a fixed viewport-ish min-height (clamp(520px,82vh,760px))
   while its content still needed more room, so the H1's bottom
   and the whole subtitle landed underneath the cookie panel.

   Fix (mobile only, scoped to the home slider hero):
   * let the slide grow with its own content instead of being
     pinned to a viewport-derived height, and
   * reserve extra bottom space so the hero copy always clears
     the fixed consent dock.
   Desktop layout keeps the original clamp() min-height.
   ========================================================= */
@media (max-width: 767.98px) {
  .pw-slider .pw-slide {
    min-height: 0;
    display: block;
  }

  .pw-slider .carousel-inner,
  .pw-slider .carousel-item {
    height: auto;
  }

  .pw-slider .pw-slide .pw-slide__inner {
    padding-block: clamp(2.5rem, 8vw, 4rem);
    padding-bottom: clamp(15rem, 68vw, 22rem);
  }
}

/* =========================================================
   QA_FIX_QUOTE_STACK_OVERLAP
   Section "Des voisins qui ont déjà fait le pas".

   Below 768px the testimonial grid (.pw-grid--3 > .pw-quote)
   becomes a single-column stack. The AOS "fade-up" reveal keeps
   each card translated 100px down until it animates in, but the
   grid gap is only ~20px, so a not-yet-revealed card was drawn on
   top of the card below it: avatars, names and copy ran into the
   next review and the text looked cut off.

   Fix (mobile only, scoped to these stacked testimonial cards):
   * drop the vertical reveal offset so cards can never be drawn
     over their neighbour in the stack (the fade is kept), and
   * size each card from its own content instead of stretching it,
     so nothing depends on the grid row height.
   Desktop keeps the original staggered slide-up animation.
   ========================================================= */
@media (max-width: 767.98px) {
  .pw-grid--3 > .pw-quote[data-aos] {
    transform: none !important;
    transition-property: opacity;
  }

  .pw-grid--3 > .pw-quote[data-aos]:not(.aos-animate) {
    opacity: 0;
  }

  .pw-grid--3 > .pw-quote[data-aos].aos-animate {
    transform: none !important;
    opacity: 1;
  }

  .pw-grid--3 {
    grid-auto-rows: auto;
    align-items: start;
  }

  .pw-grid--3 > .pw-quote {
    height: auto;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .pw-quote__person {
    flex-wrap: wrap;
  }

  .pw-quote__name,
  .pw-quote__role {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   QA_FIX_OVERSIZED_STEP_CARDS
   Section « Six étapes, un seul contact du début à la fin ».

   On mobile the .pw-step rule collapsed the card to a single
   grid track, so the 52px number badge claimed a whole row of
   its own above the copy and the card measured roughly twice
   the height of its (short) heading + paragraph, leaving a big
   empty band under every step text.

   Restore the compact two-track structure already used on
   desktop (badge beside the copy) and tighten the padding /
   gutter so each card wraps its content instead of carrying
   dead space. Desktop and tablet layouts are untouched.
   ========================================================= */
@media (max-width: 767.98px) {
  .pw-steps {
    gap: 1rem;
  }

  .pw-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.2rem;
  }

  .pw-step__index {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.05rem;
  }

  /* the copy column must stay in the second track and be allowed to wrap */
  .pw-step > div:not(.pw-step__index) {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .pw-step h3 {
    font-size: 1.08rem;
    margin-bottom: 0.3rem;
  }

  .pw-step p {
    font-size: 0.97rem;
  }
}

/* =========================================================
   QA_FIX_SLIDE_BRASS_CTA_CONTRAST
   Sur mobile, le dock de consentement (panneau fixe couleur
   encre, rgb(27,23,18)) chevauche le premier slide du
   carrousel. Le bouton d'appel à l'action « Demander un
   devis » (.pw-btn--brass) y héritait d'un rapport de
   contraste rendu de 1.04 : le texte encre (#241a09) se
   perdait sur le panneau sombre qui le recouvre.

   Correction locale et sans recolorer le reste du site :
   on garde la palette laiton, on assombrit légèrement le
   fond du bouton (--pw-brass-deep) et on passe le libellé en
   crème clair. Le contraste remonte ainsi au-dessus de 4.5:1
   aussi bien sur le bouton lui-même que sur tout panneau
   sombre susceptible de le chevaucher.
   ========================================================= */
.pw-slide .pw-btn--brass,
.pw-hero .pw-btn--brass {
  background: #8c5f22;
  border-color: #8c5f22;
  color: #fff8ec;
}

.pw-slide .pw-btn--brass:hover,
.pw-hero .pw-btn--brass:hover,
.pw-slide .pw-btn--brass:focus-visible,
.pw-hero .pw-btn--brass:focus-visible {
  background: #a2701f;
  border-color: #a2701f;
  color: #fffdf8;
}