/* ===================================
   OLD FOX Leather — Main Styles
   =================================== */

/* === UTILITIES === */

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-header {
  text-align: center;
  margin-bottom: 57px;
}

.section-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: normal;
  margin-bottom: 8px;
}

.section-line {
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--color-accent);
}

.services .section-line {
  background-color: #3E3025;
}

.section-header--left {
  text-align: left;
}

.section-header--left .section-line {
  margin-left: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 38px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  color: var(--color-text);
  border-radius: var(--btn-radius);
  line-height: normal;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn__phone-icon {
  flex-shrink: 0;
  width: 15px;
  height: 16px;
}

.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background: var(--gradient-btn-primary);
  border: 1px solid var(--color-accent-border);
  padding-left: 41px;
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-accent-border);
}

.btn--outline .btn__accent {
  color: var(--color-accent);
}


/* === HEADER === */

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(to bottom, #0b0b0b 0%, rgba(0, 0, 0, 0) 100%);
  height: 182px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--container-padding) 0;
  max-width: 1430px;
  margin: 0 auto;
}

.header__logo img {
  width: 262px;
  height: 78px;
  object-fit: contain;
}

.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 46px;
}

.header__nav-item {
  position: relative;
}

.header__nav-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.header__nav-link:hover {
  color: var(--color-accent);
}

.header__nav-item--active .header__nav-link {
  color: var(--color-accent);
  position: relative;
}

.header__nav-item--active .header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent);
}

.header__nav-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.header__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: #1a1612;
  border: 1px solid var(--color-accent-dark);
  border-radius: var(--card-radius);
  padding: 8px 0;
  min-width: 230px;
  display: none;
  z-index: 200;
}

/* Safe zone — fills the 12px gap between nav item and dropdown */
.header__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.header__nav-item--has-dropdown:hover .header__dropdown,
.header__nav-item--has-dropdown.is-open .header__dropdown {
  display: block;
}

.header__dropdown-link {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  transition: color 0.2s, background 0.2s;
}

.header__dropdown-link:hover {
  color: var(--color-accent);
  background: rgba(198, 168, 107, 0.08);
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 38px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: transparent;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.header__phone:hover {
  opacity: 0.8;
}

.header__phone img {
  width: 15px;
  height: 16px;
  flex-shrink: 0;
}

.header__phone span {
  font-size: 17px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  line-height: normal;
}

/* === MOBILE MENU === */

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: rgba(11, 11, 11, 0.97);
  z-index: 105;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

.header--menu-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 24px 40px;
  min-height: 100%;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

.mobile-menu__item {
  width: 100%;
  text-align: center;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.mobile-menu__link:hover,
.mobile-menu__item--active .mobile-menu__link {
  color: var(--color-accent);
}

.mobile-menu__arrow {
  transition: transform 0.25s ease;
}

.mobile-menu__item--has-sub.is-open .mobile-menu__arrow {
  transform: rotate(180deg);
}

.mobile-menu__sub {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.mobile-menu__item--has-sub.is-open .mobile-menu__sub {
  display: flex;
}

.mobile-menu__sub-link {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-menu__sub-link:hover {
  color: var(--color-accent);
}

.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-menu__phone:hover {
  color: var(--color-accent);
}

@media (max-width: 1024px) {
  .mobile-menu {
    display: block;
  }
}

/* === HERO === */

.hero {
  position: relative;
  width: 100%;
  height: 890px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero/hero-bg.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(11, 11, 11, 0.85) 0%,
      rgba(11, 11, 11, 0.4) 60%,
      rgba(11, 11, 11, 0) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-top: 194px;
}

.hero__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 23px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.1;
  max-width: 770px;
  margin-bottom: 28px;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 22px;
  color: var(--color-text);
  line-height: normal;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
}

.hero__subtitle-line {
  display: block;
  white-space: nowrap;
}

.hero__subtitle-accent {
  color: var(--color-accent);
}

.hero__buttons {
  display: flex;
  gap: 33px;
  margin-bottom: 24px;
}

.hero__location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

.hero__pin {
  width: 16px;
  height: 23px;
}

/* Trust Bar */
.trust-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 96px;
  background: linear-gradient(180deg, rgba(163, 94, 45, 0.39) 100%, rgba(198, 145, 108, 0.39) 100%, rgba(175, 105, 67, 0.359) 100%, rgba(175, 105, 67, 0.359) 100%);
  z-index: 2;
}

.trust-bar__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(198, 168, 107, 0.2) 15%,
      rgba(198, 168, 107, 0.6) 50%,
      rgba(198, 168, 107, 0.2) 85%,
      transparent 100%);
  pointer-events: none;
}

.trust-bar__glow::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -120px;
  width: 120px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse 60px 3px at center, rgba(220, 185, 120, 0.9) 0%, transparent 100%);
  animation: trust-glow-sweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes trust-glow-sweep {
  0% {
    left: -120px;
  }

  100% {
    left: calc(100% + 120px);
  }
}

.trust-bar__glow--bottom {
  top: auto;
  bottom: 0;
  animation: none;
  display: none;
}

.trust-bar__glow--bottom::after {
  top: -3px;
  left: auto;
  right: -120px;
  animation: trust-glow-sweep-rtl 5s ease-in-out infinite;
}

@keyframes trust-glow-sweep-rtl {
  0% {
    right: -120px;
  }

  100% {
    right: calc(100% + 120px);
  }
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.trust-bar__item .box-icon {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.trust-bar__item .box-icon .trust-bar__icon {
  display: block;
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.trust-bar__divider {
  width: 1px;
  height: 57px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0 40px;
  flex-shrink: 0;
}

.trust-bar__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.trust-bar__title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: normal;
}

.trust-bar__subtitle {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  color: var(--color-text);
  line-height: normal;
}

/* === SERVICES (What We Fix) === */
/* Figma: section Y=808, height=987.
   Cards: 396x298px (image 234px + footer 64px).
   Grid: 3 cols, col-gap 46px, row-gap 64px.
   Section padding: top 72px, bottom 87px.
   Label color in this section: #3e3025 (Figma override). */

.services {
  background-color: #CDA273;
  padding: 72px 0 87px;
}

.services__label {
  color: #3e3025;
}

.services .section-header {
  max-width: 260px;
  text-align: start;
  margin: 0 auto;
  padding-bottom: 57px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--card-gap);
  row-gap: 64px;
}

.service-card {
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.service-card:hover {
  transform: translateY(-4px);
}

/* Image area: 234px tall, photo + subtle bottom gradient */
.service-card__image {
  height: 190px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.service-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      transparent 50%,
      rgba(11, 11, 11, 0.55) 100%);
}

.service-card__icon {
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 83px;
  height: 83px;
  z-index: 1;
  pointer-events: none;
}

/* Footer: solid dark bg, 64px, title + link centered */
.service-card__footer {
  height: 130px;
  background-color: #0d0b09;
  background-image: linear-gradient(180deg, rgba(163, 94, 45, 0.39) -96.65%, rgba(198, 146, 108, 0.39) 11.32%, rgba(175, 105, 67, 0.3588) 94.37%, rgba(175, 105, 67, 0.3588) 138.54%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  line-height: normal;
  text-align: center;
  margin-bottom: 20px;
}

.service-card__link {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-accent);
  white-space: nowrap;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: normal;
}

.service-card__link svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.service-card__link:hover {
  opacity: 0.75;
}


/* === HOW IT WORKS === */
/* Figma: Y=1795, H=477. Background gradient 177deg.
   3 steps with icons, numbers, titles, descriptions.
   Arrows between steps (horizontal lines).
   Padding top: 81px (1876-1795), bottom: ~80px. */

.how-it-works {
  background: linear-gradient(177.14deg, #634e3b 42.48%, #3a2d21 83.72%);
  padding: 81px 0 80px;
  position: relative;
}

.single-services .how-it-works {
  background: #322B26;
}

.how-it-works::before,
.how-it-works::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(198, 168, 107, 0.5) 20%,
      rgba(198, 168, 107, 1) 50%,
      rgba(198, 168, 107, 0.5) 80%,
      transparent 100%);
}


