/* CULT DETAILING: компоненты отдельной страницы. */
.detailing-skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 1000;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--ref-card);
}

.detailing-skip:focus { top: 20px; }
.detailing-page [id] { scroll-margin-top: 125px; }

.detailing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(44px, 6vw, 84px);
}

.detailing-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  color: var(--ref-muted);
  font-size: 13px;
}

.detailing-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.detailing-breadcrumbs a:hover { color: var(--ref-blue); }
.detailing-hero h1 {
  margin: 18px 0 24px;
  font-family: var(--display-font);
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 850;
  line-height: 1.08;
  text-wrap: balance;
}

.detailing-lead {
  max-width: 640px;
  margin: 0 0 28px;
  color: var(--ref-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
}

.detailing-neighbor {
  margin: 28px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--ref-line-hot);
  color: var(--ref-muted);
  font-size: 14px;
  line-height: 1.65;
}

.detailing-logo-panel {
  margin: 0;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: screen;
}

.detailing-logo-panel img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) invert(1) contrast(1.4);
  opacity: 0.82;
  transform: scale(1.2);
}
.detailing-prices-section { padding-top: 30px; }
.detailing-prices-section .section-head { margin-bottom: 28px; }
.detailing-page .section-head h2 { margin-block: 0; }
.detailing-page .section-head p { margin-block: 0; }
.detailing-page .section-head p:not(.eyebrow) { max-width: 800px; font-size: 18px; }

.detailing-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.detailing-categories a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--ref-line);
  border-radius: var(--radius);
  color: var(--ref-muted);
  font-size: 14px;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}

.detailing-categories a:hover { color: var(--ref-text); background: var(--ref-card-2); }
.detailing-price-groups { display: grid; gap: 22px; }
.detailing-price-group {
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--ref-line);
  border-radius: 12px;
  background: linear-gradient(130deg, var(--ref-card), var(--ref-shell));
}

.detailing-group-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.detailing-group-heading > span { color: var(--ref-blue); font-size: 14px; font-weight: 700; }
.detailing-group-heading h3 { margin: 0; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; }
.detailing-price-list { margin: 0; }
.detailing-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 230px);
  gap: 18px 32px;
  align-items: start;
  padding-block: 22px;
  border-top: 1px solid var(--ref-line);
}

.detailing-price-row:last-child { padding-bottom: 0; }
.detailing-price-row dt { font-size: 18px; line-height: 1.5; font-weight: 650; }
.detailing-price-row dt > span {
  display: block;
  max-width: 720px;
  margin-top: 7px;
  color: var(--ref-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.detailing-price {
  margin: 0;
  color: var(--ref-blue);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.detailing-price-conditional span { display: block; color: var(--ref-muted); font-size: 13px; font-weight: 400; }
.detailing-price-conditional b { display: block; margin-top: 8px; font-size: 18px; }
.detailing-price-pending { color: var(--ref-muted); font-size: 17px; font-weight: 500; }
.detailing-group-note { margin: 20px 0 0; color: var(--ref-muted); font-size: 14px; line-height: 1.6; }
.detailing-work-section { padding-block: 0; }

@media (max-width: 760px) {
  .detailing-hero { grid-template-columns: minmax(0, 1fr); padding: 32px 14px; gap: 30px; }
  .detailing-logo-panel { width: min(100%, 400px); justify-self: center; }
  .detailing-hero h1 { font-size: clamp(34px, 8vw, 44px); }
  .detailing-hero .hero-actions { display: grid; }
  .detailing-hero .button { padding-inline: 12px; }
  .detailing-prices-section { padding-top: 32px; }
  .detailing-page .section-head { padding-inline: 12px; }
  .detailing-categories { padding-inline: 8px; }
  .detailing-categories a { font-size: 13px; padding-inline: 12px; }
  .detailing-price-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .detailing-price { text-align: left; }
  .detailing-price-row dt { font-size: 17px; }
  .detailing-price-row dt > span { font-size: 14px; }
  .detailing-work-section { padding-block: 0; }
}

.detailing-page {
  --detailing-glow: rgba(96, 198, 255, 0.09);
  --detailing-glow-strong: rgba(96, 198, 255, 0.2);
  --detailing-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.detailing-hero { row-gap: 36px; }
.detailing-title-accent { color: var(--ref-blue); }
@supports (background-clip: text) {
  .detailing-title-accent {
    background: linear-gradient(100deg, var(--ref-text), var(--ref-blue) 72%);
    background-clip: text;
    color: transparent;
  }
}
.detailing-logo-panel { position: relative; }
.detailing-logo-panel::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--detailing-glow-strong), transparent 70%);
  pointer-events: none;
}
.detailing-logo-panel img { position: relative; mix-blend-mode: screen; }
.detailing-service-shortcuts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ref-line);
  border-radius: 12px;
  background: linear-gradient(120deg, var(--ref-shell), var(--ref-bg));
}
.detailing-service-shortcuts > a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 100px;
  padding: 22px 26px;
  border-radius: 10px;
  transition: background 200ms ease;
}
.detailing-service-shortcuts > a + a { border-left: 1px solid var(--ref-line); }
.detailing-shortcut-icon { display: grid; place-items: center; color: var(--ref-blue); }
.detailing-shortcut-icon svg { width: 30px; height: 30px; }
.detailing-shortcut-label { display: block; color: var(--ref-muted); font-size: 14px; line-height: 1.5; }
.detailing-service-shortcuts strong { display: block; margin-top: 6px; font-size: 23px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detailing-shortcut-arrow { color: var(--ref-blue); font-size: 22px; transition: transform 200ms ease; }

/* Галерея реальных работ: крупный первый пример и категории. */
.detailing-work-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 24px; }
.detailing-work-toolbar[hidden],
.detailing-work-card[hidden] { display: none; }
.detailing-work-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.detailing-work-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--ref-line);
  border-radius: 24px;
  background: var(--ref-shell);
  color: var(--ref-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.detailing-work-filters button > span { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); font-size: 12px; }
