:root {
  --service-ink: #171512;
  --service-muted: #6f6961;
  --service-paper: #fffdf9;
  --service-line: #e7ded3;
  --service-orange: #ff5a00;
  --service-orange-dark: #d94700;
  --service-cream: #f4f0e8;
}

body.service-page {
  background: var(--service-cream);
}

.service-page header nav a[aria-current="page"],
.service-page header .services-trigger[aria-current="page"] {
  color: var(--service-orange-dark);
}

.service-page header nav > a[aria-current="page"]::after,
.service-page header .services-trigger[aria-current="page"]::after {
  transform: scaleX(1);
}

.service-page main.service-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0 38px;
  text-align: left;
}

.service-page main.service-main * {
  min-width: 0;
}

.service-page .service-hero-modern {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  min-height: 580px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 32px;
  background: #151515;
  color: #fff;
  box-shadow: 0 30px 80px rgba(35,22,12,.16);
  isolation: isolate;
}

.service-page .service-hero-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,90,0,.32), transparent 26%),
    radial-gradient(circle at 12% 96%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(125deg, #191919 0%, #101010 66%, #1e120c 100%);
}

.service-page .service-hero-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000);
}

.service-page .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 6vw, 80px);
}

.service-page .hero-kicker,
.service-page .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 20px;
  color: #ff8a4b;
  font: 800 12px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.service-page .hero-kicker::before,
.service-page .section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.service-page .service-hero-modern h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font: 900 clamp(46px, 6.2vw, 78px)/.94 Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.service-page .service-hero-modern h1 em {
  color: var(--service-orange);
  font-style: normal;
}

.service-page .hero-intro {
  max-width: 650px;
  margin: 26px 0 0;
  color: #cbc7c1;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.62;
}

.service-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.service-page .modern-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 850 14px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.service-page .modern-button:hover {
  transform: translateY(-2px);
}

.service-page .modern-button.primary {
  background: var(--service-orange);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255,90,0,.24);
}

.service-page .modern-button.primary:hover {
  background: #ff702b;
}

.service-page .modern-button.secondary {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff;
  backdrop-filter: blur(10px);
}

.service-page .modern-button.secondary:hover {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
}

.service-page .modern-button svg,
.service-page .text-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-page .hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin: 28px 0 0;
  padding: 0;
  color: #aaa59f;
  font-size: 13px;
  list-style: none;
}

.service-page .hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-page .hero-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--service-orange);
  box-shadow: 0 0 0 5px rgba(255,90,0,.12);
}

.service-page .hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 48px;
  overflow: hidden;
}

.service-page .hero-visual::before,
.service-page .hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}

.service-page .hero-visual::before {
  width: 400px;
  height: 400px;
}

.service-page .hero-visual::after {
  width: 290px;
  height: 290px;
  border-color: rgba(255,90,0,.3);
}

.service-page .visual-card {
  position: relative;
  z-index: 2;
  width: min(100%, 390px);
  aspect-ratio: 1 / 1.08;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 28px 60px rgba(0,0,0,.3);
  backdrop-filter: blur(18px);
  transform: rotate(3deg);
}

.service-page .visual-card::after {
  content: "";
  position: absolute;
  right: -25%;
  bottom: -26%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255,90,0,.9);
  filter: blur(8px);
  opacity: .42;
}

.service-page .visual-icon {
  position: relative;
  z-index: 1;
  width: clamp(150px, 19vw, 220px);
  height: clamp(150px, 19vw, 220px);
  color: #fff;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.25));
}

.service-page .visual-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-page .visual-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #d8d4cf;
  font: 750 12px/1.35 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-page .visual-label strong {
  color: #fff;
  font-size: 22px;
  letter-spacing: -.02em;
}

.service-page .floating-note {
  position: absolute;
  z-index: 4;
  right: 5%;
  bottom: 10%;
  max-width: 190px;
  padding: 14px 17px;
  border-radius: 16px;
  background: #fff;
  color: #1e1b18;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  font-size: 12px;
  line-height: 1.35;
}

.service-page .floating-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--service-orange-dark);
  font: 900 13px/1 Bahnschrift, "Segoe UI", sans-serif;
  text-transform: uppercase;
}

