/* ==========================================================================
   FULL EXCELLENCE DETAILING — Pages prestations (/renovation-carrosserie-optique-phares, …)
   Nécessite main.css (variables, en-tête, boutons, cartes .svc-grid).
   ========================================================================== */
.page-service {
  --panel:   linear-gradient(180deg, #101010, #0c0c0c);
  --hero-bg: radial-gradient(80% 120% at 100% 0%, rgb(var(--gold-rgb) / .12), transparent 60%), linear-gradient(180deg, #0d0d0d, var(--ink));
}
[data-theme="light"] .page-service {
  --panel:   #FFFFFF;
  --hero-bg: radial-gradient(80% 120% at 100% 0%, rgb(var(--gold-rgb) / .14), transparent 60%), linear-gradient(180deg, #F4F0E6, var(--ink));
}

/* En-tête du site : toujours opaque (pas de vidéo derrière) */
.page-service .header {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-gold);
}
.page-service .header::before { opacity: 0; }

.svc-page { padding-top: calc(var(--topbar-h) + var(--header-h)); }

/* ---------- En-tête de page ----------
   Diagonale dorée (.svc-hero__art) : même géométrie que la découpe de la photo, du haut jusqu'au séparateur.
   Photo facultative (.svc-hero--media) : pleine hauteur à droite, découpée le long de la diagonale. */
.svc-hero {
  --art: 46;                    /* largeur de la zone photo, en % de l'écran (depuis la droite) */
  --art-top: 30%;               /* départ de la diagonale en haut, dans cette zone */
  position: relative; overflow: hidden;
  padding: clamp(40px, 7vh, 72px) 0 clamp(48px, 8vh, 84px);
  border-bottom: 1px solid var(--line); background: var(--hero-bg);
}
.svc-hero--media { display: flex; align-items: center; min-height: clamp(560px, 72vh, 760px); }
.svc-hero--media > .container { width: 100%; }
.svc-hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--art) * 1%); pointer-events: none; }
.svc-hero__media { position: absolute; inset: 0; margin: 0; clip-path: polygon(var(--art-top) 0, 100% 0, 100% 100%, 0 100%); animation: svcMedia 1.5s var(--ease-cine) .1s both; }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); animation: svcZoom 2.4s var(--ease-out) .1s both; }
.svc-hero__media::after { /* fondu discret vers le haut et le bas du bandeau */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, .28) 0%, transparent 26%, transparent 74%, rgba(5, 5, 5, .38) 100%);
}
.svc-hero__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svc-hero__line line { stroke: var(--line-gold); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: svcLine 1.6s var(--ease-out) .2s forwards; }
.svc-hero--media .svc-hero__line line { stroke: var(--gold); stroke-width: 1.5; }
.svc-hero__line .l-mob { display: none; }
.svc-hero__credit { position: absolute; right: 16px; bottom: 12px; z-index: 1; font-size: 10.5px; letter-spacing: .06em; color: rgba(244, 241, 234, .72); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
@keyframes svcMedia { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes svcZoom { from { transform: scale(1.1); } }
@keyframes svcLine { to { stroke-dashoffset: 0; } }
@keyframes svcFade { from { opacity: 0; } }

.svc-hero__grid { position: relative; z-index: 1; }
/* Le texte s'arrête avant le bas de la diagonale (point le plus à gauche), quelle que soit la largeur d'écran */
.svc-hero__content { max-width: min(700px, calc((100 - var(--art)) * 1vw - 48px - max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)))); }
.svc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--bone-50); }
.svc-crumbs a { transition: color .3s; }
.svc-crumbs a:hover { color: var(--gold-light); }
.svc-crumbs .icon { width: 12px; height: 12px; color: var(--gold); }
.svc-crumbs [aria-current] { color: var(--bone); }
.svc-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; font-family: var(--f-tech); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.svc-hero__eyebrow .icon { width: 22px; height: 22px; }
.svc-hero__title { font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.05; letter-spacing: -.035em; }
.svc-hero__title em, .svc-h2 em {
  font-family: var(--f-accent); font-style: italic; font-weight: 500; font-size: 1.07em; padding-right: .06em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-hero__lead { margin-top: 22px; font-size: 15.5px; line-height: 1.8; color: var(--bone-70); }
.svc-hero__lead strong { color: var(--bone); font-weight: 600; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.svc-crumbs, .svc-hero__eyebrow, .svc-hero__title, .svc-hero__lead, .svc-hero__actions { animation: svcRise .9s var(--ease-out) both; }
.svc-hero__eyebrow { animation-delay: .06s; }
.svc-hero__title { animation-delay: .12s; }
.svc-hero__lead { animation-delay: .2s; }
.svc-hero__actions { animation-delay: .28s; }
@keyframes svcRise { from { opacity: 0; transform: translateY(14px); } }
/* ---------- Sections ---------- */
.svc-section { padding-block: clamp(56px, 10vh, 112px); }
.svc-section + .svc-section { border-top: 1px solid var(--line); }
.svc-section--alt { background: radial-gradient(70% 90% at 0% 0%, rgb(var(--gold-rgb) / .07), transparent 60%); }
.svc-h2 { margin-top: 18px; font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.03em; }
.svc-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.svc-text { display: grid; gap: 16px; font-size: 15.5px; line-height: 1.85; color: var(--bone-70); }
.svc-text strong { color: var(--bone); font-weight: 600; }
.svc-text h3 { margin-top: 10px; font-weight: 500; font-size: 18px; color: var(--bone); }

/* Problèmes traités */
.svc-issues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(32px, 5vh, 48px); border: 1px solid var(--line); background: var(--line); }
.svc-issue { padding: clamp(22px, 2.4vw, 30px); background: var(--ink); transition: background-color .35s; }
.svc-issue:hover { background: rgb(var(--gold-rgb) / .04); }
.svc-issue__icon { transition: border-color .35s, background-color .35s; }
.svc-issue:hover .svc-issue__icon { border-color: var(--gold); background: rgb(var(--gold-rgb) / .08); }
.svc-issue__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-gold); color: var(--gold); }
.svc-issue__icon .icon { width: 20px; height: 20px; }
.svc-issue h3 { margin-top: 16px; font-weight: 500; font-size: 16.5px; line-height: 1.35; }
.svc-issue p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--bone-70); }

