/* bookleggers — блок допуслуг (/dopuslugi/): «Отделка и защита» (карточки с вариантами) + «Подготовка и доработка» (список).
   Без JS: варианты — нативные radio; иллюстрация меняется через :has() на карточке (CSS-переменные --paint / --edge).
   Подключается ПОСЛЕ base.css и pages.css. Префикс .svc-*; правила текста — с .svc впереди, чтобы перебить `.pg section p` и `.pg ul`. */

/* токены блока */
.svc { --svc-line:rgba(245,245,245,.12); --svc-line-2:rgba(245,245,245,.22); --svc-mute:rgba(245,245,245,.62); --svc-soft:rgba(245,245,245,.8);
  --svc-ease:cubic-bezier(.2,.8,.2,1); --svc-card:#0e0f10;
  --c-black:#161618; --c-white:#f1efe9; --c-blue:#2a5bb0; --c-gold:#c9a44c; }
.pg > .svc { max-width:none; }
.pg .svc { margin-top:56px; }
.pg .svc + .svc { margin-top:72px; }
.pg .svc :where(h2, h3, p, ul, ol, li, fieldset, legend) { margin:0; padding:0; opacity:1; list-style:none; }

/* заголовок секции */
.svc-head { display:grid; gap:14px 48px; padding-bottom:28px; border-bottom:1px solid var(--svc-line); }
.svc .svc-eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--svc-mute); font-variant-numeric:tabular-nums; }
.svc-eyebrow::after { content:""; flex:none; width:40px; height:1px; background:var(--svc-line-2); }
.svc .svc-h2 { margin-top:14px; font-weight:300; font-size:clamp(28px, 3.6vw, 36px); line-height:1.12; letter-spacing:-.016em; text-wrap:balance; }
.svc .svc-intro { max-width:460px; font-size:15px; line-height:1.65; color:var(--svc-soft); text-wrap:pretty; }
@media (min-width:820px) { .svc-head { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; } }

/* сетка карточек */
.svc-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:32px; }
@media (min-width:760px) { .svc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } .svc-card--hero { grid-column:1 / -1; } }
.svc .svc-foot { display:flex; align-items:baseline; gap:10px; margin-top:20px; font-size:12.5px; line-height:1.55; color:var(--svc-mute); }
.svc-foot::before { content:"*"; flex:none; color:var(--svc-soft); }

/* карточка: тонкая фаска сверху (блик кромки) + глубокая мягкая тень */
.svc-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:10px; border:1px solid var(--svc-line); border-radius:18px;
  background:radial-gradient(120% 80% at 0% 0%, rgba(200,215,255,.05), transparent 60%), rgba(245,245,245,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 28px 56px -40px rgba(0,0,0,.9);
  transition:border-color .4s var(--svc-ease), box-shadow .4s var(--svc-ease); }
.svc-card:hover, .svc-card:focus-within { border-color:var(--svc-line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 32px 60px -36px rgba(0,0,0,.95); }
@media (min-width:760px) { .svc-card--hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } }

/* появление карточек при прокрутке — только CSS (scroll-driven); где не поддерживается — карточки просто видны */
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .svc-card { animation:svc-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  }
}
@keyframes svc-rise { from { opacity:0; translate:0 28px; } to { opacity:1; translate:none; } }

/* сцена-иллюстрация: тёмный стол, сетка, метки обреза по углам */
.svc-stage { position:relative; display:grid; place-items:center; aspect-ratio:16 / 10; overflow:hidden; border-radius:10px; isolation:isolate;
  background:radial-gradient(70% 75% at 50% 45%, #1c1e23 0%, #101114 60%, #0b0c0e 100%); box-shadow:inset 0 0 0 1px rgba(245,245,245,.06); }
.svc-stage::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(245,245,245,.04) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(245,245,245,.04) 0 1px, transparent 1px 24px);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent); mask:radial-gradient(closest-side, #000 30%, transparent); }
.svc-stage::after { content:""; position:absolute; inset:12px; pointer-events:none; --t:rgba(245,245,245,.3);
  background:
    linear-gradient(var(--t), var(--t)) left top / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) left top / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) right top / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) right bottom / 1px 10px no-repeat; }
.svc-tag { position:absolute; top:20px; left:24px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,245,245,.6); }
.svc-card--hero .svc-stage { aspect-ratio:16 / 11; }
@media (min-width:760px) { .svc-card--hero .svc-stage { aspect-ratio:auto; min-height:380px; } }

/* пластина-шильдик: брашированный металл */
.svc-plate { position:relative; width:66%; aspect-ratio:1.6 / 1; border-radius:7px; overflow:hidden;
  /* гладкий анодированный алюминий — тот же образец, что по умолчанию в форме заказа: матовая ровная поверхность, мягкий блик, мелкая пескоструйная зернистость */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 40%, rgba(0,0,0,0) 66%, rgba(0,0,0,.12)),
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(112deg, #b3b8be 0%, #c9ced3 40%, #babfc5 62%, #c4c8cd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.55),
    0 24px 40px -14px rgba(0,0,0,.85), 0 8px 14px -6px rgba(0,0,0,.6);
  transform:perspective(1100px) rotateX(10deg) rotateY(-14deg) rotateZ(.5deg); transition:transform .6s var(--svc-ease); }
.svc-card--hero .svc-plate { width:74%; max-width:460px; }
@media (hover:hover) { .svc-card:hover .svc-plate { transform:perspective(1100px) rotateX(5deg) rotateY(-7deg) rotateZ(.2deg); } }

/* 01 · затирка: гравировка (SVG) заливается цветом --paint */
.svc-fill { --paint:var(--c-black); }
.svc-fill:has(.sw-white :checked) { --paint:var(--c-white); }
.svc-fill:has(.sw-gold :checked) { --paint:var(--c-gold); }
.svc-engr { position:absolute; inset:0; width:100%; height:100%; }
.svc-engr text { font-family:-apple-system, "Helvetica Neue", Arial, sans-serif; }
.svc-groove-lo { fill:rgba(0,0,0,.55); stroke:rgba(0,0,0,.55); }
.svc-groove-hi { fill:rgba(255,255,255,.38); stroke:rgba(255,255,255,.38); }
.svc-ink { fill:var(--paint); stroke:var(--paint); transition:fill .45s var(--svc-ease), stroke .45s var(--svc-ease); }