.service-page .trust-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -26px 36px 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
  border: 1px solid var(--service-line);
  border-radius: 20px;
  background: var(--service-paper);
  box-shadow: 0 18px 45px rgba(39,25,14,.11);
}

.service-page .trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 20px 26px;
}

.service-page .trust-item + .trust-item {
  border-left: 1px solid var(--service-line);
}

.service-page .trust-number {
  color: var(--service-orange);
  font: 900 28px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.04em;
}

.service-page .trust-item strong,
.service-page .trust-item span {
  display: block;
}

.service-page .trust-item strong {
  color: var(--service-ink);
  font: 850 14px/1.15 Bahnschrift, "Segoe UI", sans-serif;
}

.service-page .trust-item span {
  margin-top: 5px;
  color: var(--service-muted);
  font-size: 12px;
}

.service-page .service-section {
  padding: 108px 0 8px;
}

.service-page .section-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .6fr);
  align-items: end;
  gap: 50px;
  margin-bottom: 38px;
}

.service-page .section-kicker {
  margin-bottom: 16px;
  color: var(--service-orange-dark);
}

.service-page .section-heading h2,
.service-page .process-intro h2,
.service-page .cta-copy h2 {
  margin: 0;
  color: var(--service-ink);
  font: 900 clamp(34px, 4vw, 52px)/1 Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.service-page .section-heading > p {
  margin: 0;
  color: var(--service-muted);
  font-size: 16px;
  line-height: 1.65;
}

.service-page .modern-services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.service-page .modern-service-card {
  grid-column: span 4;
  position: relative;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--service-line);
  border-radius: 24px;
  background: rgba(255,253,249,.82);
  box-shadow: 0 18px 40px rgba(40,25,13,.055);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.service-page .modern-service-card:hover {
  transform: translateY(-5px);
  border-color: #f4b48e;
  box-shadow: 0 24px 50px rgba(80,39,11,.1);
}

.service-page .modern-service-card.featured {
  background: var(--service-orange);
  color: #fff;
  border-color: transparent;
}

.service-page .card-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a49c93;
  font: 800 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-page .modern-service-card.featured .card-index {
  color: rgba(255,255,255,.72);
}

.service-page .card-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #fff0e7;
  color: var(--service-orange-dark);
}

.service-page .card-symbol svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-page .modern-service-card.featured .card-symbol {
  color: #fff;
  background: rgba(255,255,255,.16);
}

.service-page .modern-service-card h3 {
  margin: auto 0 14px;
  color: var(--service-ink);
  font: 900 26px/1.05 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}

.service-page .modern-service-card.featured h3 {
  color: #fff;
}

.service-page .modern-service-card p {
  margin: 0;
  color: var(--service-muted);
  font-size: 15px;
  line-height: 1.62;
}

.service-page .modern-service-card.featured p {
  color: rgba(255,255,255,.86);
}

.service-page .process-panel {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 50px;
  margin-top: 92px;
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid var(--service-line);
  border-radius: 30px;
  background: var(--service-paper);
}

.service-page .process-intro p {
  margin: 20px 0 0;
  color: var(--service-muted);
  font-size: 15px;
  line-height: 1.65;
}

.service-page .process-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  counter-reset: service-step;
  list-style: none;
}

.service-page .process-list li {
  counter-increment: service-step;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--service-line);
}

.service-page .process-list li:first-child {
  padding-top: 0;
}

.service-page .process-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.service-page .process-list li::before {
  content: "0" counter(service-step);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #181716;
  color: #fff;
  font: 850 12px/1 Bahnschrift, "Segoe UI", sans-serif;
}

.service-page .process-list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--service-ink);
  font: 850 18px/1.2 Bahnschrift, "Segoe UI", sans-serif;
}

.service-page .process-list span {
  color: var(--service-muted);
  font-size: 14px;
  line-height: 1.55;
}

.service-page .service-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 42px;
  margin-top: 92px;
  padding: clamp(36px, 5vw, 62px);
  overflow: hidden;
  border-radius: 30px;
  background: #181716;
  color: #fff;
}