/* Méthode : frise chronologique. Chaque étape s'allume à son tour (prestation.js → .is-on)
   et le segment doré qui la relie à la suivante se remplit. */
.svc-steps {
  --gap: clamp(18px, 2.4vw, 36px);
  counter-reset: step; list-style: none; margin: clamp(40px, 6vh, 60px) 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--gap);
}
.svc-step { position: relative; z-index: 1; }
.svc-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-gold); background: var(--ink); color: var(--gold);
  font-family: var(--f-tech); font-size: 10.5px; letter-spacing: .06em;
  transition: box-shadow .6s var(--ease-out);
}
.svc-step:not(:last-child)::after { /* segment vers l'étape suivante : rail + remplissage */
  content: ""; position: absolute; top: 23px; left: 46px; width: calc(100% + var(--gap) - 46px); height: 1px;
  background: linear-gradient(90deg, #D6C590, #AA9763) left center / 0% 100% no-repeat, var(--line-gold);
  transition: background-size .5s var(--ease-out) .12s;
}
.svc-step.is-on::before { background: var(--gold-grad); color: var(--on-gold); border-color: transparent; box-shadow: 0 0 0 7px rgb(var(--gold-rgb) / .13); }
.svc-step.is-on:not(:last-child)::after { background-size: 100% 100%, auto; }
.svc-step h3 { margin-top: 24px; font-weight: 500; font-size: 17px; line-height: 1.35; }
.svc-step p { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--bone-70); }
/* Avantages */
.svc-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin-top: clamp(28px, 4vh, 40px); }
.svc-benefit { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.svc-benefit .icon { width: 24px; height: 24px; color: var(--gold); }
.svc-benefit h3 { font-weight: 500; font-size: 16.5px; }
.svc-benefit p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--bone-70); }