.element::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.5px;
  border-radius: inherit;
  background: linear-gradient(to right,
      #C6A86B 0%,
      #605134 32%,
      #605134 55%,
      #E6C071 70%,
      #605134 88%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}




.how-it-works::before {
  top: 21px;
}

.how-it-works::after {
  bottom: 16px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(198, 168, 107, 0.4) 15%,
      rgba(220, 190, 130, 1) 50%,
      rgba(198, 168, 107, 0.4) 85%,
      transparent 100%);
  height: 2px;
}

.single-services .how-it-works::after {
  display: none;
}

.how-it-works .section-header {
  max-width: 300px;
  text-align: start;
  margin: 0 auto;
  padding-bottom: 57px;
}

/* Steps row: 3 steps + 2 arrows, horizontally centered */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Step: icon + body side by side */
.step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}

.step__icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

/* Body: number, title, desc stacked */
.step__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8px;
}

.step__number {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 47px;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0;
}

.step__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-text);
  line-height: normal;
  margin-bottom: 11px;
  margin-top: 10px;
}

.step__desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: var(--color-text);
  line-height: normal;
}

/* Arrow between steps — vertically centered to mid-icon height */
.step__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 20px;
  margin-top: 20px;
}

/* ============================================================
   BEFORE & AFTER
   Section Y=2272, height=704px; sliders 396x279px, gap=46px
   ============================================================ */

.before-after {
  background-color: #CDA273;
  padding: 72px 0 80px;
}


.before-after .section-header {
  max-width: 330px;
  text-align: start;
  margin: 0 auto;
  padding-bottom: 57px;
}

.before-after .section-line {
  background-color: #3E3025;
}


.before-after__label {
  color: #3e3025;
}

.before-after__header {
  margin-bottom: 57px;
}

.before-after__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  justify-content: center;
}

/* Compare Slider */
.compare-slider {
  position: relative;
  width: 396px;
  height: 279px;
  overflow: hidden;
  border-radius: 8px;
  border: 0.5px solid #c6a86c;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  cursor: ew-resize;
  user-select: none;
}

.compare-slider__before {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.compare-slider__after-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.compare-slider__after {
  position: absolute;
  top: 0;
  left: 0;
  width: 396px;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-right: solid 1px;
}

/* Handle */
.compare-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 32px;
  z-index: 3;
  cursor: ew-resize;
}

/* Vertical divider line through handle */
.compare-slider__handle::before {
  content: '';
  position: absolute;
  top: calc(-50vh);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 200vh;
  background: rgba(198, 168, 108, 0.5);
  z-index: -1;
}

/* Label bars — one per side, clip naturally via after-wrap overflow:hidden */
.compare-slider__bar {
  position: absolute;
  bottom: 0;
  width: 396px;
  /* fixed full-slider width so bar never shrinks */
  height: 72px;
  background: rgba(13, 13, 13, 0.8);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

/* AFTER bar sits on the right side of the base layer */
.compare-slider__bar--after {
  left: 0;
  justify-content: flex-end;
  padding-right: 16px;
}

/* BEFORE bar is inside after-wrap, pinned to the left of the full-width bar */
.compare-slider__bar--before {
  left: 0;
  justify-content: flex-start;
  padding-left: 16px;
}

.compare-slider__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 17px;
  color: var(--color-text);
  line-height: normal;
  white-space: nowrap;
}

/* "View more work" button */
.before-after__cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

.btn--outline-work {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 242px;
  height: 48px;
  border: 0.5px solid #605134;
  border-radius: 8px;
  background: rgba(53, 53, 53, 0.11);
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  color: #3E3025;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn--outline-work:hover {
  border-color: var(--color-accent);
  color: #fdfdfd;
}

/* ============================================================
   WHY CHOOSE
   Section Y=2976, height=521px; 5 items in a row
   ============================================================ */

.why-choose {
  background: var(--gradient-why-choose);
  padding: 66px 0 72px;
}

.why-choose__container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Header with side lines + fox icon */
.why-choose__header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.why-choose__line-left,
.why-choose__line-right {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 168, 107, 0.6));
}

.why-choose__line-right {
  background: linear-gradient(90deg, rgba(198, 168, 107, 0.6), transparent);
}

.why-choose__fox-icon {
  flex-shrink: 0;
  width: 46px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-choose__heading {
  text-align: center;
  margin-bottom: 48px;
}

.why-choose__title {
  font-family: var(--font-heading);
  font-size: 45px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: normal;
  white-space: nowrap;
  margin-bottom: 16px;
}

.why-choose__accent {
  color: #af9460;
}

.why-choose__sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* 5-column grid */
.why-choose__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.why-choose__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

.why-choose__divider {
  width: 1px;
  height: 194px;
  background: rgba(255, 255, 255, 0.15);
  align-self: center;
  flex-shrink: 0;
}

.why-choose__icon {
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.why-choose__item-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: normal;
  margin-bottom: 8px;
}

.why-choose__item-line {
  width: 61px;
  height: 1px;
  background-color: rgba(198, 168, 107, 0.5);
  margin: 0 auto 12px;
}

.why-choose__item-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  max-width: 175px;
}


/* ============================================================
   CERTIFICATE
   ============================================================ */

.certificate {
  background-color: #CEAD8C;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

/* Vector 18 — top decorative line, full width, padding 15px from top */
.certificate__top-line {
  width: 100%;
  height: 1px;
  margin-top: 15px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(62, 48, 37, 0.3) 15%,
      rgba(62, 48, 37, 0.7) 50%,
      rgba(62, 48, 37, 0.3) 85%,
      transparent 100%);
}

/* Centered header block */
.certificate__header {
  text-align: center;
  padding: 37px 0 30px;
}

.certificate__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  color: #3e3025;
  margin-bottom: 15px;
}

/* Vector 19 — 60px centered line under label */
.certificate__line-19 {
  width: 60px;
  height: 1px;
  background-color: #3e3025;
  margin: 0 auto 17px;
  opacity: 0.4;
}

.certificate__title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  color: #3e3025;
  line-height: normal;
}

/* Main body: image left + text right */
.certificate__body {
  display: flex;
  align-items: flex-end;
  width: 1100px;
  margin: 0 auto;
  padding: 70px 0 48px;
  gap: 0;
}

.certificate__image-col {
  flex: 0 0 65%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificate__img {
  display: none;
  width: 600px;
  height: auto;
  object-fit: contain;
  object-position: bottom;
}

/* Right column */
.certificate__content {
  flex: 0 0 35%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
}

.certificate__expertise {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: #ab8444;
  text-transform: uppercase;
  letter-spacing: 2.08px;
  margin-bottom: 25px;
  line-height: 1.94;
}

.certificate__spec-title {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  color: #3e3025;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Vector 20 — 32px line */
.certificate__line-20 {
  width: 32px;
  height: 2px;
  background-color: #3e3025;
  margin-top: 5px;
  margin-bottom: 34px;
  opacity: 0.5;
}

.certificate__spec-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #261910;
  line-height: 1.6;
  margin-bottom: 24px;
}

.certificate__credentials {
  list-style: none;
  margin-bottom: 0;
}

.certificate__credential {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
}

.certificate__credential-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificate__credential-text {
  max-width: 210px;
}

.certificate__credential-text strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: #3e3025;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.certificate__credential-text p {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  color: #261910;
  line-height: 1.5;
}

.certificate__badge-wrap {
  display: flex;
  justify-content: center;
  padding: 0 0 38px;
}

.certificate__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 24px 48px;
  width: 952px;
  height: 104px;
  border: 1px solid #a57c38;
  border-radius: 8px;
  background: rgba(62, 48, 37, 0.08);
}

.certificate__badge-icon {
  flex-shrink: 0;
}

.certificate__badge-main {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 23px;
  color: #3e3025;
  margin-bottom: 6px;
  line-height: normal;
}