.service-page .service-cta::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--service-orange);
  opacity: .24;
  filter: blur(2px);
}

.service-page .cta-copy,
.service-page .cta-actions {
  position: relative;
  z-index: 1;
}

.service-page .cta-copy h2 {
  max-width: 700px;
  color: #fff;
}

.service-page .cta-copy p {
  max-width: 650px;
  margin: 18px 0 0;
  color: #bbb6af;
  font-size: 15px;
  line-height: 1.6;
}

.service-page .cta-actions {
  display: grid;
  gap: 10px;
  min-width: 230px;
}

.service-page .cta-meta {
  color: #918b84;
  font-size: 11px;
  text-align: center;
}

.service-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #aaa39c;
  font-size: 12px;
}

.service-page .breadcrumb a:hover {
  color: #fff;
}

.service-page .emergency-hero .service-hero-modern::before {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,90,0,.5), transparent 27%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(125deg, #151515 0%, #0b0b0b 64%, #2b1308 100%);
}

.service-page .emergency-badge {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8,8,8,.6);
  color: #fff;
  font: 800 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.service-page .emergency-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43d879;
  box-shadow: 0 0 0 5px rgba(67,216,121,.14);
}

@media (max-width: 900px) {
  .service-page .service-hero-modern {
    grid-template-columns: 1fr;
  }

  .service-page .hero-copy {
    padding-bottom: 30px;
  }

  .service-page .hero-visual {
    min-height: 420px;
    padding-top: 10px;
  }

  .service-page .visual-card {
    max-width: 360px;
  }

  .service-page .floating-note {
    right: calc(50% - 205px);
  }

  .service-page .section-heading,
  .service-page .process-panel,
  .service-page .service-cta {
    grid-template-columns: 1fr;
  }

  .service-page .modern-service-card {
    grid-column: span 6;
  }

  .service-page .modern-service-card:last-child:nth-child(odd) {
    grid-column: 4 / span 6;
  }

  .service-page .trust-rail {
    margin-inline: 22px;
  }
}

@media (max-width: 620px) {
  .service-page main.service-main {
    width: min(100% - 24px, 1180px);
    padding-top: 12px;
  }

  .service-page .service-hero-modern {
    min-height: 0;
    border-radius: 24px;
  }

  .service-page .hero-copy {
    padding: 38px 24px 24px;
  }

  .service-page .service-hero-modern h1 {
    font-size: clamp(39px, 13vw, 58px);
  }

  .service-page .hero-intro {
    font-size: 16px;
  }

  .service-page .hero-actions {
    display: grid;
  }

  .service-page .modern-button {
    width: 100%;
  }

  .service-page .hero-points {
    display: grid;
    gap: 12px;
  }

  .service-page .hero-visual {
    min-height: 360px;
    padding: 16px 24px 40px;
  }

  .service-page .visual-card {
    width: min(88%, 310px);
    padding: 28px;
  }

  .service-page .floating-note {
    right: 18px;
    bottom: 22px;
  }

  .service-page .trust-rail {
    grid-template-columns: 1fr;
    margin: -14px 14px 0;
  }

  .service-page .trust-item {
    min-height: 76px;
    padding: 15px 20px;
  }

  .service-page .trust-item + .trust-item {
    border-top: 1px solid var(--service-line);
    border-left: 0;
  }

  .service-page .service-section {
    padding-top: 78px;
  }

  .service-page .section-heading {
    gap: 18px;
  }

  .service-page .modern-services-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-page .modern-service-card,
  .service-page .modern-service-card:last-child:nth-child(odd) {
    grid-column: auto;
    min-height: 270px;
  }

  .service-page .process-panel {
    gap: 34px;
    margin-top: 72px;
    padding: 30px 24px;
    border-radius: 24px;
  }

  .service-page .service-cta {
    gap: 28px;
    margin-top: 72px;
    padding: 34px 24px;
    border-radius: 24px;
  }

  .service-page .cta-actions {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .service-page .hero-copy > *,
  .service-page .visual-card,
  .service-page .floating-note {
    animation: service-enter .7s cubic-bezier(.2,.7,.2,1) both;
  }

  .service-page .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .service-page .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .service-page .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .service-page .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .service-page .visual-card { animation-delay: .12s; }
  .service-page .floating-note { animation-delay: .28s; }
}

@keyframes service-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .service-page *,
  .service-page *::before,
  .service-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Page serrurerie claire et synthétique */
.locksmith-clear .locksmith-main {
  padding-bottom: 30px;
}

.locksmith-clear-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 540px;
  overflow: hidden;
  border-radius: 32px;
  background: #161514;
  color: #fff;
  box-shadow: 0 28px 70px rgba(38,24,13,.16);
}