.detailing-work-filters button[aria-pressed="true"] { border-color: var(--ref-blue); background: var(--ref-blue); color: var(--ref-bg); }
.detailing-work-count { margin: 0; color: var(--ref-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.detailing-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.detailing-work-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--ref-line);
  border-radius: 12px;
  background: radial-gradient(ellipse at top right, var(--detailing-glow), transparent 58%), linear-gradient(140deg, var(--ref-card), var(--ref-shell));
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.detailing-work-featured { grid-column: 1 / -1; border-color: var(--ref-line-hot); }
.detailing-work-card:focus-within { border-color: var(--ref-line-hot); box-shadow: var(--detailing-shadow); }

.detailing-work-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  min-height: 96px;
  font-size: clamp(18px, 1.7vw, 23px);
}

.detailing-work-card-heading > span { color: var(--ref-blue); font-size: 13px; font-weight: 700; }
.detailing-work-card h3 { margin: 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; }
.detailing-work-featured h3 { font-size: clamp(22px, 2.3vw, 30px); }
.detailing-inline-logo {
  display: block;
  flex: none;
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}
.detailing-inline-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) invert(1) contrast(1.4);
  opacity: 0.62;
  transform: scale(1.28);
  transition: opacity 220ms ease;
}
.detailing-group-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.detailing-group-heading .detailing-inline-logo { width: 112px; }