/* Comparateur avant / après */
.compare { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line-gold); background: #0b0b0b; user-select: none; touch-action: pan-y; --pos: 50%; }
.compare__layer { position: absolute; inset: 0; }
.compare__layer--after { clip-path: inset(0 0 0 var(--pos)); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--gold-light) 10%, var(--gold-light) 90%, transparent);
  box-shadow: 0 0 16px rgb(var(--gold-rgb) / .55);
}
.compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  background: rgba(8, 8, 8, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDBB86' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 26px no-repeat;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease-out);
}
.compare:hover .compare__handle::after, .compare:focus-within .compare__handle::after { transform: scale(1.08); }
.compare__tag {
  position: absolute; top: 20px; z-index: 2; padding: 9px 14px; pointer-events: none;
  background: rgba(10, 10, 10, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(170 151 99 / .55); color: #F4F1EA;
  font-family: var(--f-tech); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
}
.compare__tag--before { left: 20px; }
.compare__tag--after { right: 20px; }
.compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible ~ .compare__handle::after { outline: 2px solid var(--gold-light); outline-offset: 4px; }

/* Rénovation d'optiques : 3 étapes schématisées (lentille de plus en plus claire) */
.svc-optics { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.optic-steps { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.optic-steps::before { content: ""; position: absolute; left: 44px; top: 50px; bottom: 50px; width: 1px; background: linear-gradient(180deg, #b48f47, var(--gold), #8aa0ab); opacity: .6; }
.optic-step { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); }
.optic-step:last-child { border-bottom: 0; }
.optic-step__num { font-family: var(--f-tech); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.optic-step h3 { margin-top: 8px; font-weight: 500; font-size: 18px; line-height: 1.3; }
.optic-step p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--bone-70); }
.optic-lens {
  position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .35), 0 14px 30px rgba(0, 0, 0, .45);
}
.optic-lens::before { /* réflecteur et ampoule */
  content: ""; position: absolute; inset: 20%; border-radius: 50%;
  background: radial-gradient(circle, #f6f6f6 0 13%, #858585 14% 32%, #1c1c1c 33% 60%, #444 61% 64%, #121212 65%);
}
.optic-lens::after { /* reflet */ content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .6), transparent 30%); }
.optic-step--1 .optic-lens { background: radial-gradient(circle, #cfa85e, #86652c 78%); }
.optic-step--1 .optic-lens::before { filter: blur(4px); opacity: .5; }
.optic-step--1 .optic-lens::after { background: radial-gradient(circle at 30% 25%, rgba(255, 238, 196, .28), transparent 42%), repeating-radial-gradient(circle, rgba(255, 229, 170, .1) 0 2px, transparent 2px 5px); }
.optic-step--2 .optic-lens { background: radial-gradient(circle, #5f5a51, #232220 78%); }
.optic-step--2 .optic-lens::before { filter: blur(1.4px); opacity: .85; }
.optic-step--2 .optic-lens::after { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .38), transparent 34%); }
.optic-step--3 .optic-lens {
  background: radial-gradient(circle, #2c3b45, #0a1014 78%); border-color: var(--gold);
  box-shadow: 0 0 0 5px rgb(var(--gold-rgb) / .16), 0 0 28px rgb(var(--gold-rgb) / .35), inset 0 0 0 6px rgba(0, 0, 0, .3);
}
/* Zone d'intervention */
.svc-zone { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.svc-zone__card { padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--line); background: var(--panel); }
.svc-zone__card h3 { font-family: var(--f-tech); font-size: 9.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.svc-zone__card address { margin-top: 14px; font-style: normal; font-size: 16px; line-height: 1.6; color: var(--bone); }
.svc-zone__card p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--bone-70); }
.svc-zone__card .btn { width: 100%; margin-top: 22px; }

/* FAQ */
.svc-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0;
  font-weight: 500; font-size: 16.5px; line-height: 1.45; cursor: pointer; list-style: none;
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-light); }
.faq__item summary .icon { width: 18px; height: 18px; color: var(--gold); transition: transform .35s var(--ease-out); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.8; color: var(--bone-70); }
.faq__answer p + p { margin-top: 10px; }

/* Photo de présentation : colonne de droite, cadre doré décalé */
.svc-intro:has(> .svc-photo:not([hidden])) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head photo" "text photo"; row-gap: 26px;
}
.svc-intro:has(> .svc-photo:not([hidden])) > div:first-child { grid-area: head; }
.svc-intro:has(> .svc-photo:not([hidden])) > .svc-text { grid-area: text; }
.svc-photo { position: relative; grid-area: photo; margin: 0 18px 18px 0; }
.svc-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--line-gold); pointer-events: none; }
.svc-photo__frame { position: relative; display: block; overflow: hidden; box-shadow: var(--pop-shadow); }
.svc-photo img { width: 100%; height: auto; }
.svc-photo.rv img { transform: scale(1.08); transition: transform 1.8s var(--ease-out) var(--rv-delay, 0s); }
.svc-photo.rv.is-in img { transform: none; }
.svc-photo__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); color: #F4F1EA; font-size: 13px; line-height: 1.5; }