.locksmith-clear-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 78px);
}

.locksmith-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #ff8a4b;
  font: 850 12px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.locksmith-eyebrow span {
  width: 28px;
  height: 2px;
  background: currentColor;
}

.locksmith-clear-hero h1 {
  margin: 0;
  color: #fff;
  font: 900 clamp(30px, 3.8vw, 46px)/1.08 Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.04em;
}

.locksmith-clear-hero h1 em {
  color: var(--service-orange);
  font-style: normal;
}

.locksmith-lead {
  max-width: 590px;
  margin: 24px 0 28px;
  color: #c9c5bf;
  font-size: 18px;
  line-height: 1.55;
}

.locksmith-call {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  width: min(100%, 410px);
  min-height: 78px;
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--service-orange);
  color: #fff;
  box-shadow: 0 18px 34px rgba(255,90,0,.22);
  transition: transform .2s ease, background .2s ease;
}

.locksmith-call:hover {
  transform: translateY(-2px);
  background: #ff702b;
}

.locksmith-call svg {
  width: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.locksmith-call small,
.locksmith-call strong {
  display: block;
}

.locksmith-call small {
  margin-bottom: 4px;
  font: 750 10px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .84;
}

.locksmith-call strong {
  font: 900 22px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .03em;
}

.locksmith-call b {
  font-size: 24px;
}

.locksmith-whatsapp-call {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  width: min(100%, 410px);
  min-height: 78px;
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 18px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 18px 34px rgba(37,211,102,.2);
  transition: transform .2s ease, background .2s ease;
}

.locksmith-whatsapp-call:hover {
  transform: translateY(-2px);
  background: #1fbd5a;
}

.locksmith-whatsapp-call .whatsapp-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
}

.locksmith-whatsapp-call .whatsapp-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.locksmith-whatsapp-call small,
.locksmith-whatsapp-call strong {
  display: block;
}

.locksmith-whatsapp-call small {
  margin-bottom: 4px;
  font: 750 10px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
}

.locksmith-whatsapp-call strong {
  font: 900 22px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .03em;
}

.locksmith-whatsapp-call b {
  font-size: 24px;
}

.locksmith-clear-visual {
  position: relative;
  overflow: hidden;
  background: #171513;
}

.locksmith-clear-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.16) 0%, rgba(12,11,10,.04) 48%, rgba(12,11,10,.82) 100%);
  pointer-events: none;
}

.locksmith-clear-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  filter: saturate(.82) contrast(1.04);
}

.locksmith-live {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  background: rgba(0,0,0,.28);
  font: 800 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.locksmith-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38d879;
  box-shadow: 0 0 0 5px rgba(56,216,121,.12);
}

.locksmith-area {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.locksmith-area img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.32));
}

.locksmith-area span {
  color: #aaa49d;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.locksmith-area strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font: 850 15px/1 Bahnschrift, "Segoe UI", sans-serif;
}

.locksmith-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--service-line);
  border-radius: 22px;
  background: var(--service-paper);
}

.locksmith-facts article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 15px;
  padding: 25px;
}

.locksmith-facts article + article {
  border-left: 1px solid var(--service-line);
}

.locksmith-facts article > span {
  color: var(--service-orange);
  font: 900 20px/1 Bahnschrift, "Segoe UI", sans-serif;
}

.locksmith-facts strong {
  display: block;
  margin-bottom: 5px;
  color: var(--service-ink);
  font: 850 16px/1.1 Bahnschrift, "Segoe UI", sans-serif;
}