.certificate__badge-sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  color: #261910;
  letter-spacing: 3.77px;
  text-transform: uppercase;
}

/* ============================================================
   SERVICE AREA
   ============================================================ */

.service-area {
  background-color: #2d2722;
  padding-top: 83px;
  padding-bottom: 0;
  overflow: hidden;
}

/* Section header */
.service-area__header {
  text-align: center;
  padding: 0 80px;
  margin-bottom: 55px;
}

.service-area__label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  margin-bottom: 15px;
}

.service-area__label-line {
  width: 60px;
  height: 1px;
  background-color: var(--color-accent);
  margin: 0 auto 18px;
  opacity: 0.6;
}

.service-area__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
  color: var(--color-text);
  line-height: normal;
}

/* Map + panel row */
.service-area__body {
  display: flex;
  align-items: flex-start;
  width: 1274px;
  margin: 0 auto;
  gap: 32px;
  padding-bottom: 95px;
}

/* Map */
.service-area__map-wrap {
  flex: 0 0 840px;
  display: flex;
  flex-direction: column;
  border: solid 1px #A57C38;
  border-radius: 5px;
  overflow: hidden;
}

.service-area__map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-area__map-iframe {
  display: block;
  width: 100%;
  height: 400px;

  overflow: hidden;
}

/* Right panel */
.service-area__panel {
  flex: 1;
  height: 498px;
  display: flex;
  align-items: stretch;
  border: solid 1px #A57C38;
  border-radius: 5px;
  background: rgba(198, 168, 108, 0.08);
}

.service-area__reviews {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
  text-align: center;
}

.service-area__reviews-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  color: #af884d;
  text-transform: uppercase;
  line-height: 39px;
  margin-bottom: 0;
}

.service-area__reviews-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-text);
  line-height: 39px;
  margin-bottom: 24px;
}

.service-area__stars-line {
  width: 42px;
  height: 1px;
  background-color: var(--color-accent);
  margin: 0 auto 24px;
  opacity: 0.6;
}

.service-area__stars {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-bottom: 24px;
}

.service-area__reviews-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 19px;
  color: var(--color-text);
  line-height: 33px;
  margin-bottom: 32px;
}

/* Google review button */
.service-area__google-btn {
  position: relative;
  display: block;
  width: 356px;
  height: 54px;
  border: 1px solid #d6a05d;
  border-radius: 8px;
  background: linear-gradient(175.48deg, #bf8f54 17.12%, #6e4c26 84.48%);
  transition: opacity 0.2s;
}

.service-area__google-btn:hover {
  opacity: 0.85;
}

.service-area__google-g {
  position: absolute;
  left: 70px;
  top: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text);
  line-height: normal;
}

.service-area__google-text {
  position: absolute;
  left: 84px;
  top: 18px;
  width: 231px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  color: var(--color-text);
  text-align: center;
  line-height: normal;
}

/* Cities list */
.service-area__cities-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: rgba(198, 168, 108, 0.08);
}

.service-area__cities-icon {
  flex-shrink: 0;
  align-self: center;
}

.service-area__cities {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 17px;
  color: var(--color-text);
  letter-spacing: 1.02px;
  line-height: 24px;
}

.service-area__dot {
  color: var(--color-accent);
}

/* ============================================================
   SEND PHOTO / FORM
   ============================================================ */

.send-photo {
  position: relative;
  background-color: #000;
  background-image: url(img/footer/footer-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  overflow: hidden;
}

.send-photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 12, 8, 0.75);
}

/* Decorative left stripe */
.send-photo__stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 100%;
  background-color: rgba(168, 133, 94, 0.32);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

/* Inner: two columns */
.send-photo__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 1140px;
  margin: 0 auto;
  padding: 163px 0 100px;
  gap: 111px;
  z-index: 1;
}

/* Left column */
.send-photo__left {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
}

.send-photo__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  color: #af9460;
  letter-spacing: 1.44px;
  line-height: 24px;
  margin-bottom: 16px;
}

.send-photo__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 75px;
  color: #af9460;
  letter-spacing: 4.98px;
  line-height: 83px;
  margin-bottom: 16px;
}

.send-photo__line {
  width: 56px;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.6;
}

/* OR row */
.send-photo__whatsapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.send-photo__or-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}

.send-photo__or {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 3.19px;
  line-height: 31px;
}

/* WhatsApp link */
.send-photo__wa-link {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s;
}

.send-photo__wa-link:hover {
  opacity: 0.8;
}

.send-photo__wa-icon {
  flex-shrink: 0;
}

.send-photo__wa-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 3.19px;
  line-height: 31px;
}

/* === FOOTER === */

.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d0b09;
}

.footer__bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/footer/footer-bg.png');
  background-size: cover;
  background-position: top;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.footer__slogan-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 138px;
}

.footer__slogan {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 27px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 8.91px;
  text-align: center;
  white-space: nowrap;
}

.footer__divider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198, 168, 107, 0.4) 20%, rgba(198, 168, 107, 0.7) 50%, rgba(198, 168, 107, 0.4) 80%, transparent 100%);
}

.footer__logo-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 48px 0 44px;
}

.footer__logo {
  width: 262px;
  height: 78px;
  object-fit: contain;
}

.footer__logo-link {
  display: inline-block;
  transition: opacity 0.2s;
}

.footer__logo-link:hover {
  opacity: 0.85;
}

.footer__contacts {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  max-width: 1144px;
  margin: 0 auto;
  padding: 48px 0 44px;
}

.footer__col {
  flex: 1;
  padding: 0 32px;
}

.footer__col--contact {
  padding-left: 0;
}

.footer__col--hours {
  padding-right: 0;
}

.footer__col-sep {
  width: 1px;
  height: 141px;
  margin-top: auto;
  margin-bottom: auto;
  background: linear-gradient(180deg, transparent 0%, rgba(198, 168, 107, 0.5) 20%, rgba(198, 168, 107, 0.5) 80%, transparent 100%);
  flex-shrink: 0;
  align-self: center;
  position: relative;
  right: 59px;
}

.footer__col-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 28px;
  line-height: normal;
}

.footer__col-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width:768px) {
  .footer__col-body {
    align-items: center;
  }
}

.footer__contact-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-accent);
  line-height: normal;
}

.footer__contact-label--mt {
  margin-top: 16px;
}

.footer__contact-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #fff;
  line-height: normal;
  max-width: 250px;
}

.footer__hours-row {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #fff;
  line-height: 27px;
}

.footer__hours-label {
  color: var(--color-accent);
}

.footer__social-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 36px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.footer__social-link:hover {
  opacity: 0.75;
}

.footer__bottom {
  position: relative;
  z-index: 1;
  background: #090908;
  mix-blend-mode: normal;
  padding: 5px 0;
}

.footer__copy {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  line-height: 27px;
}

/* Right column: form */
.send-photo__form {
  flex: 0 0 650px;
  display: flex;
  flex-direction: column;
}

.send-photo__form-row {
  display: flex;
  gap: 32px;
}

.send-photo__field {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 22px;
}

.send-photo__field--full {
  flex: none;
  width: 100%;
}

.send-photo__field-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 3.19px;
  line-height: 31px;
  margin-bottom: 4px;
}

.send-photo__input,
.send-photo__select,
.send-photo__textarea {
  background: rgba(18, 15, 14, 0.65);
  border: 0.25px solid #6c6c6c;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 11px;
  color: var(--color-text);
  letter-spacing: 3.19px;
  outline: none;
  transition: border-color 0.2s;
}

.send-photo__input,
.send-photo__select {
  height: 51px;
  padding: 0 11px;
  width: 100%;
}

.send-photo__select {
  appearance: none;
  cursor: pointer;
  color: #676767;
}

