:root { --service-modal-accent: #fea526; }

body.service-modal-open { overflow: hidden; }
.service-modal { position: fixed; inset: 0; z-index: 100000; display: grid; padding: 24px; place-items: center; visibility: hidden; opacity: 0; transition: opacity .36s cubic-bezier(.22,1,.36,1), visibility 0s linear .36s; }
.service-modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.service-modal__overlay { position: absolute; inset: 0; background: rgba(3,6,9,.82); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.service-modal__dialog { position: relative; width: min(1120px, 100%); max-height: 88vh; overflow: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #e8e9eb; background: #0d1013; box-shadow: 0 30px 90px rgba(0,0,0,.72); opacity: 0; transform: scale(.96) translateY(10px); transition: opacity .36s cubic-bezier(.22,1,.36,1), transform .36s cubic-bezier(.22,1,.36,1); }
.service-modal.is-open .service-modal__dialog { opacity: 1; transform: none; }
.service-modal__close { position: sticky; z-index: 4; top: 18px; right: 18px; float: right; display: grid; width: 48px; height: 48px; margin: 18px 18px -66px auto; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(13,16,19,.84); font: 300 34px/1 Arial,sans-serif; cursor: pointer; }
.service-modal__close:hover, .service-modal__close:focus-visible { color: #121215; background: var(--service-modal-accent); outline: 0; box-shadow: 0 0 22px rgba(254,165,38,.45); }
.service-modal__content { display: grid; grid-template-columns: 53% 47%; min-height: 610px; }
.service-modal__details { display: flex; padding: 54px 54px 38px; flex-direction: column; justify-content: center; background: radial-gradient(circle at 5% 0%, rgba(42,51,60,.45), transparent 42%), #0d1013; }
.service-modal__number { margin-bottom: 10px; color: transparent; -webkit-text-stroke: 1px var(--service-modal-accent); font-size: 58px; line-height: 1; }
.service-modal__details h2 { margin: 0; color: #fff !important; font-size: clamp(26px,3vw,38px); font-style: italic; font-weight: 800; line-height: 1.08; text-transform: uppercase; }
.service-modal__description { margin: 22px 0 0; color: #c5c8cd; font-size: 16px; line-height: 1.7; }
.service-modal__divider { width: 100%; height: 1px; margin: 24px 0; background: linear-gradient(90deg,var(--service-modal-accent),rgba(254,165,38,.1)); }
.service-modal__details h3 { margin: 0 0 12px; color: var(--service-modal-accent) !important; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.service-modal__details h3 span { display: inline-grid; width: 24px; height: 24px; margin-right: 9px; place-items: center; border: 1px solid var(--service-modal-accent); border-radius: 50%; }
.service-modal__included { margin: 0; padding-left: 30px; color: #b9bdc3; font-size: 15px; line-height: 1.55; }
.service-modal__included li { margin: 3px 0; }
.service-modal__info-grid { display: grid; margin-top: 25px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.service-modal__info-grid > div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.16); }
.service-modal__info-grid p { margin: 0; color: #b9bdc3; font-size: 14px; line-height: 1.55; }
.service-modal__image-wrap { min-height: 610px; overflow: hidden; background: #171a1e; }
.service-modal__image { display: block; width: 100%; height: 100%; min-height: 610px; object-fit: cover; }
.service-modal__footer { display: grid; padding: 25px 44px 22px; border-top: 1px solid rgba(255,255,255,.16); grid-template-columns: 250px minmax(300px,1fr); gap: 18px 34px; align-items: center; background: linear-gradient(90deg,#12171d,#171d22); }
.service-modal__secondary, .service-modal__primary { display: inline-flex; min-height: 54px; padding: 0 24px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--service-modal-accent); color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.service-modal__secondary { background: transparent; }
.service-modal__primary { gap: 16px; background: linear-gradient(180deg,#9d2b0c 0%,#b83b0c 54%,#fea526 100%); }
.service-modal__secondary:hover, .service-modal__primary:hover, .service-modal__secondary:focus-visible, .service-modal__primary:focus-visible { color: #121215 !important; background: #fea526; outline: 0; box-shadow: 0 0 24px rgba(254,165,38,.45); }
.service-modal__note { grid-column: 1/-1; margin: 0; color: #9ea3aa; text-align: center; }
.service-select-field select { width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(254,165,38,.38); color: #777; background: #fff; box-sizing: border-box; }

@media (max-width: 900px) {
  .service-modal { padding: 16px; }
  .service-modal__content { grid-template-columns: 1fr; }
  .service-modal__image-wrap, .service-modal__image { min-height: 340px; max-height: 420px; }
  .service-modal__details { padding: 44px 36px 34px; }
}
@media (max-width: 600px) {
  .service-modal { padding: 12px; }
  .service-modal__dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .service-modal__details { padding: 55px 22px 28px; }
  .service-modal__number { font-size: 46px; }
  .service-modal__info-grid { grid-template-columns: 1fr; }
  .service-modal__info-grid > div + div { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .service-modal__image-wrap, .service-modal__image { min-height: 260px; max-height: 300px; }
  .service-modal__footer { padding: 20px; grid-template-columns: 1fr; gap: 12px; }
  .service-modal__note { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .service-modal, .service-modal__dialog { transition: none; } }