.locksmith-facts p {
  margin: 0;
  color: var(--service-muted);
  font-size: 13px;
  line-height: 1.45;
}

.locksmith-steps {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: 55px;
  margin-top: 20px;
  padding: 44px 48px;
  border: 1px solid var(--service-line);
  border-radius: 22px;
  background: var(--service-paper);
}

.locksmith-steps .locksmith-eyebrow {
  margin-bottom: 13px;
  color: var(--service-orange-dark);
}

.locksmith-steps h2 {
  margin: 0;
  color: var(--service-ink);
  font: 900 clamp(31px, 4vw, 46px)/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.04em;
}

.locksmith-steps ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locksmith-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  border-bottom: 1px solid var(--service-line);
  color: var(--service-muted);
  font-size: 14px;
}

.locksmith-steps li:last-child {
  border-bottom: 0;
}

.locksmith-steps li b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1b1917;
  color: #fff;
  font: 800 11px/1 Bahnschrift, "Segoe UI", sans-serif;
}

.locksmith-steps li strong {
  color: var(--service-ink);
}

.locksmith-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 20px;
  padding: 30px 36px;
  border-radius: 22px;
  background: var(--service-orange);
  color: #fff;
}

.locksmith-final div span,
.locksmith-final div strong {
  display: block;
}

.locksmith-final div span {
  margin-bottom: 5px;
  font: 750 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}

.locksmith-final div strong {
  font: 900 24px/1.1 Bahnschrift, "Segoe UI", sans-serif;
}

.locksmith-final > a {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 13px;
  background: #fff;
  color: #1b1917;
  font: 900 14px/1 Bahnschrift, "Segoe UI", sans-serif;
}

@media (max-width: 800px) {
  .locksmith-clear-hero,
  .locksmith-steps {
    grid-template-columns: 1fr;
  }

  .locksmith-clear-visual {
    min-height: 390px;
  }

  .locksmith-facts {
    grid-template-columns: 1fr;
  }

  .locksmith-facts article + article {
    border-top: 1px solid var(--service-line);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .locksmith-clear-copy {
    padding: 40px 24px 30px;
  }

  .locksmith-clear-hero {
    border-radius: 24px;
  }

  .locksmith-clear-hero h1 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.12;
  }

  .locksmith-call,
  .locksmith-whatsapp-call {
    width: 100%;
  }

  .locksmith-clear-visual {
    min-height: 330px;
  }

  .locksmith-live {
    top: 20px;
    right: 20px;
  }

  .locksmith-area {
    right: 20px;
    bottom: 20px;
    width: 138px;
    padding: 10px 9px;
  }

  .locksmith-area img {
    width: 68px;
    height: 68px;
  }

  .locksmith-area strong {
    font-size: 13px;
  }

  .locksmith-facts article {
    padding: 21px;
  }

  .locksmith-steps {
    gap: 26px;
    padding: 30px 24px;
  }

  .locksmith-final {
    align-items: stretch;
    flex-direction: column;
    padding: 28px 24px;
  }

  .locksmith-final > a {
    justify-content: space-between;
  }
}

/* Rubriques compactes du menu Nos services */
.catalog-clear .catalog-main > .service-hero-modern,
.catalog-clear .catalog-main > .trust-rail,
.catalog-clear .catalog-main > .service-section,
.catalog-clear .catalog-main > .process-panel,
.catalog-clear .catalog-main > .service-cta {
  display: none;
}

.catalog-clear .catalog-main {
  padding-bottom: 30px;
}

.catalog-cover {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border-radius: 28px;
  background: #171614;
  color: #fff;
  box-shadow: 0 20px 48px rgba(40,25,13,.11);
}

.catalog-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.76) 100%);
  pointer-events: none;
}

.catalog-cover > img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.catalog-cover-keys > img {
  object-position: center 56%;
}

.catalog-cover-workshop > img {
  object-position: 54% 52%;
}

.catalog-cover-badges > img {
  object-position: 25% 42%;
}

.catalog-cover-plate > img {
  object-position: center 58%;
}

.catalog-cover-copy {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 4vw, 48px);
  bottom: clamp(26px, 4vw, 44px);
  left: clamp(24px, 4vw, 48px);
}