.send-photo__upload {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 51px;
  padding: 0 11px;
  background: rgba(18, 15, 14, 0.65);
  border: 0.25px solid #6c6c6c;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

:where(.single-services, .archive-portfolio) .send-photo__input,
:where(.single-services, .archive-portfolio) .send-photo__select,
:where(.single-services, .archive-portfolio) .send-photo__textarea {
  background: #F8CB9A;
}

:where(.single-services, .archive-portfolio) .send-photo__upload {
  background: #F8CB9A;
}

.single-services .send-photo__wa-text {
  color: #000;
}

/* Portfolio page uses the gold accent for the WhatsApp text */
.archive-portfolio .send-photo__wa-text {
  color: #c6a86b;
}

.send-photo__upload:hover {
  border-color: rgba(198, 168, 107, 0.5);
}

.send-photo__file-input {
  display: none;
}

.send-photo__upload-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 11px;
  color: #676767;
  letter-spacing: 3.19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.send-photo__input::placeholder,
.send-photo__textarea::placeholder {
  color: #676767;
}

.send-photo__input:focus,
.send-photo__select:focus,
.send-photo__textarea:focus {
  border-color: rgba(198, 168, 107, 0.5);
}

.send-photo__textarea {
  height: 117px;
  padding: 10px 11px;
  resize: none;
  width: 100%;
}

.send-photo__btn {
  width: 650px;
  height: 58px;
  border: 1px solid #d6a05d;
  border-radius: 8px;
  background: linear-gradient(177.34deg, #bf8f54 17.12%, #6e4c26 84.48%);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: #dac089;
  letter-spacing: 3.19px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 22px;
}

.send-photo__btn:hover {
  opacity: 0.85;
}

/* ============================================================
   HAMBURGER BUTTON (always present, hidden on desktop)
   ============================================================ */

.header__burger {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 110;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-accent);
  margin: 5px auto;
  transition: transform 0.3s ease, opacity 0.2s ease;
  border-radius: 2px;
}

.header--menu-open .header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header--menu-open .header__burger span:nth-child(2) {
  opacity: 0;
}

.header--menu-open .header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.is-menu-open {
  overflow: hidden;
}

/* ============================================================
   MEDIA: <= 1200px  (tablet landscape)
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --container-padding: 40px;
  }

  .container {
    padding: 0 var(--container-padding);
  }

  /* Header */
  .header__inner {
    padding: 30px var(--container-padding) 0;
  }

  .header__nav-list {
    gap: 28px;
  }

  /* Hero */
  .hero {
    height: auto;
    min-height: 760px;
    padding-bottom: 110px;
  }

  .hero__title {
    font-size: clamp(40px, 5.5vw, 64px);
    max-width: 100%;
  }

  .hero__content {
    padding-top: 160px;
  }

  /* Trust bar */
  .trust-bar__divider {
    margin: 0 16px;
  }

  .trust-bar__title {
    font-size: 14px;
  }

  .trust-bar__subtitle {
    font-size: 12px;
  }

  /* Services */
  .services__grid {
    column-gap: 24px;
    row-gap: 36px;
  }

  /* Why Choose */
  .why-choose__title {
    font-size: clamp(30px, 4vw, 45px);
    white-space: normal;
  }

  /* Certificate */
  .certificate__body {
    width: 100%;
    max-width: 1100px;
    padding: 60px 40px 40px;
  }

  .certificate__badge {
    width: calc(100% - 80px);
    max-width: 952px;
  }

  /* Service area */
  .service-area__body {
    width: 100%;
    max-width: 1274px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 60px;
  }

  .service-area__map-wrap {
    flex: 1 1 60%;
  }

  /* Send photo */
  .send-photo__inner {
    width: 100%;
    max-width: 1140px;
    padding: 120px 40px 80px;
    gap: 60px;
  }

  .send-photo__form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .send-photo__btn {
    width: 100%;
  }

  /* How It Works — steps wrap */
  .steps {
    flex-wrap: wrap;
    gap: 40px 0;
    justify-content: center;
  }

  .step {
    flex: 0 0 auto;
  }

  .step__arrow {
    display: none;
  }

  /* Footer */
  .footer__contacts {
    padding: 48px 40px 44px;
    max-width: 100%;
  }
}

/* ============================================================
   MEDIA: <= 1024px  (tablet)
   ============================================================ */
@media (max-width: 1024px) {

  /* Header — hide nav and phone, show burger */
  .header {
    height: auto;
  }

  .header__inner {
    padding: 20px var(--container-padding);
    align-items: center;
  }

  .header__logo img {
    width: 200px;
    height: auto;
  }

  .header__nav {
    display: none;
  }

  .header__nav-list {
    flex-direction: column;
    gap: 28px;
    width: 100%;
    align-items: center;
  }

  .header__nav-link {
    font-size: 20px;
  }

  .header__nav-item--active .header__nav-link::after {
    display: none;
  }

  .header__dropdown {
    position: static;
    display: none;
    border: none;
    background: transparent;
    padding: 8px 0 0;
    text-align: center;
    margin-top: 8px;
  }

  .header__nav-item--has-dropdown:hover .header__dropdown {
    display: none;
  }

  .header__nav-item--has-dropdown.is-open .header__dropdown {
    display: block;
  }

  .header__phone {
    display: none;
  }

  .header__burger {
    display: block;
  }

  /* Hero */
  .hero {
    min-height: 680px;
  }

  .hero__content {
    padding-top: 130px;
  }

  .hero__title {
    font-size: clamp(36px, 5.5vw, 56px);
  }

  .hero__subtitle {
    font-size: 18px;
  }

  /* Services — 2 columns */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Before & After — gap зменшується, слайдери самі wrap */
  .before-after__grid {
    gap: 24px;
  }

  .compare-slider {
    flex: 0 0 calc(50% - 12px);
    max-width: 396px;
    height: auto;
    aspect-ratio: 396 / 279;
  }

  /* Why Choose — 3 columns (wrap) */
  .why-choose__grid {
    flex-wrap: wrap;
    gap: 32px 0;
  }

  .why-choose__item {
    flex: 0 0 33.333%;
  }

  .why-choose__divider:nth-of-type(2),
  .why-choose__divider:nth-of-type(4),
  .why-choose__divider:nth-of-type(6),
  .why-choose__divider:nth-of-type(8) {
    display: none;
  }

  /* Certificate — column layout */
  .certificate__body {
    flex-direction: column;
    align-items: center;
    padding: 50px 24px 40px;
    gap: 40px;
  }

  .certificate__image-col,
  .certificate__content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 600px;
  }

  .certificate__img {
    display: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .certificate__title {
    font-size: clamp(28px, 4vw, 44px);
  }

  /* Service area — column */
  .service-area__body {
    flex-direction: column;
    width: 100%;
    padding: 0 40px 60px;
    gap: 24px;
  }

  .service-area__map-wrap,
  .service-area__panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .service-area__panel {
    height: auto;
    padding: 40px 0;
  }

  .service-area__map-iframe {
    height: 480px;
  }

  .service-area__title {
    font-size: clamp(28px, 4vw, 44px);
  }

  /* Send photo */
  .send-photo__inner {
    padding: 100px 40px 60px;
    gap: 40px;
  }

  .send-photo__title {
    font-size: clamp(48px, 8vw, 75px);
    line-height: 1.1;
  }

  .send-photo__stripe {
    display: none;
  }

  /* Footer */
  .footer__col-title {
    font-size: 22px;
  }

  .footer__col {
    padding: 0 16px;
  }

  .footer__col-sep {
    right: 0;
  }
}