/* 02 · лак: печать на пластине + блик (матовый — рассеянный, глянцевый — резкий) */
.svc-print { position:absolute; inset:0; transition:filter .5s var(--svc-ease); }
.svc-print::before, .svc-print::after { content:""; position:absolute; inset:0; }
.svc-print--dusk { background:
    radial-gradient(circle at 70% 40%, #f6d27c 0 7%, rgba(246,210,124,0) 7.6%),
    radial-gradient(45% 40% at 70% 42%, rgba(255,176,98,.6), rgba(255,176,98,0) 70%),
    linear-gradient(180deg, #172440 0%, #3b3a63 30%, #8a5470 58%, #e08a5a 82%, #f2b46c 100%); }
.svc-print--dusk::before { background:linear-gradient(180deg, #2c2440, #141020); clip-path:polygon(0 100%, 0 64%, 12% 52%, 24% 63%, 38% 44%, 52% 61%, 63% 53%, 78% 68%, 90% 57%, 100% 63%, 100% 100%); }
.svc-print--dusk::after { background:#0c0a12; clip-path:polygon(0 100%, 0 82%, 18% 74%, 36% 84%, 57% 71%, 76% 82%, 100% 75%, 100% 100%); }
.svc-hl { position:absolute; inset:0; pointer-events:none; transition:opacity .5s var(--svc-ease), transform .6s var(--svc-ease); }
.svc-hl-matte { background:radial-gradient(90% 80% at 30% 18%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%), rgba(255,255,255,.06); }
.svc-hl-gloss { opacity:0; transform:translateX(-10%);
  background:
    radial-gradient(12% 18% at 80% 20%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%),
    linear-gradient(118deg, rgba(255,255,255,0) 0 38%, rgba(255,255,255,.45) 38.6%, rgba(255,255,255,.1) 47%, rgba(255,255,255,0) 47.6% 56%, rgba(255,255,255,.24) 56.6%, rgba(255,255,255,0) 59%); }
.svc-lac .svc-print { filter:saturate(.82) contrast(.92); }
.svc-lac:has([value="gloss"]:checked) .svc-print { filter:saturate(1.18) contrast(1.06); }
.svc-lac:has([value="gloss"]:checked) .svc-hl-matte { opacity:0; }
.svc-lac:has([value="gloss"]:checked) .svc-hl-gloss { opacity:1; transform:none; }

/* 03 · ламинация: плёнка поверх печати, угол отслоён (на hover — сильнее) */
.svc-print--tide { background:
    radial-gradient(circle at 30% 42%, #efe2c4 0 12%, rgba(239,226,196,0) 12.6%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.1) 9px 10px),
    linear-gradient(160deg, #24605b 0%, #2d746c 45%, #173f3c 100%); }
.svc-print--tide::before { top:58%; background:repeating-linear-gradient(170deg, #c86b4a 0 6px, #b55a3c 6px 12px);
  clip-path:polygon(0 30%, 20% 10%, 45% 32%, 70% 6%, 100% 28%, 100% 100%, 0 100%); }
.svc-print--tide::after { top:78%; background:#3a1f19; clip-path:polygon(0 40%, 30% 10%, 60% 45%, 85% 15%, 100% 30%, 100% 100%, 0 100%); }
.svc-film { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.03) 80%), rgba(225,235,250,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  clip-path:polygon(0 0, 78% 0, 100% 34%, 100% 100%, 0 100%); transition:clip-path .6s var(--svc-ease); }
.svc-flaps { position:absolute; inset:0; pointer-events:none; filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.5)); }
.svc-flap { position:absolute; inset:0; clip-path:polygon(78% 0, 100% 34%, 78.8% 35.2%); transition:clip-path .6s var(--svc-ease);
  background:linear-gradient(225deg, rgba(252,253,255,.95) 6%, rgba(214,224,238,.78) 22%, rgba(170,184,204,.66) 36%); }
@media (hover:hover) {
  .svc-lam:hover .svc-film { clip-path:polygon(0 0, 70% 0, 100% 46%, 100% 100%, 0 100%); }
  .svc-lam:hover .svc-flap { clip-path:polygon(70% 0, 100% 46%, 71.3% 48%); }
}

/* 04–05 · изометрические схемы (SVG) */
.svc-iso { display:block; width:88%; max-width:420px; height:auto; filter:drop-shadow(0 18px 16px rgba(0,0,0,.55)); }
.svc-iso-label { font-family:-apple-system, "Helvetica Neue", Arial, sans-serif; font-size:10px; letter-spacing:.18em; fill:rgba(245,245,245,.72); }
.svc-iso-lead { fill:none; stroke:rgba(245,245,245,.42); stroke-width:.75; }
.svc-iso-dot { fill:var(--logo); }
.svc-iso-bevel { fill:none; stroke:rgba(255,255,255,.6); stroke-width:.8; stroke-linejoin:round; }
.svc-iso-rim { fill:none; stroke:rgba(255,255,255,.3); stroke-width:.6; stroke-linejoin:round; }
.svc-iso-foot { fill:none; stroke:rgba(0,0,0,.5); stroke-width:.8; stroke-linejoin:round; }
.svc-iso-groove-lo { fill:none; stroke:rgba(0,0,0,.45); stroke-width:1; }
.svc-iso-groove-hi { fill:none; stroke:rgba(255,255,255,.3); stroke-width:1; }
.svc-shade { fill:#000; fill-opacity:.24; }

/* 04 · торцы: цвет боковых граней = --edge */
.svc-edge { --edge:var(--c-black); }
.svc-edge:has(.sw-white :checked) { --edge:var(--c-white); }
.svc-edge-side { fill:var(--edge); transition:fill .45s var(--svc-ease); }

/* 05 · клейкая основа: «взрыв-схема» изделие / клей / подложка; на hover слои расходятся */
.svc-gl-metal-side { fill:#555a61; }
.svc-gl-tape-face { fill:rgba(200,215,255,.08); stroke:rgba(220,230,255,.5); stroke-width:.7; }
.svc-gl-tape-side { fill:rgba(220,230,255,.3); }
.svc-gl-liner-side { fill:#5c2219; }
.svc-gl-plate, .svc-gl-liner { transition:transform .6s var(--svc-ease); }
@media (hover:hover) {
  .svc-glue:hover .svc-gl-plate { transform:translateY(-6px); }
  .svc-glue:hover .svc-gl-liner { transform:translateY(6px); }
}

/* текст карточки */
.svc-body { flex:1; display:flex; flex-direction:column; padding:22px 12px 14px; }
.svc .svc-kicker { display:flex; align-items:center; gap:10px; font-size:10.5px; line-height:1.4; letter-spacing:.22em; text-transform:uppercase; color:var(--svc-mute); }
.svc-num { color:var(--logo); font-variant-numeric:tabular-nums; letter-spacing:.14em; }
.svc-num::after { content:""; display:inline-block; width:20px; height:1px; margin-left:12px; vertical-align:middle; background:var(--svc-line-2); }
.svc .svc-h3 { margin-top:14px; font-weight:300; font-size:23px; line-height:1.2; letter-spacing:-.012em; text-wrap:balance; }
.svc .svc-desc { margin-top:12px; max-width:62ch; font-size:14.5px; line-height:1.65; color:var(--svc-soft); text-wrap:pretty; }
.svc .svc-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:24px; }
.svc .svc-facts li { display:inline-flex; align-items:center; gap:9px; min-height:32px; padding:6px 14px 6px 12px; border:1px solid var(--svc-line); border-radius:999px;
  background:rgba(245,245,245,.025); font-size:12.5px; line-height:1.35; color:var(--svc-soft); }
.svc-facts li::before { content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--logo); opacity:.55; }
.svc-card--hero .svc-h3 { font-size:clamp(25px, 3vw, 34px); line-height:1.15; }
@media (min-width:760px) {
  .svc-body { padding:26px 22px 22px; }
  .svc-card--hero .svc-body { justify-content:center; padding:40px 36px 34px; }
  .svc-card--hero .svc-facts { margin-top:0; }
}

/* группы вариантов: в обычной карточке прижаты к низу — в карточках одного ряда опции стоят на одной линии */
.svc .svc-opts { position:relative; min-inline-size:0; margin-top:auto; padding-top:26px; border:0; }
.svc-card--hero .svc-opts { margin-top:0; }
.svc .svc-opts + .svc-facts { margin-top:0; }
.svc .svc-legend { float:left; width:100%; margin-bottom:12px; font-size:10.5px; line-height:16px; letter-spacing:.2em; text-transform:uppercase; color:var(--svc-mute); }
.svc-legend + * { clear:both; }
.svc .svc-note { margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--svc-mute); }
.svc-vh, .svc-sw input, .svc-seg-opt input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* свотчи цвета: цель 44×44, кружок 30px, кольцо у выбранного; название выбранного — справа в строке легенды (как в спецификации) */
.svc-sws { display:flex; flex-wrap:wrap; gap:4px; margin-left:-7px; }
.svc-sw { position:static; display:grid; place-items:center; width:44px; height:44px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.svc-sw-dot { width:30px; height:30px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 -4px 7px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.22), 0 0 0 1px rgba(245,245,245,.24);
  transition:box-shadow .35s var(--svc-ease), transform .35s var(--svc-ease); }
.svc-sw :checked + .svc-sw-dot { box-shadow:inset 0 -4px 7px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.22), 0 0 0 3px #0c0d0e, 0 0 0 4px var(--logo); }
.svc-sw :focus-visible + .svc-sw-dot { outline:2px solid var(--logo); outline-offset:5px; }
.svc .svc-sw :checked ~ .svc-sw-name { top:26px; right:0; left:auto; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none;
  font-size:10.5px; line-height:16px; letter-spacing:.2em; text-transform:uppercase; color:var(--logo); }
@media (hover:hover) { .svc-sw:hover .svc-sw-dot { transform:scale(1.08); } }
.sw-black { --c:var(--c-black); }
.sw-white { --c:var(--c-white); }
.sw-gold { --c:linear-gradient(140deg, #f1d993 0%, var(--c-gold) 45%, #8d6b22 100%); }

/* сегментированный переключатель (лак) */
.svc-seg { position:relative; display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:340px; padding:4px;
  border:1px solid rgba(245,245,245,.16); border-radius:14px; background:rgba(0,0,0,.28); box-shadow:inset 0 1px 3px rgba(0,0,0,.45); }
.svc-seg::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:10px; background:var(--logo);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), 0 6px 14px -6px rgba(0,0,0,.7);
  transition:transform .45s var(--svc-ease); }
.svc-seg:has(.svc-seg-opt:last-child :checked)::before { transform:translateX(100%); }
.svc-seg-opt { position:relative; z-index:1; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.svc-seg-opt span { display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px; border-radius:10px; text-align:center;
  font-size:11px; line-height:1.25; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,245,245,.68); transition:color .35s var(--svc-ease); }
.svc-seg-opt :checked + span { color:#0a0a0b; }
.svc-seg-opt:hover :not(:checked) + span { color:var(--logo); }
.svc-seg-opt :focus-visible + span { outline:2px solid var(--logo); outline-offset:3px; }
@supports not selector(:has(*)) {
  .svc-seg::before { display:none; }
  .svc-seg-opt :checked + span { background:var(--logo); }
}

/* второй ярус: «Подготовка и доработка» */
.svc-list { display:grid; grid-template-columns:minmax(0,1fr); column-gap:32px; }
.svc-item { display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:16px; min-width:0; padding:24px 0 26px; border-bottom:1px solid var(--svc-line); }
.svc-ico { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--svc-line); border-radius:10px; color:var(--svc-soft);
  background:radial-gradient(100% 100% at 30% 0%, rgba(200,215,255,.07), transparent 70%); }
.svc-ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.svc-ico-ghost { stroke-dasharray:1.5 2.5; opacity:.55; }
.svc .svc-item-h { margin-top:8px; font-weight:400; font-size:17px; line-height:1.3; }
.svc .svc-item-p { margin-top:8px; font-size:14px; line-height:1.6; color:var(--svc-soft); }
.svc .svc-steps { display:grid; gap:6px; margin-top:14px; counter-reset:svc-step; }
.svc .svc-steps li { display:flex; gap:12px; font-size:13.5px; line-height:1.5; color:var(--svc-soft); counter-increment:svc-step; }
.svc-steps li::before { content:counter(svc-step, decimal-leading-zero); flex:none; min-width:20px; padding-top:2px; font-size:10.5px; letter-spacing:.16em; color:var(--svc-mute); }
@media (min-width:600px) { .svc-list { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:900px) {
  .svc-list { grid-template-columns:repeat(12, minmax(0,1fr)); }
  .svc-item { grid-column:span 4; }
  .svc-item--wide { grid-column:span 6; }
}

/* телефон */
@media (max-width:640px) {
  .pg .svc { margin-top:44px; }
  .pg .svc + .svc { margin-top:56px; }
  .svc-plate { width:72%; }
  .svc-card--hero .svc-plate { width:76%; }
  .svc-iso { width:94%; }
  .svc-tag { display:none; }
  .svc-body { padding:22px 12px 14px; }
  .svc .svc-h3 { font-size:22px; }
  .svc-item { grid-template-columns:minmax(0,1fr); row-gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .svc *, .svc *::before, .svc *::after { transition:none !important; animation:none !important; }
}

/* настоящий логотип bookleggers (logo.svg) — гравировка на пластине: три слоя — фаска-тень, фаска-блик, краска (--paint) */
.svc-elogo { position:absolute; left:26.25%; top:35%; width:47.5%; aspect-ratio:5594 / 2493;
  -webkit-mask:url("/logo.svg") center / contain no-repeat; mask:url("/logo.svg") center / contain no-repeat; pointer-events:none; }
.svc-elogo-lo { background:rgba(0,0,0,.55); transform:translate(-.6px,-.7px); }
.svc-elogo-hi { background:rgba(255,255,255,.38); transform:translate(.7px,.9px); }
.svc-elogo-ink { background:var(--paint); transition:background-color .45s var(--svc-ease); }

/* ===== 06–11: карточки-образцы «Подготовка и доработка» ===== */
/* bookleggers — /dopuslugi/, второй блок «Подготовка и доработка» (06–11) карточками-образцами + настоящий логотип .svc-logo.
   Подключается ПОСЛЕ svc.css: берёт его токены (--svc-*, --c-*) и классы (.svc-card/.svc-stage/.svc-plate/.svc-seg/.svc-vh).
   Без JS: варианты — нативные radio; иллюстрация меняется через :has() на карточке. Префикс .svc-*, id в SVG — svcp-*. */

/* токены второго блока */
.svc-prep { --c-sel:#3d74ff; --c-paper:#f2f1ec; --c-graph:#202226; --c-engr:#33373d; }

/* ── настоящий логотип: /logo.svg как CSS-маска (как .pg-logo в шапке) ──
   Маска — на ::before, поэтому filter самого элемента (тиснение, блик, «плывущий» растр) не срезается маской.
   Цвет — --logo-ink (наследуется: можно задать на предке). */
.svc-logo { position:relative; display:block; aspect-ratio:5594 / 2493; pointer-events:none; }
.svc-logo::before { content:""; position:absolute; inset:0; background-color:var(--logo-ink, var(--logo));
  -webkit-mask:url("/logo.svg") center / contain no-repeat; mask:url("/logo.svg") center / contain no-repeat;
  transition:background-color .45s var(--svc-ease); }
/* гравировка в металле: тёмная стенка борозды сверху-слева, светлая кромка снизу-справа (как .svc-groove-lo/-hi в SVG) */
.svc-logo--engr { --logo-ink:var(--c-engr, #33373d);
  filter:drop-shadow(-.6px -.7px 0 rgba(0,0,0,.5)) drop-shadow(.7px .9px 0 rgba(255,255,255,.36)); }
/* карточка 01 (затирка): логотип вместо <text>BOOKLEGGERS</text>, в зоне y 86–126 из viewBox 320×200, цвет = краска */
.svc-engr-mark { position:absolute; left:36%; top:43%; width:28%; }
.svc-fill .svc-logo { --logo-ink:var(--paint); }
/* логотип по центру пластины */
.svc-plate-mark { position:absolute; left:50%; top:50%; width:34%; translate:-50% -50%; }

/* ── сетка и карточки ── */
@media (min-width:760px) {
  .svc-card--flip { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .svc-card--flip .svc-stage { order:2; }
}
.svc-prep .svc-body { container:svcp-body / inline-size; }
.svc-finish .svc-body { container-type:inline-size; }
/* узкая колонка текста (вкладка на главной на телефоне, ≤300px): свотчи — ровной сеткой в один ряд, сегменты — плотнее, без переноса подписей */
@container (max-width:300px) {
  .svc-sws { display:grid; grid-template-columns:repeat(6, minmax(0,44px)); justify-content:space-between; gap:0; margin-inline:-5px; }
  .svc-sw { width:auto; }
  .svc-seg-opt span { padding:0 6px; letter-spacing:.08em; }
  .svc-seg--long .svc-seg-opt span { letter-spacing:0; }
}

/* смена подписи на сцене (07: растр / вектор) */
.svc-tag-b { display:none; }

/* ── шаги-переключатель (06): сам <ol> шагов — это выбор этапа ── */
.svc .svc-stepper { display:grid; gap:4px; margin:0 -12px; }
.svc-step { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; min-height:50px;
  padding:10px 16px 10px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.svc-step-box { position:absolute; inset:0; border:1px solid transparent; border-radius:12px;
  transition:border-color .35s var(--svc-ease), background-color .35s var(--svc-ease); }
.svc-step-box::before { content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--logo);
  opacity:0; transform:scaleY(.3); transition:opacity .35s var(--svc-ease), transform .45s var(--svc-ease); }
.svc-step-n, .svc-step-t { position:relative; transition:color .35s var(--svc-ease); }
.svc-step-n { font-size:10.5px; letter-spacing:.16em; color:var(--svc-mute); font-variant-numeric:tabular-nums; }
.svc-step-t { font-size:14.5px; line-height:1.45; color:var(--svc-soft); }
.svc-step :checked ~ .svc-step-box { border-color:var(--svc-line-2); background-color:rgba(245,245,245,.04); }
.svc-step :checked ~ .svc-step-box::before { opacity:1; transform:none; }
.svc-step :checked ~ .svc-step-n, .svc-step :checked ~ .svc-step-t { color:var(--logo); }
.svc-step :focus-visible ~ .svc-step-box { outline:2px solid var(--logo); outline-offset:2px; }
@media (hover:hover) { .svc-step:hover :not(:checked) ~ .svc-step-box { background-color:rgba(245,245,245,.025); } }

/* ── плитки с пиктограммой (08, 09): 2×2 на узкой карточке, 4 в ряд от 400px ширины текста ── */
.svc-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
@container svcp-body (min-width:400px) { .svc-tiles { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.svc-tile { position:relative; display:block; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.svc-tile-box { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; height:100%; min-height:96px;
  padding:18px 10px 14px; border:1px solid var(--svc-line); border-radius:12px; text-align:center; text-wrap:balance; hyphens:manual;
  background-color:rgba(245,245,245,.012);
  font-size:10px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,245,245,.7);
  transition:border-color .35s var(--svc-ease), color .35s var(--svc-ease), background-color .35s var(--svc-ease), box-shadow .35s var(--svc-ease); }
.svc-tile-box > span:last-child { display:flex; align-items:center; min-height:2.8em; }
.svc-tile :checked + .svc-tile-box { border-color:rgba(245,245,245,.7); color:var(--logo); background-color:rgba(245,245,245,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(245,245,245,.18); }
.svc-tile :focus-visible + .svc-tile-box { outline:2px solid var(--logo); outline-offset:3px; }
@media (hover:hover) { .svc-tile:hover :not(:checked) + .svc-tile-box { border-color:var(--svc-line-2); color:var(--logo); } }
.svc-tile-ico { display:block; flex:none; }
/* пиктограмма радиуса: угол с --gr */
.svc-tile-ico--r { width:24px; height:24px; translate:3px 3px; border-top:1.6px solid; border-left:1.6px solid; border-top-left-radius:var(--gr);
  -webkit-mask:linear-gradient(135deg, #000 45%, transparent 85%); mask:linear-gradient(135deg, #000 45%, transparent 85%); }
.svc-r0 { --gr:0; } .svc-r1 { --gr:5px; } .svc-r2 { --gr:10px; } .svc-r3 { --gr:18px; }
/* пиктограмма раскладки отверстий: точки фоном */
.svc-tile-ico--holes { width:34px; height:22px; border:1.5px solid; border-radius:3px; --dot:currentColor 0 1.7px, transparent 2.2px; }
.svc-hp-top2 .svc-tile-ico { background:radial-gradient(circle at 32% 26%, var(--dot)), radial-gradient(circle at 68% 26%, var(--dot)); }
.svc-hp-corners .svc-tile-ico { background:radial-gradient(circle at 14% 24%, var(--dot)), radial-gradient(circle at 86% 24%, var(--dot)),
  radial-gradient(circle at 14% 76%, var(--dot)), radial-gradient(circle at 86% 76%, var(--dot)); }
.svc-hp-center .svc-tile-ico { background:radial-gradient(circle at 50% 24%, var(--dot)); }
.svc-hp-side .svc-tile-ico { background:radial-gradient(circle at 12% 50%, var(--dot)); }

/* сегмент с длинными подписями (07) — строчные буквы, чтобы влезало на 360px */
.svc .svc-seg--long { max-width:400px; }
.svc-seg--long .svc-seg-opt span { font-size:13px; letter-spacing:.01em; text-transform:none; }

/* ═════ 06 · разработка макетов: три листа — эскиз → макет с размерами → «согласовано» ═════ */
.svc-sheets { position:relative; width:88%; max-width:540px; aspect-ratio:2 / 1.12; }
.svc-sheet { position:absolute; width:34%; aspect-ratio:120 / 154; border-radius:2px; --logo-ink:var(--c-graph);
  background:
    repeating-linear-gradient(0deg, rgba(42,91,176,.06) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(42,91,176,.06) 0 1px, transparent 1px 9px),
    linear-gradient(170deg, #f6f5f1, #e6e4de);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 16px 26px -12px rgba(0,0,0,.85);
  transform:translateY(var(--ty, 0%)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition:transform .55s var(--svc-ease), filter .55s var(--svc-ease), box-shadow .55s var(--svc-ease); }
.svc-sheet--1 { left:3%; top:13%; --rot:-6deg; z-index:1; }
.svc-sheet--2 { left:33%; top:6%; z-index:2; }
.svc-sheet--3 { left:63%; top:13%; --rot:5deg; z-index:1; }
.svc-sheet-art { position:absolute; inset:0; width:100%; height:100%; }
.svc-sheet-mark { position:absolute; left:31.67%; top:22.2%; width:36.67%; }
.svc-sheet-no { position:absolute; left:-20%; right:-20%; top:calc(100% + 10px); text-align:center; white-space:nowrap;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,245,245,.55); transition:color .4s var(--svc-ease); }
/* выбранный лист — вперёд и выше, остальные приглушены */
.svc-mock:has(.svc-stepper :checked) .svc-sheet { --sc:.95; filter:brightness(.56) saturate(.6); }
.svc-mock:has([value="1"]:checked) .svc-sheet--1,
.svc-mock:has([value="2"]:checked) .svc-sheet--2,
.svc-mock:has([value="3"]:checked) .svc-sheet--3 { --sc:1.05; --ty:-5%; z-index:3; filter:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 30px 40px -16px rgba(0,0,0,.95), 0 10px 16px -8px rgba(0,0,0,.6); }
.svc-mock:has([value="1"]:checked) .svc-sheet--1 .svc-sheet-no,
.svc-mock:has([value="2"]:checked) .svc-sheet--2 .svc-sheet-no,
.svc-mock:has([value="3"]:checked) .svc-sheet--3 .svc-sheet-no { color:var(--logo); }
/* графика листов */
.svc-pencil { fill:none; stroke:#3b3d42; stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.svc-pencil-2 { opacity:.45; }
.svc-lay-axis { fill:none; stroke:#2a5bb0; stroke-width:.4; stroke-dasharray:3 1.5 1 1.5; opacity:.55; }
.svc-lay-line { fill:none; stroke:var(--c-graph); stroke-width:1; }
.svc-lay-dim { fill:none; stroke:#5d6067; stroke-width:.45; }
.svc-lay-arrow { fill:#5d6067; }
.svc-lay-text { fill:var(--c-graph); opacity:.55; }
.svc-lay-note { fill:var(--c-graph); opacity:.26; }
.svc-stamp { fill:none; stroke:var(--c-blue); stroke-width:1.1; opacity:.88; }
.svc-stamp-in { stroke-width:.45; }
.svc-stamp text { fill:var(--c-blue); stroke:none; font:700 6px -apple-system, "Helvetica Neue", Arial, sans-serif; }
.svc-sign { fill:none; stroke:#1f3f86; stroke-width:.8; stroke-linecap:round; stroke-linejoin:round; }

/* ═════ 07 · ИИ-графика: растр «из нейросети» ↔ вектор после перерисовки (шторка слева направо) ═════ */
.svc-board { position:relative; width:72%; max-width:460px; aspect-ratio:1.6; overflow:hidden; border-radius:3px; background:var(--c-paper);
  --logo-ink:#1b1c1f;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 26px 44px -16px rgba(0,0,0,.9), 0 8px 14px -6px rgba(0,0,0,.6);
  transform:perspective(1100px) rotateX(6deg) rotateY(8deg); transition:transform .6s var(--svc-ease); }
@media (hover:hover) { .svc-ai:hover .svc-board { transform:perspective(1100px) rotateX(3deg) rotateY(4deg); } }
.svc-ai-layer { position:absolute; inset:0; transition:clip-path .9s var(--svc-ease); }
.svc-ai-raw { clip-path:inset(0 0 0 0); background:radial-gradient(120% 90% at 50% 38%, #fbf4ea 0%, #efe5d8 70%, #e4d9ca 100%); }
.svc-ai-raw::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-conic-gradient(rgba(70,45,20,.05) 0 25%, transparent 0 50%) 0 0 / 6px 6px; }
.svc-ai-vec { clip-path:inset(0 100% 0 0);
  background:repeating-linear-gradient(0deg, rgba(30,50,90,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(30,50,90,.06) 0 1px, transparent 1px 14px), var(--c-paper); }
.svc-ai:has([value="vec"]:checked) .svc-ai-raw { clip-path:inset(0 0 0 100%); }
.svc-ai:has([value="vec"]:checked) .svc-ai-vec { clip-path:inset(0 0 0 0); }
.svc-ai:has([value="vec"]:checked) .svc-tag-a { display:none; }
.svc-ai:has([value="vec"]:checked) .svc-tag-b { display:inline; }
.svc-ai-scan { position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; opacity:0; pointer-events:none;
  background:var(--c-sel); box-shadow:0 0 12px 1px rgba(61,116,255,.7); }
.svc-ai:has([value="vec"]:checked) .svc-ai-scan { animation:svcp-scan .9s var(--svc-ease) both; }
@keyframes svcp-scan { 0% { left:0; opacity:0; } 10% { opacity:1; } 85% { opacity:1; } 100% { left:100%; opacity:0; } }
.svc-ai-art { position:absolute; inset:0; width:100%; height:100%; }
.svc-ai-mark { position:absolute; left:35.4%; top:68.8%; width:29.2%; }
/* растр: плывущие контуры (SVG-фильтр), размытие, цветная «бахрома» */
.svc-ai-smudge { filter:url(#svcp-ai-warp); }
.svc-ai-ink { fill:#2b2a2c; stroke:#2b2a2c; }
.svc-ai-scratch { fill:none; stroke:#2b2a2c; stroke-width:1.2; stroke-linecap:round; }
.svc-ai-ghost-r { fill:#d6403a; stroke:#d6403a; opacity:.4; }
.svc-ai-ghost-c { fill:#24a0c4; stroke:#24a0c4; opacity:.4; }
.svc-logo--raw { filter:url(#svcp-ai-warp-px) blur(.5px) drop-shadow(1.4px 0 0 rgba(214,64,58,.45)) drop-shadow(-1.4px 0 0 rgba(36,160,196,.45)); }
/* вектор: чистая заливка + контур, опорные точки и усы */
.svc-ai-vec-ink { fill:#1b1c1f; stroke:#1b1c1f; }
.svc-ai-path { fill:none; stroke:var(--c-sel); stroke-width:.45; }
.svc-ai-handle { fill:none; stroke:var(--c-sel); stroke-width:.4; }
.svc-ai-knob { fill:var(--c-sel); }
.svc-ai-node { fill:#fff; stroke:var(--c-sel); stroke-width:.5; }
.svc-ai-node--on { fill:var(--c-sel); }
.svc-ai-box { fill:none; stroke:var(--c-sel); stroke-width:.45; }

/* ═════ 08 · скругление углов: радиус пластины = --rr (в cqi сцены, чтобы масштабировался) + лупа на угол ═════ */
.svc-round .svc-stage { container-type:inline-size; }
.svc-round { --rr:5.5cqi; }
.svc-round:has(.svc-r0 :checked) { --rr:.3cqi; }
.svc-round:has(.svc-r1 :checked) { --rr:2.6cqi; }
.svc-round:has(.svc-r2 :checked) { --rr:5.5cqi; }
.svc-round:has(.svc-r3 :checked) { --rr:10cqi; }
.svc-round .svc-plate { margin-right:14%; border-radius:var(--rr); transition:transform .6s var(--svc-ease), border-radius .5s var(--svc-ease); }
.svc-loupe { position:absolute; right:6%; bottom:9%; width:24%; aspect-ratio:1; pointer-events:none; }
.svc-loupe::after { content:""; position:absolute; left:83%; top:81%; width:36%; height:9%; border-radius:3px; transform-origin:0 50%; rotate:45deg;
  background:linear-gradient(180deg, #474b52, #1b1d21); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 10px -4px rgba(0,0,0,.8); }
.svc-loupe-lens { position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #1c1e23, #0b0c0e);
  box-shadow:0 0 0 3px #2b2e34, 0 0 0 4px rgba(245,245,245,.28), 0 18px 28px -10px rgba(0,0,0,.9); }
.svc-loupe-lens::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(55% 40% at 32% 22%, rgba(255,255,255,.2), rgba(255,255,255,0) 70%); box-shadow:inset 0 0 14px rgba(0,0,0,.6); }
.svc-loupe-corner { position:absolute; left:34%; top:34%; width:110%; height:110%; border-top-left-radius:calc(var(--rr) * 2.4);
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.06) 1px 3px), linear-gradient(120deg, #9aa0a8, #6b7077 55%, #8a9098);
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.45); transition:border-radius .5s var(--svc-ease); }

/* ═════ 09 · пробитие отверстий: раскладки на пластине, отверстия «пробиваются» (масштаб + появление) ═════ */
.svc-hole { position:absolute; left:var(--x); top:var(--y); width:var(--d, 7%); aspect-ratio:1; border-radius:50%; translate:-50% -50%;
  background:radial-gradient(circle closest-side at 50% 58%, #050607 0 62%, #16181c 100%);
  box-shadow:inset 0 2px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.4), 0 -.5px 0 rgba(0,0,0,.4); }
.svc-holes .svc-hole { opacity:0; scale:1.9; transition:opacity .25s var(--svc-ease) var(--dl, 0s), scale .45s var(--svc-ease) var(--dl, 0s); }
.svc-holes:has([value="top2"]:checked) :is(.svc-hp1, .svc-hp2),
.svc-holes:has([value="corners"]:checked) :is(.svc-hp3, .svc-hp4, .svc-hp5, .svc-hp6),
.svc-holes:has([value="center"]:checked) .svc-hp7,
.svc-holes:has([value="side"]:checked) .svc-hp8 { opacity:1; scale:1; }
@supports not selector(:has(*)) { .svc-holes :is(.svc-hp1, .svc-hp2) { opacity:1; scale:1; } }
.svc-hp1 { --x:30%; --y:16%; }            .svc-hp2 { --x:70%; --y:16%; --dl:.06s; }
.svc-hp3 { --x:9%; --y:14%; }             .svc-hp4 { --x:91%; --y:14%; --dl:.06s; }
.svc-hp5 { --x:91%; --y:86%; --dl:.12s; } .svc-hp6 { --x:9%; --y:86%; --dl:.18s; }
.svc-hp7 { --x:50%; --y:15%; }            .svc-hp8 { --x:6.5%; --y:50%; }
.svc-guides { position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    repeating-linear-gradient(180deg, rgba(16,20,28,.32) 0 4px, transparent 4px 8px) 50% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(16,20,28,.32) 0 4px, transparent 4px 8px) 0 50% / 100% 1px no-repeat; }

/* ═════ 10 · люверсы: табличка на шнуре, крупный план отверстия ═════ */
.svc-hang { position:relative; width:76%; max-width:440px; margin-top:13%; transform-origin:50% -85%; transition:rotate .9s var(--svc-ease); }
.svc-grom .svc-hang .svc-plate { width:100%; aspect-ratio:2.4 / 1; transform:none; }
.svc-hang-mark { position:absolute; left:50%; top:74%; width:20%; translate:-50% -50%; }
.svc-hang .svc-hole { --x:50%; --y:34%; --d:11%; scale:1 1.16; translate:-50% -56%;
  transition:scale .45s var(--svc-ease), translate .45s var(--svc-ease); }
/* истирание края без люверса: светлая потёртая кромка и царапины сверху, где трётся шнур */
.svc-wear { position:absolute; left:50%; top:34%; width:19%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle closest-side at 50% 45%, rgba(236,239,243,0) 0 54%, rgba(236,239,243,.75) 58%, rgba(236,239,243,.22) 72%, rgba(236,239,243,0) 88%);
  -webkit-mask:linear-gradient(180deg, #000 18%, rgba(0,0,0,.35) 50%, transparent 72%); mask:linear-gradient(180deg, #000 18%, rgba(0,0,0,.35) 50%, transparent 72%);
  transition:opacity .35s var(--svc-ease); }
.svc-wear::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from -80deg at 50% 45%, rgba(255,255,255,.5) 0 .7deg, rgba(255,255,255,0) .7deg 6.5deg);
  -webkit-mask:radial-gradient(circle closest-side at 50% 45%, transparent 0 58%, #000 62%, transparent 100%);
  mask:radial-gradient(circle closest-side at 50% 45%, transparent 0 58%, #000 62%, transparent 100%); }
.svc-cord { position:absolute; left:50%; top:-85%; width:2.6%; height:119%; translate:-50% 0; border-radius:99px; pointer-events:none;
  background:repeating-linear-gradient(-60deg, #cdbb93 0 2px, #9d8a63 2px 4px);
  box-shadow:2px 4px 5px rgba(0,0,0,.45);
  -webkit-mask:linear-gradient(180deg, #000 88%, rgba(0,0,0,.25)); mask:linear-gradient(180deg, #000 88%, rgba(0,0,0,.25)); }
/* люверс: кольцо-тор (конический металл + радиальная светотень); маска — на ::before, тень — filter на элементе */
.svc-grommet { position:absolute; left:50%; top:34%; width:21%; aspect-ratio:1; translate:-50% -50%; opacity:0; scale:1.45; pointer-events:none;
  filter:drop-shadow(0 3px 2.5px rgba(0,0,0,.6));
  transition:opacity .3s var(--svc-ease), scale .55s cubic-bezier(.34,1.4,.5,1); }
.svc-grommet::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle closest-side, rgba(0,0,0,.55) 46%, rgba(0,0,0,0) 56%, rgba(255,255,255,.42) 67%, rgba(255,255,255,0) 80%, rgba(0,0,0,.45) 100%),
    conic-gradient(from 200deg, #f7f8f9, #8b9198 14%, #e2e5e9 30%, #676d74 48%, #cdd1d6 64%, #787e85 82%, #f7f8f9);
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 45%, #000 47%); mask:radial-gradient(circle closest-side, transparent 0 45%, #000 47%); }
.svc-grom:has([value="ring"]:checked) .svc-hang .svc-hole { scale:1; translate:-50% -50%; }
.svc-grom:has([value="ring"]:checked) .svc-wear { opacity:0; }
.svc-grom:has([value="ring"]:checked) .svc-grommet { opacity:1; scale:1; }
@media (hover:hover) { .svc-grom:hover .svc-hang { rotate:-1.8deg; } }

/* ═════ 11 · подбор по номерам: стопка табличек пересобирается по возрастанию ═════ */
.svc-stack { position:relative; width:86%; max-width:480px; aspect-ratio:1.75; container-type:inline-size; }
.svc-sort .svc-stack .svc-plate { position:absolute; left:5%; top:3%; width:50%; border-radius:5px;
  --k:var(--sk); z-index:var(--k);
  transform:translate(calc(var(--k) * 18% + var(--jx, 0%)), calc(var(--k) * 18.3% + var(--jy, 0%))) rotate(var(--jr, 0deg));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.55), 0 10px 16px -8px rgba(0,0,0,.85);
  transition:transform .7s var(--svc-ease) var(--dl, 0s), z-index .7s linear var(--dl, 0s); }
/* --n — место по номеру, --sk — место «как пришла», --j* — небрежность стопки */
.svc-t1 { --n:0; --sk:3; --jx:-5%; --jy:6%; --jr:-4deg; }
.svc-t2 { --n:1; --sk:0; --jx:9%; --jy:-4%; --jr:3deg; --dl:.05s; }
.svc-t3 { --n:2; --sk:4; --jx:-12%; --jy:-6%; --jr:5deg; --dl:.1s; }
.svc-t4 { --n:3; --sk:1; --jx:6%; --jy:4%; --jr:-6deg; --dl:.15s; }
.svc-t5 { --n:4; --sk:2; --jx:14%; --jy:-2%; --jr:2deg; --dl:.2s; }
.svc-sort:has([value="sorted"]:checked) .svc-stack .svc-plate { --k:var(--n); --jx:0%; --jy:0%; --jr:0deg; }
.svc-tab-no { position:absolute; left:6%; top:4%; font:600 4.2cqi/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing:.02em;
  color:#2a2d32; font-variant-numeric:tabular-nums; text-shadow:-.5px -.6px 0 rgba(0,0,0,.45), .6px .8px 0 rgba(255,255,255,.35); }
.svc-tab-mark { position:absolute; right:7%; bottom:12%; width:28%; }

/* телефон */
@media (max-width:640px) {
  .svc-sheets { width:94%; }
  .svc-sheet-w { display:none; }
  .svc-board { width:84%; }
  .svc-hang { width:84%; }
  .svc-stack { width:94%; }
}

/* вкладка «Допуслуги» на главной: кнопка перехода к форме заказа (.svc-cta стоит ВНЕ .svc — токены --svc-* тут не определены, цвета явно) */
.svc-host { padding-bottom:40px; text-align:left; color:var(--logo); font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.svc-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:48px; padding:26px 28px; border:1px solid rgba(245,245,245,.14); border-radius:18px;
  background:radial-gradient(100% 140% at 0% 0%, rgba(200,215,255,.07), transparent 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:14px; line-height:1.55; color:rgba(245,245,245,.62); }
.svc-cta > span { flex:1 1 240px; text-wrap:pretty; }
.svc-cta-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:14px 26px; border:1px solid var(--logo); border-radius:12px;
  background:var(--logo); color:#0a0a0b; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:inherit; font-size:11px; line-height:1.2; letter-spacing:.22em; text-transform:uppercase; transition:background-color .35s cubic-bezier(.2,.8,.2,1), color .35s cubic-bezier(.2,.8,.2,1); }
.svc-cta-btn::after { content:"→"; letter-spacing:0; font-size:14px; transition:translate .35s cubic-bezier(.2,.8,.2,1); }
.svc-cta-btn:hover, .svc-cta-btn:focus-visible { background:transparent; color:var(--logo); outline:none; }
.svc-cta-btn:hover::after { translate:3px 0; }
.svc-cta-btn:focus-visible { box-shadow:0 0 0 3px #0a0a0b, 0 0 0 4px var(--logo); }
@media (max-width:640px) { .svc-cta { padding:22px 20px; } .svc-cta-btn { width:100%; } }

/* ═════ оболочка страницы /dopuslugi/ (pages.css общий — правим только здесь, в области страницы с блоками .svc) ═════
   main.pg:has(> .svc) — только страница допуслуг; вкладка на главной (div.pg.svc-host) сюда не попадает. */
body:has(> main.pg > .svc) .pg-top > .pg-btn { padding:12px 20px; border-radius:11px; }
body:has(> main.pg > .svc) .pg-top > .pg-btn:focus-visible,
main.pg:has(> .svc) .pg-btn:focus-visible { box-shadow:0 0 0 3px #0a0a0b, 0 0 0 4px var(--logo); }
body:has(> main.pg > .svc) .pg-nav a:focus-visible { outline:2px solid var(--logo); outline-offset:4px; border-radius:2px; }

/* шапка страницы: крупный тонкий заголовок, спокойный лид */
main.pg:has(> .svc) .pg-crumbs { letter-spacing:.04em; }
main.pg:has(> .svc) .pg-crumbs a { text-underline-offset:3px; }
main.pg:has(> .svc) > h1 { max-width:none; margin-top:24px; font-size:clamp(34px, 5.6vw, 56px); line-height:1.06; letter-spacing:-.024em; text-wrap:balance; }
main.pg:has(> .svc) > .pg-lead { max-width:600px; margin-top:20px; font-size:18px; line-height:1.6; opacity:1; color:rgba(245,245,245,.74); text-wrap:pretty; }

/* общие заголовки нижних секций — в тон заголовкам блоков */
main.pg:has(> .svc) > .pg-faq > h2, main.pg:has(> .svc) > .pg-rel > h2, main.pg:has(> .svc) > .pg-cta h2 {
  font-weight:300; font-size:clamp(24px, 3vw, 30px); line-height:1.15; letter-spacing:-.014em; }

/* FAQ: на всю ширину, на десктопе — заголовок слева, вопросы справа; плавное раскрытие (::details-content, где поддерживается) */
main.pg:has(> .svc) > .pg-faq { max-width:none; margin-top:96px; padding-top:28px; border-top:1px solid rgba(245,245,245,.12); interpolate-size:allow-keywords; }
main.pg:has(> .svc) > .pg-faq details:first-of-type { margin-top:20px; }
main.pg:has(> .svc) .pg-faq summary { min-height:64px; padding:16px 0; gap:24px; font-size:17px; line-height:1.4; transition:color .3s cubic-bezier(.2,.8,.2,1); }
main.pg:has(> .svc) .pg-faq summary::after { width:32px; height:32px; border:1px solid rgba(245,245,245,.22); border-radius:50%; opacity:.75;
  background-size:11px 1px, 1px 11px; transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, opacity .3s; }
main.pg:has(> .svc) .pg-faq summary:hover::after, main.pg:has(> .svc) .pg-faq details[open] summary::after { border-color:rgba(245,245,245,.5); opacity:1; }
main.pg:has(> .svc) .pg-faq summary:focus-visible { outline:2px solid var(--logo); outline-offset:4px; border-radius:6px; }
main.pg:has(> .svc) .pg-faq details p { margin:0 0 24px; max-width:620px; padding-right:56px; font-size:15px; line-height:1.65; opacity:1; color:rgba(245,245,245,.72); }
@supports selector(::details-content) {
  main.pg:has(> .svc) .pg-faq details::details-content { block-size:0; overflow:hidden;
    transition:block-size .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete; }
  main.pg:has(> .svc) .pg-faq details[open]::details-content { block-size:auto; }
}
@media (min-width:820px) {
  main.pg:has(> .svc) > .pg-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:48px; align-items:start; }
  main.pg:has(> .svc) > .pg-faq > h2 { grid-column:1; grid-row:1 / span 12; padding-top:20px; }
  main.pg:has(> .svc) > .pg-faq > details { grid-column:2; }
}

/* призыв: на всю ширину, метки обреза по углам (как на сценах), кнопки справа */
main.pg:has(> .svc) > .pg-cta { position:relative; max-width:none; margin-top:80px; padding:36px 28px; border-color:rgba(245,245,245,.14); border-radius:18px;
  background:radial-gradient(90% 160% at 0% 0%, rgba(200,215,255,.08), transparent 65%), rgba(245,245,245,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 28px 56px -40px rgba(0,0,0,.9); }
main.pg:has(> .svc) > .pg-cta::after { content:""; position:absolute; inset:12px; pointer-events:none; --t:rgba(245,245,245,.24);
  background:
    linear-gradient(var(--t), var(--t)) left top / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) left top / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) right top / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 10px 1px no-repeat, linear-gradient(var(--t), var(--t)) right bottom / 1px 10px no-repeat; }
main.pg:has(> .svc) > .pg-cta p { margin-top:10px; max-width:460px; font-size:15px; line-height:1.6; opacity:1; color:rgba(245,245,245,.68); text-wrap:pretty; }
main.pg:has(> .svc) .pg-cta-row { position:relative; z-index:1; gap:12px; margin-top:26px; }
main.pg:has(> .svc) .pg-cta-row .pg-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:15px 26px; border-radius:12px; line-height:1.2; letter-spacing:.2em; }
main.pg:has(> .svc) .pg-cta-row .pg-btn-solid::after { content:"→"; letter-spacing:0; font-size:14px; transition:translate .35s cubic-bezier(.2,.8,.2,1); }
main.pg:has(> .svc) .pg-cta-row .pg-btn-solid:hover::after { translate:3px 0; }
@media (min-width:820px) {
  main.pg:has(> .svc) > .pg-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; align-items:center; padding:44px 48px; }
  main.pg:has(> .svc) .pg-cta-row { grid-column:2; grid-row:1 / span 2; margin-top:0; }
}
@media (max-width:640px) {
  main.pg:has(> .svc) .pg-cta-row { flex-direction:column; }
  main.pg:has(> .svc) .pg-cta-row .pg-btn { width:100%; }
}

/* смотрите также: карточки со стрелкой, прижатой к низу */
main.pg:has(> .svc) > .pg-rel { margin-top:80px; }
main.pg:has(> .svc) > .pg-rel ul { gap:16px; margin-top:20px; }
main.pg:has(> .svc) .pg-rel a { gap:8px; min-height:168px; padding:22px 22px 20px; border-color:rgba(245,245,245,.12); border-radius:18px;
  background:radial-gradient(120% 80% at 0% 0%, rgba(200,215,255,.04), transparent 60%), rgba(245,245,245,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .35s cubic-bezier(.2,.8,.2,1), background-color .35s cubic-bezier(.2,.8,.2,1); }
main.pg:has(> .svc) .pg-rel a::after { content:"→"; margin-top:auto; padding-top:14px; font-size:16px; line-height:1; opacity:.5;
  transition:translate .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
main.pg:has(> .svc) .pg-rel a:hover::after, main.pg:has(> .svc) .pg-rel a:focus-visible::after { translate:4px 0; opacity:1; }
main.pg:has(> .svc) .pg-rel a:focus-visible { box-shadow:0 0 0 3px #0a0a0b, 0 0 0 4px var(--logo); }
main.pg:has(> .svc) .pg-rel b { font-size:16px; line-height:1.3; }
main.pg:has(> .svc) .pg-rel span { font-size:13.5px; line-height:1.55; opacity:.62; text-wrap:pretty; }

/* подвал страницы — больше воздуха */
body:has(> main.pg > .svc) .pg-foot { margin-top:40px; }
body:has(> main.pg > .svc) .pg-foot-in { padding-top:32px; padding-bottom:40px; }

/* телефон: цели касания навигации ≥44px, лид чуть мельче */
@media (max-width:640px) {
  body:has(> main.pg > .svc) .pg-nav { gap:0 18px; }
  body:has(> main.pg > .svc) .pg-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0; }
  body:has(> main.pg > .svc) .pg-nav a[aria-current] { box-shadow:none; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; }
  main.pg:has(> .svc) > .pg-lead { font-size:16px; }
  main.pg:has(> .svc) > .pg-faq { margin-top:72px; }
  main.pg:has(> .svc) .pg-faq summary { font-size:16px; }
  main.pg:has(> .svc) .pg-faq details p { padding-right:0; }
  main.pg:has(> .svc) > .pg-cta, main.pg:has(> .svc) > .pg-rel { margin-top:64px; }
  main.pg:has(> .svc) .pg-rel a { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  .svc-cta-btn, .svc-cta-btn::after, main.pg:has(> .svc) .pg-faq summary, main.pg:has(> .svc) .pg-faq summary::after,
  main.pg:has(> .svc) .pg-cta-row .pg-btn-solid::after, main.pg:has(> .svc) .pg-rel a, main.pg:has(> .svc) .pg-rel a::after { transition:none; }
  main.pg:has(> .svc) .pg-faq details::details-content { transition:none; }
}

/* ===== «Из чего делаем»: материалы (как в форме заказа — материал выбирается первым) ===== */
.svc-mats { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:32px; }
@media (min-width:760px) { .svc-mats { grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
.svc-mc { position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:22px 22px 24px; border:1px solid var(--svc-line); border-radius:18px;
  background:radial-gradient(120% 80% at 0% 0%, rgba(200,215,255,.05), transparent 60%), rgba(245,245,245,.018); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.svc-coin { width:48px; height:48px; margin-bottom:10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5); }
.svc-coin--alu { background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.3), rgba(255,255,255,0) 60%), linear-gradient(112deg, #b3b8be 0%, #cdd1d6 40%, #babfc5 62%, #c4c8cd 100%); }
.svc-coin--steel { background:linear-gradient(118deg, #6f7780 0%, #c7ced6 18%, #8b939c 30%, #f1f4f7 44%, #a0a8b1 55%, #646c75 74%, #b9c0c8 90%, #7c848d 100%); }
.svc-coin--brass { background:linear-gradient(105deg, #a8812f 0%, #e3c47a 28%, #c79b45 50%, #f0d58e 66%, #9c7428 100%); }
.svc .svc-mc-h { font-weight:500; font-size:19px; line-height:1.25; letter-spacing:-.005em; }
.svc .svc-mc-p { font-size:14px; line-height:1.5; color:var(--svc-soft); }
.svc .svc-mc-l { margin-top:12px; font-size:10.5px; line-height:1.4; letter-spacing:.22em; text-transform:uppercase; color:var(--svc-mute); }
.svc .svc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.svc .svc-chips li { padding:7px 12px; border:1px solid var(--svc-line-2); border-radius:10px; font-size:13px; line-height:1.2; color:var(--svc-soft); background:rgba(245,245,245,.03); }