.catalog-cover-copy span,
.catalog-cover-copy h1 {
  display: block;
}

.catalog-cover-copy span {
  margin-bottom: 10px;
  color: #ff9a64;
  font: 900 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.catalog-cover-copy h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font: 900 clamp(36px, 5vw, 58px)/.98 Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.catalog-hero {
  --catalog-accent: #ff5a00;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 520px;
  overflow: hidden;
  border-radius: 32px;
  background: #171614;
  color: #fff;
  box-shadow: 0 28px 70px rgba(38,24,13,.15);
}

.catalog-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 76px);
}

.catalog-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #ff8a4b;
  font: 850 12px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.catalog-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.catalog-hero h1 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font: 900 clamp(46px, 5.7vw, 72px)/.97 Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.catalog-hero h1 em {
  color: var(--catalog-accent);
  font-style: normal;
}

.catalog-lead {
  max-width: 610px;
  margin: 24px 0 30px;
  color: #c9c5bf;
  font-size: 17px;
  line-height: 1.55;
}

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.catalog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 21px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: 850 14px/1 Bahnschrift, "Segoe UI", sans-serif;
  transition: transform .2s ease, background .2s ease;
}

.catalog-button:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
}

.catalog-button.primary {
  border-color: transparent;
  background: var(--catalog-accent);
  box-shadow: 0 16px 30px rgba(255,90,0,.22);
}

.catalog-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255,90,0,.27), transparent 30%), linear-gradient(145deg, #25211e, #100f0e);
}

.catalog-art::before,
.catalog-art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
}

.catalog-art::before {
  width: 410px;
  height: 410px;
}

.catalog-art::after {
  width: 290px;
  height: 290px;
  border-color: rgba(255,90,0,.22);
}

.catalog-art > svg {
  position: relative;
  z-index: 1;
  width: min(58%, 260px);
  max-height: 280px;
  fill: none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.28));
}

.catalog-art .accent {
  stroke: var(--catalog-accent);
  stroke-width: 3.2;
}

.catalog-art-photo::before {
  display: none;
}

.catalog-art-photo::after {
  z-index: 1;
  width: auto;
  height: auto;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.52));
}

.catalog-art-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

.catalog-art-plate > img {
  object-position: center 58%;
}

.catalog-art-keys > img {
  object-position: center 56%;
}

.catalog-art-label {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}

.catalog-art-label span {
  color: #aba59e;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-art-label strong {
  font: 850 14px/1 Bahnschrift, "Segoe UI", sans-serif;
  text-align: right;
}

.catalog-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.catalog-service {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--service-line);
  border-radius: 22px;
  background: var(--service-paper);
  box-shadow: 0 16px 36px rgba(40,25,13,.045);
}

.catalog-service.featured {
  border-color: transparent;
  background: var(--service-orange);
  color: #fff;
}

.catalog-service-number {
  color: var(--service-orange);
  font: 900 13px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .1em;
}

.catalog-service.featured .catalog-service-number {
  color: rgba(255,255,255,.74);
}

.catalog-service h2 {
  margin: auto 0 11px;
  color: var(--service-ink);
  font: 900 24px/1.05 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}

.catalog-service.featured h2 {
  color: #fff;
}

.catalog-service p {
  margin: 0;
  color: var(--service-muted);
  font-size: 14px;
  line-height: 1.55;
}

.catalog-service.featured p {
  color: rgba(255,255,255,.86);
}

.catalog-workshop {
  position: relative;
  min-height: 360px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 24px;
  background: #171614;
  box-shadow: 0 18px 42px rgba(40,25,13,.08);
}

.catalog-workshop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.78));
  pointer-events: none;
}

.catalog-workshop > img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: 54% 55%;
}

.catalog-workshop-title {
  position: absolute;
  z-index: 1;
  right: 30px;
  bottom: 28px;
  left: 30px;
  color: #fff;
}

.catalog-workshop-title span,
.catalog-workshop-title strong {
  display: block;
}