/* ============================================================
   MEDIA: <= 768px  (mobile landscape)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }

  body {
    overflow-x: hidden;
  }

  .container {
    padding: 0 var(--container-padding);
  }

  /* Section header */
  .section-header {
    margin-bottom: 36px;
  }

  .section-title {
    font-size: 26px;
  }

  /* Buttons */
  .btn {
    padding: 14px 28px;
    font-size: 13px;
  }

  /* Header */
  .header__logo img {
    width: 160px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .hero__content {
    padding-top: 110px;
    padding-bottom: 60px;
  }

  .hero__label {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .hero__title {
    font-size: clamp(30px, 9vw, 44px);
    margin-bottom: 20px;
  }

  .hero__subtitle {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .hero__subtitle-line {
    white-space: normal;
  }

  .hero__buttons {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 20px;
  }

  .btn--primary,
  .btn--outline {
    justify-content: center;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero__location {
    font-size: 14px;
  }

  /* Trust Bar — 2x2 grid */
  .trust-bar {
    position: relative;
    height: auto;
    padding: 24px 0;
  }

  .trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    height: auto;
  }

  .trust-bar__item {
    flex: 0 0 auto;
    gap: 12px;
  }

  .trust-bar__divider {
    display: none;
  }

  .trust-bar__item .box-icon .trust-bar__icon {
    width: 30px;
    height: 30px;
  }

  .trust-bar__title {
    font-size: 13px;
  }

  .trust-bar__subtitle {
    font-size: 11px;
  }

  /* Services — 1 column */
  .services {
    padding: 56px 0 64px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
    max-width: 396px;
    margin: 0 auto;
  }

  .services .section-header {
    padding-bottom: 36px;
  }

  /* How It Works — vertical, arrows rotate down */
  .how-it-works {
    padding: 56px 0 60px;
  }

  .how-it-works .section-header {
    padding-bottom: 36px;
  }

  .steps {
    flex-direction: column;
    gap: 30px;
  }

  .step {
    flex-direction: row;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 16px;
  }

  .step__icon svg {
    width: 100px;
    height: auto;
  }

  .step__number {
    font-size: 36px;
  }

  .step__title {
    font-size: 18px;
  }

  .step__arrow {
    display: none;
    align-self: center;
    margin: 12px 0;
    transform: rotate(90deg);
  }

  /* Before & After — 1 column */
  .before-after {
    padding: 56px 0 64px;
  }

  .before-after__grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .compare-slider {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .compare-slider__bar {
    height: 56px;
    width: 100%;
  }

  .compare-slider__label {
    font-size: 14px;
  }

  /* Why Choose — 2 columns */
  .why-choose {
    padding: 56px 0 60px;
  }

  .why-choose__container {
    padding: 0 var(--container-padding);
  }

  .why-choose__title {
    font-size: clamp(24px, 6vw, 32px);
  }

  .why-choose__sub {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .why-choose__grid {
    flex-wrap: wrap;
    gap: 28px 0;
  }

  .why-choose__item {
    flex: 0 0 50%;
    padding: 0 12px;
  }

  .why-choose__divider {
    display: none;
  }

  .why-choose__icon {
    height: 54px;
  }

  .why-choose__icon svg {
    max-width: 53px;
    height: 53px;
    object-fit: contain;
  }

  /* Certificate */
  .certificate__header {
    padding: 30px 20px 20px;
  }

  .certificate__label {
    font-size: 16px;
  }

  .certificate__title {
    font-size: clamp(22px, 5vw, 32px);
  }

  .certificate__body {
    padding: 32px 20px 30px;
    gap: 28px;
  }

  .certificate__spec-title {
    font-size: clamp(26px, 6vw, 36px);
  }

  .certificate__expertise {
    font-size: 14px;
    letter-spacing: 1.6px;
  }

  .certificate__spec-desc {
    font-size: 14px;
  }

  .certificate__credential {
    gap: 12px;
    padding: 10px 0;
  }

  .certificate__credential-text strong {
    font-size: 14px;
  }

  .certificate__credential-text p {
    font-size: 12px;
  }

  .certificate__badge-wrap {
    padding: 0 20px 32px;
  }

  .certificate__badge {
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 24px 16px;
    gap: 16px;
  }

  .certificate__badge-main {
    font-size: 18px;
  }

  .certificate__badge-sub {
    font-size: 11px;
    letter-spacing: 2.5px;
  }

  /* Service area */
  .service-area {
    padding-top: 56px;
  }

  .service-area__header {
    padding: 0 20px;
    margin-bottom: 36px;
  }

  .service-area__title {
    font-size: clamp(22px, 5vw, 32px);
  }

  .service-area__label {
    font-size: 16px;
  }

  .service-area__body {
    padding: 0 20px 56px;
    gap: 20px;
  }

  .service-area__map-iframe {
    height: 380px;
  }

  .service-area__cities-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px;
  }

  .service-area__cities {
    font-size: 14px;
    line-height: 22px;
  }

  .service-area__panel {
    padding: 32px 0;
  }

  .service-area__reviews {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .service-area__reviews-title {
    font-size: 22px;
    line-height: 30px;
  }

  .service-area__reviews-desc {
    font-size: 16px;
    line-height: 26px;
  }

  .service-area__stars {
    gap: 14px;
  }

  .service-area__stars svg {
    width: 28px;
    height: 28px;
  }

  .service-area__google-btn {
    width: 100%;
    max-width: 356px;
  }

  /* Send Photo — column */
  .send-photo__inner {
    flex-direction: column;
    padding: 80px 20px 60px;
    gap: 36px;
  }

  .send-photo__left {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
  }

  .send-photo__label {
    font-size: 18px;
    letter-spacing: 1.2px;
  }

  .send-photo__title {
    font-size: clamp(40px, 9vw, 60px);
    line-height: 1.05;
    letter-spacing: 2.5px;
  }

  .send-photo__form {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Form rows — single column */
  .send-photo__form-row {
    flex-direction: column;
    gap: 0;
  }

  .send-photo__btn {
    width: 100%;
  }

  .send-photo__or-row {
    width: 100%;
    flex-wrap: nowrap;
  }

  .send-photo__or-row svg {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 40%;
    height: auto;
  }

  /* Footer */
  .footer__slogan {
    font-size: clamp(16px, 4vw, 22px);
    letter-spacing: 4px;
    white-space: normal;
    padding: 0 16px;
  }

  .footer__slogan-row {
    height: auto;
    padding: 28px 0;
  }

  .footer__logo-row {
    padding: 32px 0 28px;
  }

  .footer__logo {
    width: 200px;
    height: auto;
  }

  .footer__contacts {
    flex-direction: column;
    padding: 32px 20px;
    gap: 28px;
  }

  .footer__col {
    padding: 0;
    text-align: center;
  }

  .footer__col-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .footer__col-sep {
    width: 80%;
    height: 1px;
    margin: 0 auto;
    right: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(198, 168, 107, 0.5) 20%, rgba(198, 168, 107, 0.5) 80%, transparent 100%);
  }

  .footer__contact-label,
  .footer__contact-text,
  .footer__hours-row {
    font-size: 14px;
  }

  .footer__social-row {
    gap: 16px;
    padding-bottom: 28px;
  }
}

/* ============================================================
   MEDIA: <= 480px  (mobile portrait)
   ============================================================ */
@media (max-width: 480px) {

  /* Header */
  .header__logo img {
    width: 140px;
  }

  /* Hero */
  .hero__title {
    font-size: clamp(26px, 8vw, 36px);
  }

  .hero__subtitle {
    font-size: 14px;
  }

  /* Why Choose — 1 column */
  .why-choose__item {
    flex: 0 0 100%;
  }

  .why-choose__title {
    font-size: 24px;
  }

  /* How It Works steps */
  .step__icon svg {
    width: 80px;
  }

  /* Trust bar — keep 2x2 but tighter */
  .trust-bar__inner {
    gap: 16px 12px;
  }

  /* Send photo title */
  .send-photo__title {
    font-size: clamp(32px, 9vw, 48px);
    letter-spacing: 2px;
  }

  /* Service area reviews */
  .service-area__reviews-title {
    font-size: 20px;
  }

  .service-area__google-text {
    font-size: 12px;
    width: auto;
    left: 100px;
    right: 16px;
  }

  /* Footer slogan */
  .footer__slogan {
    font-size: 14px;
    letter-spacing: 2px;
  }
}

/* ============================================================
   Reduced motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .trust-bar__glow::after {
    animation: none;
  }

  .header__nav,
  .header__burger span,
  .compare-slider__handle,
  .btn,
  .service-card,
  .footer__social-link {
    transition: none !important;
  }
}

/* === Quote form notice === */
.send-photo__form-notice {
  min-height: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
  padding: 0;
}

.send-photo__form-notice--success {
  color: #6fcf97;
  padding: 10px 14px;
  background: rgba(111, 207, 151, 0.1);
}

.send-photo__form-notice--error {
  color: #eb5757;
  padding: 10px 14px;
  background: rgba(235, 87, 87, 0.1);
}

/* ============================================
   Service Hero
   ============================================ */

/* === HEADER OVERRIDE — solid variant over service hero === */
.header--solid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, #211710, #594334);
  height: 130px;
  z-index: 100;
}

@media (max-width: 1024px) {
  .header--solid {
    height: auto;
  }
}

/* === BREADCRUMB ===
   Y:149 from page top, inside hero. Hero starts Y:111.
   breadcrumb top = 149 - 111 = 38px from hero top */
.breadcrumb {
  position: absolute;
  top: 149px;
  left: 0;
  right: 0;
  z-index: 110;
  padding: 0 var(--container-padding);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
  line-height: 15px;
  transition: opacity 0.2s;
}

.breadcrumb__link:hover {
  opacity: 0.75;
}

.breadcrumb__sep {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.breadcrumb__current {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: #ffffff;
  line-height: 15px;
}

/* === SERVICE HERO ===
   Total section height from Figma: 583px
   Content starts at Y:199 from page top (header ~120px + 79px gap)
   Padding-top: 199px from section top accounts for header height */
.service-hero {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
}


.post-type-archive-portfolio .service-hero {
  height: 670px;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  background-color: #1a1209;
  background-image: url('../img/hero/hero-services-bg.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* Dark overlay for readability */
.service-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(11, 11, 11, 0.88) 0%,
      rgba(11, 11, 11, 0.5) 55%,
      rgba(11, 11, 11, 0.1) 100%);
}

.service-hero__content {
  position: relative;
  z-index: 1;
  /* Hero is at Y:0 in flow (header is absolute).
     Label "MOBILE LEATHER REPAIR" must be at Y:199 from page top.
     padding-top = 199px */
  padding-top: 199px;
}

.service-hero__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 19px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.95px;
  margin-bottom: 18px;
  line-height: normal;
}

/* H1: font Inter Regular 48px, uppercase, Y:240, width:730 */
.service-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 57px;
  max-width: 730px;
  margin-bottom: 0;
}

/* Gold divider line: 30px wide, Y:364 */
.service-hero__line {
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--color-accent);
  /* gap from H1 bottom: Y:364 - Y:240 - H:136 = ~12px (visual spacing) */
  margin-top: 12px;
  margin-bottom: 20px;
}

/* Body text: 15px Inter Light, width:334, Y:384 */
.service-hero__desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 15px;
  color: var(--color-text);
  line-height: 26px;
  max-width: 420px;
  /* gap from line: Y:384 - Y:364 = 20px */
  margin-bottom: 0;
}