/* Réalisations : comparateurs d'un bord à l'autre de l'écran */
.svc-works__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; }
.svc-works__hint { display: flex; align-items: center; gap: 12px; max-width: 400px; font-size: 14px; line-height: 1.6; color: var(--bone-50); }
.svc-works__hint .icon { width: 18px; height: 18px; flex: none; color: var(--gold); animation: hintNudge 2.4s ease-in-out infinite; }
@keyframes hintNudge { 50% { transform: translateX(6px); } }
.photo-pairs { display: grid; gap: clamp(32px, 6vh, 64px); margin-top: clamp(32px, 5vh, 52px); }
.photo-pair { margin: 0; }
.compare--photo { width: 100%; aspect-ratio: var(--ratio, 16 / 9); max-height: 86vh; border-width: 1px 0; }
.compare--photo img { width: 100%; height: 100%; object-fit: cover; }
.compare--photo .compare__tag--before { left: max(20px, calc((100% - var(--maxw)) / 2 + var(--gutter))); }
.compare--photo .compare__tag--after { right: max(20px, calc((100% - var(--maxw)) / 2 + var(--gutter))); }
.photo-pair__caption { box-sizing: border-box; width: 100%; max-width: var(--maxw); margin: 16px auto 0; padding-inline: var(--gutter); font-size: 13px; color: var(--bone-50); }

/* Bouton « Prendre rendez-vous » flottant (prestation.js), après l'en-tête et jusqu'au pied de page */
.svc-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 85; display: flex; gap: 10px;
  opacity: 0; transform: translateY(calc(100% + 40px)); pointer-events: none;
  transition: transform .6s var(--ease-out), opacity .4s;
}
.svc-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.svc-float .btn { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.svc-float__tel { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-gold); background: var(--pop-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gold); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); transition: border-color .3s; }
.svc-float__tel:hover { border-color: var(--gold); }
.svc-float__tel .icon { width: 20px; height: 20px; }
/* Au-delà de 1760 px, « Prendre rendez-vous » reste affiché dans l'en-tête : pas de doublon */
@media (min-width: 1761px) { .svc-float { display: none; } }
/* Liens dans le texte */
.svc-text a, .svc-benefit p a, .faq__answer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.svc-text a:hover, .svc-benefit p a:hover, .faq__answer a:hover { color: var(--gold-light); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .svc-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .svc-hero--media { display: block; min-height: 0; }
  .svc-hero:not(.svc-hero--media) .svc-hero__art { display: none; }
  .svc-hero--media .svc-hero__art { position: relative; width: auto; height: clamp(240px, 56vw, 440px); margin: calc(-1 * clamp(40px, 7vh, 72px)) 0 28px; }
  .svc-hero--media .svc-hero__media { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 84%); animation-name: svcFade; }
  .svc-hero__line .l-desk { display: none; }
  .svc-hero__line .l-mob { display: inline; }
  .svc-hero__content { max-width: none; }
  .svc-hero__grid, .svc-intro, .svc-optics, .svc-zone, .svc-faq { grid-template-columns: minmax(0, 1fr); }
  .svc-intro:has(> .svc-photo:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "text" "photo"; grid-template-rows: auto; }
  .svc-steps { --gap: 30px; grid-auto-flow: row; grid-auto-columns: auto; gap: var(--gap); }
  .svc-step { padding-left: 72px; }
  .svc-step::before { position: absolute; left: 0; top: 0; }
  .svc-step:not(:last-child)::after { top: 46px; left: 23px; width: 1px; height: calc(100% + var(--gap) - 46px); background: linear-gradient(180deg, #D6C590, #AA9763) center top / 100% 0% no-repeat, var(--line-gold); }
  .svc-step.is-on:not(:last-child)::after { background-size: 100% 100%, auto; }
  .svc-step h3 { margin-top: 10px; }
  .svc-benefits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .svc-issues { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__actions .btn { width: 100%; }
  .svc-float { left: 16px; right: 16px; bottom: 16px; }
  .svc-float .btn { flex: 1; }
  .optic-step { grid-template-columns: 70px minmax(0, 1fr); gap: 20px; padding-right: 0; }
  .optic-lens { width: 70px; height: 70px; }
  .optic-steps::before { left: 35px; }
  .compare--photo { max-height: 72vh; }
  .faq__answer { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-crumbs, .svc-hero__eyebrow, .svc-hero__title, .svc-hero__lead, .svc-hero__actions, .svc-hero__media, .svc-hero__media img { animation: none; }
  .svc-hero__line line { animation: none; stroke-dashoffset: 0; }
  .svc-works__hint .icon { animation: none; }
  .svc-step::before, .svc-step::after { transition: none; }
}