.catalog-workshop-title span {
  margin-bottom: 8px;
  color: #ff9a64;
  font: 900 11px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalog-workshop-title strong {
  max-width: 620px;
  font: 900 clamp(28px, 4vw, 44px)/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
}

.catalog-work {
  position: relative;
  margin-top: 0;
  min-height: 480px;
  overflow: hidden;
  border-radius: 28px;
  background: #171614;
  box-shadow: 0 20px 48px rgba(40,25,13,.11);
}

.catalog-work-slides,
.catalog-work-slide {
  position: absolute;
  inset: 0;
}

.catalog-work-slide {
  z-index: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .55s ease, transform .8s ease;
}

.catalog-work-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.catalog-work-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.catalog-auto-photo-contained {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #171614;
}

.catalog-auto-photo-contained::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34px;
  background: url("assets/images/cles-automobiles-client-v3.jpg") center 58% / cover no-repeat;
  filter: blur(24px) brightness(.56) saturate(.82);
  transform: scale(1.08);
}

.catalog-auto-photo-contained::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(18, 17, 16, .16);
}

.catalog-auto-photo-contained img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35));
}

.catalog-work-badges .catalog-work-slide:nth-child(1) img {
  object-position: center 47%;
}

.catalog-work-badges .catalog-work-slide:nth-child(2) img,
.catalog-work-badges .catalog-work-slide:nth-child(3) img {
  object-position: center 57%;
}

.catalog-work-keys .portrait-key-photo {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #171614;
}

.catalog-work-keys .portrait-key-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -36px;
  background: url("assets/images/doublecle1-web.jpg") center 56% / cover no-repeat;
  filter: blur(24px) brightness(.58) saturate(.82);
  transform: scale(1.08);
}

.catalog-work-keys .portrait-key-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(18, 17, 16, .2);
}

.catalog-work-keys .portrait-key-photo img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 0 44px rgba(0, 0, 0, .5);
}

.catalog-work-keys .catalog-work-slide:nth-child(2) img,
.catalog-work-cobbler .catalog-work-slide img {
  object-position: 54% 54%;
}

.catalog-work-plate .catalog-work-slide img {
  object-position: center 58%;
}

.catalog-work-locksmith .catalog-work-slide img {
  object-position: center 52%;
}

.catalog-work::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 35%, transparent 60%, rgba(0,0,0,.46));
  pointer-events: none;
}

.catalog-work-title {
  position: absolute;
  z-index: 3;
  top: 30px;
  left: 32px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 14px;
  background: rgba(18,17,16,.52);
  color: #fff;
  font: 900 clamp(26px, 3.6vw, 42px)/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
  backdrop-filter: blur(10px);
}

.catalog-emergency-panel {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 24px;
  left: 30px;
  display: grid;
  grid-template-columns: 1.05fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(18,17,16,.78);
  color: #fff;
  backdrop-filter: blur(12px);
}

.catalog-emergency-panel span,
.catalog-emergency-panel strong {
  display: block;
}

.catalog-emergency-panel span {
  margin-bottom: 7px;
  color: #ff9a64;
  font: 900 10px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalog-emergency-panel .availability span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.catalog-emergency-panel .availability i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42d67a;
  box-shadow: 0 0 0 5px rgba(66,214,122,.13);
}

.catalog-emergency-panel strong {
  font: 900 22px/1 Bahnschrift, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
}

.catalog-emergency-panel .area strong {
  font-size: 17px;
}

.catalog-emergency-panel > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--service-orange);
  color: #fff;
  font: 900 15px/1 Bahnschrift, "Segoe UI", sans-serif;
  box-shadow: 0 14px 28px rgba(255,90,0,.25);
}

.catalog-emergency-panel > a b {
  font-weight: 900;
}

.catalog-work-dots,
.catalog-work-arrows {
  position: absolute;
  z-index: 3;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-work-dots {
  left: 30px;
}

.catalog-work-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.catalog-work-dots button.is-active {
  width: 30px;
  background: var(--service-orange);
}

.catalog-work-arrows {
  right: 28px;
}

.catalog-work-arrows button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(18,17,16,.56);
  color: #fff;
  font: 800 20px/1 "Segoe UI", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}

.catalog-work-arrows button:hover {
  transform: translateY(-2px);
  background: var(--service-orange);
}