/* Actions row: button + call link, Y:496 */
.service-hero__actions {
  display: flex;
  align-items: center;
  /* gap from desc: Y:496 - Y:384 - H:78 = ~34px */
  margin-top: 34px;
  gap: 40px;
}

/* Override btn--primary for service hero: 217x48px */
.service-hero__btn.btn--primary {
  width: 217px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* "CALL NOW в†’" text link, Y:511 */
.service-hero__call {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.service-hero__call:hover {
  color: var(--color-accent);
}

/* === Service Hero — media: <= 1200px === */
@media (max-width: 1200px) {
  .service-hero {
    height: auto;
    min-height: 520px;
    padding-bottom: 60px;
  }

  .service-hero__content {
    padding-top: 170px;
  }
}

/* === Service Hero — media: <= 1024px === */
@media (max-width: 1024px) {
  .service-hero {
    min-height: 480px;
    padding-bottom: 50px;
  }

  .service-hero__content {
    padding-top: 150px;
  }

  .service-hero__title {
    font-size: 38px;
    line-height: 46px;
  }
}

/* === Service Hero — media: <= 768px === */
@media (max-width: 768px) {
  .breadcrumb {
    top: 110px;
  }

  .service-hero {
    min-height: 420px;
    padding-bottom: 40px;
  }

  .service-hero__content {
    padding-top: 130px;
  }

  .service-hero__label {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .service-hero__title {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.2;
  }

  .service-hero__desc {
    font-size: 14px;
    max-width: 100%;
  }

  .service-hero__actions {
    margin-top: 24px;
    gap: 20px;
    flex-wrap: wrap;
  }

  .service-hero__btn.btn--primary {
    width: 100%;
    max-width: 280px;
  }
}

/* === Service Hero — media: <= 480px === */
@media (max-width: 480px) {
  .service-hero__title {
    font-size: clamp(24px, 8vw, 32px);
  }
}

/* ============================================
   Service Nav
   ============================================ */

/* SERVICE NAV BAR
   Figma: Y:600, H:94px, bg:#1f1b19
   border-top/bottom: 1px rgba(198,168,108,0.3)
   Left info block (w:172px) | divider (h:56px) | items | arrows
*/
.service-nav {
  background-color: #1f1b19;
  border-top: 1px solid rgba(198, 168, 108, 0.3);
  border-bottom: 1px solid rgba(198, 168, 108, 0.3);
  height: 94px;
}

.service-nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--container-padding);
  max-width: 1440px;
  margin: 0 auto;
  gap: 0;
}

/* Left info block: "OUR SERVICE" + sublabel */
.service-nav__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  /* width to X:252 divider minus padding:80 = 172px */
  width: 172px;
}

.service-nav__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: normal;
}

.service-nav__sublabel {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}

/* Vertical divider: h:56px, rgba(255,255,255,0.15) */
.service-nav__divider {
  width: 1px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  margin: 0 32px;
}

/* Categories list: flex, spread evenly */
.service-nav__slider {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.service-nav__track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-nav__item {
  display: flex;
  justify-content: center;
  height: auto;
}

.service-nav__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 4px;
  position: relative;
  transition: color 0.2s;
}

.service-nav__link:hover {
  color: var(--color-accent);
}

.service-nav__link:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28%;
  transform: translateX(-50%);
  width: 55%;
  height: 1px;
  background-color: var(--color-accent);
}

/* Icon container: 32x30px proportional wrapper for all icons */
.service-nav__icon {
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-nav__icon svg {
  width: 100%;
  height: 100%;
  max-width: 32px;
  max-height: 30px;
  object-fit: contain;
  display: block;
}

.service-nav__name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  text-transform: uppercase;
  text-align: left;
  line-height: normal;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: inherit;
}

/* Active state: gold color only (underline appears on hover) */
.service-nav__item--active .service-nav__link {
  color: var(--color-accent);
}

/* Nav arrows */
.service-nav__arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 24px;
}

.service-nav__arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.service-nav__arrow:hover {
  opacity: 0.7;
}

.service-nav__arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* === Service Nav — media: <= 1200px === */
@media (max-width: 1200px) {
  .service-nav__list {
    gap: 0;
  }

  .service-nav__name {
    font-size: 9px;
  }
}

/* === Service Nav — media: <= 1024px === */
@media (max-width: 1024px) {
  .service-nav {
    height: auto;
    padding: 14px 0;
  }

  .service-nav__inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .service-nav__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .service-nav__divider {
    display: none;
  }

  .service-nav__slider {
    flex: 0 0 100%;
  }

  .service-nav__item {
    min-width: 120px;
  }

  .service-nav__arrows {
    display: none;
  }

  /* Portfolio: keep arrows visible on mobile, pinned to the left/right edges
     with the slider stretched between them: [<- prev] [ slider ] [next ->] */
  .archive-portfolio .service-nav__arrows {
    display: contents;
  }

  .archive-portfolio .service-nav__inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .archive-portfolio .service-nav__slider {
    flex: 1 1 0;
    min-width: 0;
    order: 0;
  }

  .archive-portfolio .service-nav__arrow--prev {
    order: -1;
    flex-shrink: 0;
    margin-right: 6px;
  }

  .archive-portfolio .service-nav__arrow--next {
    order: 1;
    flex-shrink: 0;
    margin-left: 6px;
  }
}