.detailing-compare {
  --compare-position: 50%;
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ref-line-hot);
  border-radius: 8px;
  background: var(--ref-bg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.detailing-work-featured .detailing-compare { aspect-ratio: 16 / 9; }
.detailing-work-square .detailing-compare { aspect-ratio: 1; }
.detailing-work-portrait .detailing-compare { aspect-ratio: 3 / 4; }
.detailing-compare::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(3, 8, 13, 0.42), transparent 28%);
  pointer-events: none;
}
.detailing-compare-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.detailing-compare-after-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--compare-position));
  will-change: clip-path;
}
.detailing-compare-label {
  position: absolute;
  top: 12px;
  z-index: 4;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: var(--ref-text);
  background: rgba(7, 12, 18, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.detailing-compare-label-before { left: 12px; }
.detailing-compare-label-after { right: 12px; color: var(--ref-blue); border-color: rgba(96, 198, 255, 0.44); }
.detailing-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  z-index: 5;
  width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
}
.detailing-compare-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ref-blue) 14%, #eef8ff 50%, var(--ref-blue) 86%, transparent);
  box-shadow: 0 0 18px rgba(96, 198, 255, 0.64);
  transform: translateX(-50%);
}
.detailing-compare-handle > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(238, 248, 255, 0.68);
  border-radius: 50%;
  background: linear-gradient(135deg, #8bd8ff, var(--ref-blue));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), 0 0 24px rgba(96, 198, 255, 0.34);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease;
}
.detailing-compare-handle > span::before,
.detailing-compare-handle > span::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #07131d;
  border-left: 2px solid #07131d;
}
.detailing-compare-handle > span::before { left: 12px; transform: rotate(-45deg); }
.detailing-compare-handle > span::after { right: 12px; transform: rotate(135deg); }
.detailing-compare-handle:focus-visible > span {
  outline: 3px solid #eef8ff;
  outline-offset: 3px;
}
.detailing-compare-handle:focus-visible { outline: none; }
.detailing-compare.is-dragging .detailing-compare-handle > span { transform: translate(-50%, -50%) scale(1.06); }
.detailing-work-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 28px; border: 1px solid var(--ref-line-hot); border-radius: 12px; background: radial-gradient(ellipse at top left, var(--detailing-glow-strong), transparent 70%), var(--ref-shell); }
.detailing-work-cta > p { max-width: 540px; margin: 0; color: var(--ref-text); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.5; }
.detailing-price-group { box-shadow: inset 0 1px 0 var(--detailing-glow); transition: border-color 220ms ease, box-shadow 220ms ease; }
.detailing-price-group:target { border-color: var(--ref-line-hot); box-shadow: inset 3px 0 0 var(--ref-blue), var(--detailing-shadow); }
.detailing-categories a:focus-visible { background: var(--ref-card-2); }

@media (hover: hover) and (pointer: fine) {
  .detailing-service-shortcuts > a:hover { background: var(--detailing-glow); }
  .detailing-service-shortcuts > a:hover .detailing-shortcut-arrow { transform: translate(2px, -2px); }
  .detailing-work-filters button:hover { border-color: var(--ref-line-hot); }
  .detailing-work-card:hover { border-color: var(--ref-line-hot); box-shadow: var(--detailing-shadow); }
  .detailing-work-card:hover .detailing-inline-logo img { opacity: 0.86; }
  .detailing-compare:hover .detailing-compare-handle > span { transform: translate(-50%, -50%) scale(1.04); }
}

@media (max-width: 980px) {
  .detailing-service-shortcuts > a { padding: 20px 16px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .detailing-shortcut-label { font-size: 13px; }
  .detailing-service-shortcuts strong { font-size: 21px; }

  .detailing-work-card { padding: 18px; }
}

@media (max-width: 760px) {
  .detailing-hero { row-gap: 24px; }
  .detailing-work-toolbar { padding-inline: 8px; gap: 12px; margin-bottom: 20px; }
  .detailing-work-filters button { padding: 10px 12px; gap: 7px; font-size: 13px; }
  .detailing-work-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .detailing-work-card-heading { gap: 10px; min-height: 80px; }
  .detailing-inline-logo { width: 80px; }
  .detailing-group-heading .detailing-inline-logo { width: 72px; }
  .detailing-group-heading { gap: 12px; }

  .detailing-work-featured .detailing-compare { aspect-ratio: 4 / 3; }
  .detailing-compare-handle { width: 64px; }
  .detailing-work-cta { padding: 22px; }
  .detailing-work-cta .button { width: 100%; }

}

@media (max-width: 560px) {
  .detailing-service-shortcuts > a { display: flex; justify-content: center; min-height: 86px; padding: 14px 6px; text-align: center; }
  .detailing-shortcut-icon, .detailing-shortcut-arrow { display: none; }
  .detailing-shortcut-label { font-size: 12px; }
  .detailing-service-shortcuts strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .detailing-page { scroll-behavior: auto; }
  .detailing-page *, .detailing-page *::before, .detailing-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .detailing-service-shortcuts > a:hover .detailing-shortcut-arrow { transform: none; }
}