.catalog-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 20px;
  padding: 29px 34px;
  border-radius: 22px;
  background: #191817;
  color: #fff;
}

.catalog-bottom span,
.catalog-bottom strong {
  display: block;
}

.catalog-bottom span {
  margin-bottom: 5px;
  color: #9f9992;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-bottom strong {
  font: 900 23px/1.1 Bahnschrift, "Segoe UI", sans-serif;
}

.catalog-bottom a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 13px;
  background: #fff;
  color: #1b1917;
  font: 900 14px/1 Bahnschrift, "Segoe UI", sans-serif;
}

@media (max-width: 800px) {
  .catalog-hero {
    grid-template-columns: 1fr;
  }

  .catalog-art {
    min-height: 380px;
  }

  .catalog-services {
    grid-template-columns: 1fr;
  }

  .catalog-service {
    min-height: 190px;
  }
}

@media (max-width: 620px) {
  .catalog-cover,
  .catalog-cover > img {
    min-height: 460px;
    height: 460px;
  }

  .catalog-cover {
    border-radius: 22px;
  }

  .catalog-cover-copy {
    right: 22px;
    bottom: 24px;
    left: 22px;
  }

  .catalog-cover-copy h1 {
    font-size: 35px;
  }

  .catalog-cover-keys > img {
    object-position: center 58%;
  }

  .catalog-cover-workshop > img {
    object-position: 55% center;
  }

  .catalog-cover-badges > img {
    object-position: 31% center;
  }

  .catalog-cover-plate > img {
    object-position: center 60%;
  }

  .catalog-hero {
    border-radius: 24px;
  }

  .catalog-copy {
    padding: 40px 24px 30px;
  }

  .catalog-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .catalog-actions {
    display: grid;
  }

  .catalog-button {
    width: 100%;
  }

  .catalog-art {
    min-height: 330px;
  }

  .catalog-art-label {
    right: 20px;
    bottom: 20px;
    left: 20px;
  }

  .catalog-service {
    min-height: 178px;
    padding: 23px;
  }

  .catalog-workshop,
  .catalog-workshop > img {
    min-height: 350px;
    height: 350px;
  }

  .catalog-workshop {
    border-radius: 20px;
  }

  .catalog-workshop > img {
    object-position: 54% center;
  }

  .catalog-workshop-title {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .catalog-workshop-title strong {
    font-size: 29px;
  }

  .catalog-work {
    min-height: 460px;
    border-radius: 22px;
  }

  .catalog-work-slide img {
    object-position: center 62%;
  }

  .catalog-work-badges .catalog-work-slide img {
    object-position: center center;
  }

  .catalog-work-keys .portrait-key-photo img {
    object-position: center;
  }

  .catalog-work-keys .catalog-work-slide:nth-child(2) img,
  .catalog-work-cobbler .catalog-work-slide img {
    object-position: 55% center;
  }

  .catalog-work-plate .catalog-work-slide img {
    object-position: center 60%;
  }

  .catalog-work-locksmith .catalog-work-slide img {
    object-position: 57% center;
  }

  .catalog-work-title {
    top: 20px;
    left: 20px;
    padding: 12px 15px;
    font-size: 28px;
  }

  .catalog-emergency-panel {
    right: 18px;
    bottom: 18px;
    left: 18px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    border-radius: 17px;
  }

  .catalog-emergency-panel .availability,
  .catalog-emergency-panel .area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }

  .catalog-emergency-panel span {
    margin-bottom: 0;
  }

  .catalog-emergency-panel strong {
    font-size: 20px;
    text-align: right;
  }

  .catalog-emergency-panel .area strong {
    font-size: 15px;
  }

  .catalog-emergency-panel > a {
    min-height: 52px;
  }

  .catalog-work-dots {
    bottom: 23px;
    left: 22px;
  }

  .catalog-work-arrows {
    right: 20px;
    bottom: 18px;
  }

  .catalog-work-arrows button {
    width: 44px;
    height: 44px;
  }

  .catalog-bottom {
    align-items: stretch;
    flex-direction: column;
    padding: 27px 24px;
  }
}