/* === Service Nav — media: <= 768px === */
@media (max-width: 768px) {
  .service-nav {
    padding: 12px 0;
  }

  .service-nav__label {
    font-size: 13px;
  }

  .service-nav__sublabel {
    font-size: 11px;
  }

  .service-nav__item {
    min-width: 100px;
  }

  .service-nav__link {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    text-align: center;
  }

  .service-nav__name {
    font-size: 9px;
    white-space: normal;
    text-align: center;
    max-width: 80px;
  }
}

/* === Service Nav — media: <= 480px === */
@media (max-width: 480px) {
  .service-nav__item {
    min-width: 85px;
  }

  .service-nav__icon svg {
    max-width: 24px;
    max-height: 24px;
  }
}

/* ============================================
   Service Detail (What's Included)
   ============================================ */

/* Figma: Y:720, bg #f2d7bb, H:450px
   Layout: section is position:relative, height:450px, bg warm-light.
   __inner  — flex spacer that pushes __right to the right (same width as nav left block)
   __right  — photo flush to right edge, flex:1
   __left   — absolute via .box-position > .container, text over beige area */

.service-detail {
  width: 100%;
  background-color: #F2D7BB;
  display: flex;
  height: 450px;
  overflow: hidden;
  position: relative;
}

/* Absolute layer — holds .container with text content */
.service-detail .box-position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.service-detail .box-position .container {
  pointer-events: auto;
}

/* Spacer — same proportional width as nav left block, pushes photo to the right */
.service-detail__inner {
  flex: 0 0 42%;
}

.service-detail__left {
  display: block;
  max-width: 300px;
  padding-top: 43px;
}

/* Overtext: Inter SemiBold 12px, #8a6031, uppercase, tracking 1.8px */
.service-detail__overtext {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: #8a6031;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  line-height: normal;
  margin-bottom: 18px;
  display: block;
}

/* H2: Libre Baskerville SemiBold 24px, black, line-height 29px */
.service-detail__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: #000000;
  line-height: 29px;
  margin-bottom: 0;
}

/* Gold divider: 24px x 1px, gap from title ~16px */
.service-detail__line {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-accent);
  margin-top: 16px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* List: Inter SemiBold 12px, black, line-height 31px, tracking 0.72px */
.service-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-detail__list-item {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 31px;
  letter-spacing: 0.72px;
  padding-left: 22px;
  position: relative;
}

/* Checkmark marker — Figma vector 10x7px */
.service-detail__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M3.13091 6.82122L0.117155 3.81476C-0.0644978 3.63347 -0.0180335 3.3146 0.141272 3.15429C0.300578 2.99397 0.624721 2.93303 0.812127 3.11918L3.53382 5.82466L9.12302 0.173886C9.24007 0.0557478 9.36906 -0.00276995 9.52947 0.000100701C9.67174 0.00252972 9.82861 0.0804793 9.91358 0.208775C10.0722 0.448585 9.9981 0.706944 9.80781 0.898615L7.96053 2.7599L3.9031 6.84462C3.67653 7.07273 3.34752 7.03674 3.13113 6.82099L3.13091 6.82122Z' fill='%23C6A86C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Right col: photo fills remaining width, position relative for overlay */
.service-detail__right {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.service-detail__photo {
  width: 100%;
  max-width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Overlay "WHAT'S INCLUDED" — positioned on photo
   Figma: text X:578 from page (= 578-252=326px from photo left), Y:1016 from page top
   Photo top = Y:720 -> top offset = 1016-720 = 296px -> bottom = 450-296-47 = 107px */
.service-detail__overlay {
  position: absolute;
  left: 80px;
  bottom: 107px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-detail__overlay-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: normal;
  white-space: nowrap;
}

.service-detail__overlay-line {
  display: block;
  width: 30px;
  height: 1px;
  background-color: #3E3025;
  margin-top: 10px;
}

/* === Service Detail — media: <= 1024px === */
@media (max-width: 1024px) {
  .service-detail {
    flex-direction: column;
    height: auto;
  }

  .service-detail__inner {
    display: none;
  }

  .service-detail .box-position {
    position: relative;
    height: auto;
  }

  .service-detail .box-position .container {
    padding: 40px var(--container-padding);
  }

  .service-detail__left {
    max-width: 100%;
    padding-top: 0;
  }

  .service-detail__right {
    flex: 0 0 auto;
  }

  .service-detail__photo {
    height: 300px;
  }

  .service-detail__overlay {
    left: 40px;
    bottom: 60px;
  }
}

/* === Service Detail — media: <= 768px === */
@media (max-width: 768px) {
  .service-detail__photo {
    height: 240px;
  }

  .service-detail__overlay {
    left: 20px;
    bottom: 40px;
  }

  .service-detail__overlay-text {
    font-size: 24px;
  }
}

/* ============================================
   Works For
   ============================================ */

.works-for {
  background-color: var(--color-bg-warm-light);
  padding-bottom: 77px;
}

.single-services .works-for {
  background-color: #F2D7BB;
}

/* Section header: centered, label above title */
.works-for__header {
  max-width: 510px;
  text-align: start;
  margin: 0 auto;
  padding-bottom: 57px;
  padding-top: 50px;
}

/* Label: Inter Light 16px, #010101, uppercase, tracking 2.4px */
.works-for__label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #010101;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  line-height: normal;
  margin-bottom: 14px;
}

/* Title: Libre Baskerville SemiBold 32px, #b18e5d, uppercase, line-height 29px */
.works-for__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  color: #b18e5d;
  text-transform: uppercase;
  line-height: 29px;
  margin-bottom: 0;
}

/* Gold line: 24px x 1px, centered */
.works-for__line {
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: var(--color-accent);
  margin-top: 17px;
}

/* Cards grid: 6 columns, equal width, gap ~24px */
.works-for__grid {
  display: grid;
  grid-template-columns: repeat(6, 193px);
  gap: 0 24px;
  justify-content: center;
  padding-bottom: 0;
}

/* Card: 193x315px, gradient bg, border 0.5px gold, radius 8px */
.works-for-card {
  width: 193px;
  height: 315px;
  border: 0.5px solid var(--color-accent);
  border-radius: 8px;
  background: linear-gradient(164.08deg, #f6dfc6 1.73%, #ffeadd 110.97%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* icon top = Y:1351 - Y:1318 = 33px */
  padding-top: 33px;
  padding-bottom: 0;
  overflow: hidden;
}

.works-for-card.color {
  background: #f6dfc6;
}

/* Icon container: 116x116px */
.works-for-card__icon {
  width: 116px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 12px;
}

.works-for-card__icon svg {
  width: 116px;
  height: 116px;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Gold divider under icon: Figma shows a line between icon and title */
.works-for-card__icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-accent);
  margin-top: 4px;
}

/* Title: Inter Bold 15px uppercase */
.works-for-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: #000000;
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
  margin-top: 18px;
  margin-bottom: 0;
}

/* Desc: Inter Medium 11px, line-height 18px */
.works-for-card__desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: #000000;
  text-align: center;
  line-height: 18px;
  margin-top: 18px;
  padding: 0 20px;
}

/* === Works For - media: <= 1200px === */
@media (max-width: 1200px) {
  .works-for__grid {
    grid-template-columns: repeat(3, 193px);
    gap: 24px;
  }
}

/* === Works For - media: <= 1024px === */
@media (max-width: 1024px) {
  .works-for__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 var(--container-padding);
  }

  .works-for-card {
    width: 100%;
  }
}

/* === Works For - media: <= 768px === */
@media (max-width: 768px) {
  .works-for__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 var(--container-padding);
  }

  .works-for-card {
    height: auto;
    padding-bottom: 20px;
  }

  .works-for__header {
    padding: 20px;
  }

  .works-for__title {
    font-size: 26px;
  }
}

/* === Works For - media: <= 480px === */
@media (max-width: 480px) {
  .works-for__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .works-for-card__icon {
    width: 80px;
    height: 80px;
  }

  .works-for-card__icon svg {
    width: 80px;
    height: 80px;
  }

  .works-for-card__title {
    font-size: 12px;
  }

  .works-for-card__desc {
    font-size: 10px;
    padding: 0 12px;
  }
}

/* ============================================
   Before & After — services page context
   Темне тло + золотий заголовок + декоративні золоті лінії,
   застосовується лише на single-сторінці CPT services.
   ============================================ */

:where(.single-services, .archive-portfolio) .before-after {
  position: relative;
}

/* Single services: dark band with decorative gold lines */
.single-services .before-after {
  background-color: #322B26;
}

/* Portfolio: warm light band, no decorative lines */
.archive-portfolio .before-after {
  background-color: #F2D7BB;
}

.single-services .before-after::before,
.single-services .before-after::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(198, 168, 107, 0.5) 20%,
      rgba(198, 168, 107, 1) 50%,
      rgba(198, 168, 107, 0.5) 80%,
      transparent 100%);
}

.single-services .before-after::before {
  top: 21px;
}

.single-services .before-after::after {
  bottom: 16px;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(198, 168, 107, 0.4) 15%,
      rgba(220, 190, 130, 1) 50%,
      rgba(198, 168, 107, 0.4) 85%,
      transparent 100%);
}

/* Portfolio: reset the narrow left-aligned header from the base rule */
.archive-portfolio .before-after .section-header {
  max-width: none;
  text-align: center;
  padding-bottom: 0;
}

:where(.single-services, .archive-portfolio) .before-after .section-title {
  color: #C6A86C;
}

:where(.single-services, .archive-portfolio) .before-after__label {
  color: #fff;
}

:where(.single-services, .archive-portfolio) .btn--outline-work {
  border: 0.5px solid;
  border-color: var(--color-accent);
  color: #fdfdfd;
  background: rgba(53, 53, 53, 0.11);
}

:where(.single-services, .archive-portfolio) .btn--outline-work:hover {
  border-color: var(--color-accent);
  color: #fdfdfd;
}

/* Portfolio compare-slider — hidden state for client-side category filtering */
.compare-slider.is-hidden {
  display: none;
}

/* Portfolio hero — fallback background when Customizer image is empty */
.archive-portfolio .service-hero__bg {
  background-image: url('../img/hero/hero-services-bg.png');
  background-size: cover;
  background-position: center;
}

/* ============================================
   FAQ + Contact Form
   ============================================ */

/* Section wrapper — peach background, 2-col layout (FAQ + form) */
.faq-contact {
  background-color: #f9d3ac;
  padding: 80px 0 50px;
}

.faq-contact__inner {
  display: flex;
  gap: 57px;
  align-items: flex-start;
}

/* LEFT: FAQ */
.faq-contact__left {
  flex: 0 0 518px;
  padding: 50px 30px;
}

.faq-contact__header {
  margin-bottom: 40px;
}

.faq-contact__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: #8a6031;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  line-height: normal;
  margin-bottom: 16px;
}

.faq-contact__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: #000000;
  line-height: 29px;
  margin-bottom: 0;
}

.faq-contact__line {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-accent);
  margin-top: 16px;
}

/* FAQ accordion list */
.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  border-radius: 8px;
  overflow: hidden;
}

.faq__question {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px 0 24px;
  background-color: #f8cb9a;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: #000000;
  letter-spacing: 0.72px;
  line-height: 31px;
  transition: background-color 0.2s;
}

.faq__question:hover {
  background-color: #f5c285;
}

.faq__icon {
  font-size: 16px;
  font-weight: 300;
  color: #000000;
  flex-shrink: 0;
  transition: transform 0.25s;
  line-height: 1;
}

.faq__item--open .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fde8cc;
}

.faq__answer p {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: #3e3025;
  line-height: 22px;
  padding: 14px 24px;
  margin: 0;
}

.faq__item--open .faq__answer {
  max-height: 400px;
}

/* "Still have questions?" footer */
.faq__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.faq__footer-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  letter-spacing: 0.72px;
  line-height: 31px;
}

.faq__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: #a57c38;
  letter-spacing: 0.72px;
  line-height: 31px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.faq__footer-link:hover {
  opacity: 0.75;
}

/* RIGHT: contact form */
.faq-contact__right {
  flex: 0 0 705px;
  padding: 50px 30px;
  border: 1px solid #C6A86C;
  border-radius: 8px;
}

.faq-contact__form-header {
  margin-bottom: 32px;
}

/* Form lives inside .faq-contact__right — neutralize flex sizing from
   `.send-photo__form` (which is set for the dark contact section) */
.faq-contact__form {
  flex: 1 1 auto;
  width: 100%;
}

/* Button width must stretch to column, not fixed 650px */
.faq-contact__form .send-photo__btn {
  width: 100%;
}

/* ============================================
   FAQ + Contact — responsive
   ============================================ */

/* Tablet landscape — tighter gap, smaller left col */
@media (max-width: 1200px) {
  .faq-contact__inner {
    gap: 32px;
  }

  .faq-contact__left {
    flex: 0 0 420px;
  }

  .faq-contact__right {
    flex: 1;
  }
}

/* Tablet — stacked, single column */
@media (max-width: 1024px) {
  .faq-contact__inner {
    flex-direction: column;
    gap: 40px;
  }

  .faq-contact__left,
  .faq-contact__right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .faq-contact {
    padding: 56px 0 40px;
  }

  .faq__footer {
    display: none;
  }

  .faq-contact__left {
    padding: 0;
  }

  .faq-contact__right {
    padding: 24px 20px;
    border-radius: 8px;
  }

  .faq-contact__title {
    font-size: 22px;
    line-height: 1.3;
  }

  .faq__question {
    height: auto;
    min-height: 48px;
    padding: 12px 16px 12px 20px;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .faq-contact__right {
    padding: 20px 16px;
  }

  .faq__question {
    font-size: 11px;
    padding: 10px 14px 10px 16px;
  }
}

/* ============================================
   Related Services
   ============================================ */

.related-services {
  padding: 0 0 96px;
  background-color: #F9D3AC;
  position: relative;
}

.related-services::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198, 168, 107, 0.5) 20%, rgba(198, 168, 107, 1) 50%, rgba(198, 168, 107, 0.5) 80%, transparent 100%);
}

.related-services__header {
  max-width: 388px;
  text-align: start;
  margin: 0 auto;
  padding: 40px 0 57px;
}

.related-services__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 8px;
}

.related-services__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  color: #B18E5D;
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: 1px;
}

.related-services__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
}

.related-services__grid {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.related-card {
  display: flex;
  flex-direction: row;
  width: 410px;
  height: 125px;
  border: 0.5px solid #c6a86c;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-bg);
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.related-card:hover {
  opacity: 0.85;
}

.related-card__image {
  flex: 0 0 195px;
  width: 195px;
  height: 125px;
  overflow: hidden;
}

.related-card__image img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 16px 12px 18px;
  background: #C6A86C;
}

.related-card__title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 15px;
  color: #613929;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0;
}

.related-card__desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: #000;
  line-height: 18px;
  margin: 0;
  flex: 1;
  padding-top: 6px;
}

.related-card__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Tablet landscape */
@media (max-width: 1200px) {
  .related-services__grid {
    gap: 16px;
  }

  .related-card {
    width: 380px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .related-services__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .related-card {
    width: calc(50% - 10px);
    max-width: 410px;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .related-services {
    padding-bottom: 56px;
  }

  .related-services__grid {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .related-card {
    width: 100%;
    max-width: 480px;
  }

  .related-services__title {
    font-size: 26px;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .related-card__image {
    flex: 0 0 140px;
    width: 140px;
  }

  .related-card__title {
    font-size: 13px;
  }

  .related-card__desc {
    font-size: 11px;
  }
}