/* SERVICE PAGES — /{slug}/ */
/* ============= HERO ============= */
.hero{position:relative;padding:32px 0 0;border-bottom:1px solid var(--rule);width:100%;max-width:100%;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end;min-width:0}
.hero-grid > :first-child{align-self:start}
.hero h1{font-size:clamp(32px,4.2vw,64px);letter-spacing:-0.035em;max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:none}
.hero h1 .accent-word{color:var(--ink);position:relative;display:inline-block}
.hero h1 .accent-word::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:0.08em;height:0.18em;
  background:var(--accent);z-index:-1;border-radius:2px;
}
.hero h1 em{font-style:normal;color:var(--ink-3);font-weight:300}
.hero-sub{margin-top:20px;max-width:540px;font-size:16px;line-height:1.55;color:var(--ink-2);overflow-wrap:normal;word-break:normal;hyphens:none}
.hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:36px;border-top:1px solid var(--rule);
}
.hero-meta > div{padding:16px 16px 18px 16px;border-right:1px solid var(--rule);min-width:0}
.hero-meta > div:last-child{border-right:0}
.hero-meta .num-big{font-family:'Manrope',sans-serif;font-weight:600;font-size:32px;letter-spacing:-0.03em;line-height:1}
.hero-meta .lbl{margin-top:8px;font-size:12px;color:var(--ink-3);letter-spacing:0.02em;overflow-wrap:normal;word-break:normal;hyphens:none}

/* hero right: production load card */
.hero-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:14px;min-width:0;
}
.hero-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;min-width:0}
.hero-card-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase}
.hero-card-id{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);white-space:nowrap}
.ph{
  position:relative;width:100%;aspect-ratio:16/10;
  background:
    repeating-linear-gradient(135deg,transparent 0 11px,rgba(14,15,16,0.045) 11px 12px),
    var(--bg-2);
  border:1px solid var(--rule);border-radius:2px;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:8px;
}
.ph::before{
  content:"";position:absolute;top:14px;right:14px;
  width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:0.6;
}
.ph-cap{
  font-family:'IBM Plex Mono',monospace;font-size:9px;
  color:var(--ink-2);letter-spacing:0.06em;text-transform:uppercase;
  background:rgba(251,250,246,0.85);padding:4px 6px;border:1px solid var(--rule);
  position:relative;z-index:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ph.dark .ph-cap{color:var(--paper);background:rgba(20,21,23,0.62);border-color:rgba(255,255,255,0.18)}
.hero-card-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:8px;border-top:1px solid var(--rule)}
.hero-card-spec > div{padding:7px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:10px;font-size:12px;min-width:0}
.hero-card-spec > div:nth-child(odd){padding-right:10px;border-right:1px solid var(--rule)}
.hero-card-spec > div:nth-child(even){padding-left:10px}
.hero-card-spec .k{color:var(--ink-3);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;min-width:0}
.hero-card-spec .v{color:var(--ink);font-weight:500;font-family:'IBM Plex Mono',monospace;text-align:right;min-width:0}
.hero-card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);min-width:0}
.hero-card-price .label{font-size:11px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.06em}
.hero-card-price .price{font-family:'Manrope',sans-serif;font-weight:600;font-size:24px;letter-spacing:-0.02em;margin-top:4px}
.hero-card-price .price small{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;color:var(--ink-3);margin-left:4px}

/* capacity bar */
.cap-bar-wrap{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
.cap-bar-label{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.cap-bar-track{height:6px;background:var(--bg-2);border-radius:2px;overflow:hidden}
.cap-bar-fill{height:100%;background:var(--accent);border-radius:2px;width:68%}

/* ============= MARQUEE ============= */
.hero-marquee{
  margin-top:32px;border-top:1px solid var(--rule);overflow:hidden;overflow-x:clip;
  width:100%;max-width:100%;
}
.marquee-track{
  display:flex;gap:64px;padding:18px 0;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;animation:scroll 42s linear infinite;
  width:max-content;
}
.marquee-track span{display:inline-flex;align-items:center;gap:64px}
.marquee-track span::after{content:"●";color:var(--accent);font-size:10px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============= SECTION ============= */
.sec{padding:120px 0;border-bottom:1px solid var(--rule);width:100%;max-width:100%}
.sec.dark{background:var(--dark);color:var(--on-dark);border-bottom-color:var(--dark-3)}
.sec.dark .eyebrow{color:var(--accent)}
.sec.dark .sec-head h2 em{color:var(--on-dark-2)}
.sec.accent-bg{background:var(--accent)}

.sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:end;margin-bottom:64px;min-width:0}
.sec-head > *{min-width:0}
.sec-head h2{font-size:clamp(40px,4.6vw,72px);letter-spacing:-0.03em;min-width:0}
.sec-head h2 em{font-style:normal;font-weight:300;color:var(--ink-3)}
.sec-head .eyebrow{margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sec-head .eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.sec-head-right{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:520px;min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:none}
.sec.dark .sec-head-right{color:var(--on-dark-2)}

/* ============= SERVICE TYPES GRID ============= */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc-item{
  background:var(--paper);padding:32px;
  display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:background .15s;
}
.svc-item:hover{background:var(--bg)}
.svc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-3);letter-spacing:0.06em}
.svc-photo{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  border-radius:2px;
  background:
    repeating-linear-gradient(135deg,transparent 0 10px,rgba(14,15,16,0.04) 10px 11px),
    var(--bg-2);
  display:flex;
  align-items:flex-end;
  padding:8px;
  overflow:hidden;
}
.svc-photo::before{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
  opacity:0.55;
}
.svc-photo span{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:rgba(251,250,246,0.86);
  border:1px solid var(--rule);
  padding:3px 6px;
  position:relative;
  z-index:1;
}
.svc-item h3{font-family:'Manrope',sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.015em;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
.svc-item p{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1;overflow-wrap:normal;word-break:normal;hyphens:none}
.svc-item-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.06em;min-width:0}
.svc-item-foot a{color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
.svc-item-foot a:hover{gap:10px}

/* ============= PROCESS ============= */
.process-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.process-step{
  padding:28px 24px;border-right:1px solid var(--rule);
  position:relative;min-width:0;
}
.process-step:last-child{border-right:0}
.process-step::after{
  content:"";position:absolute;top:50px;right:-1px;
  width:1px;height:24px;background:var(--rule);display:none;
}
.step-num{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  margin-bottom:20px;
}
.process-step h4{font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.01em;margin-bottom:8px;overflow-wrap:normal;word-break:normal;hyphens:none}
.process-step p{font-size:13px;color:var(--ink-2);line-height:1.5;overflow-wrap:normal;word-break:normal;hyphens:none}
.process-step .step-time{
  margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:0.06em;
}
/* ============= PRODUCTION / FEATURES ============= */
.prod-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.prod-img{position:relative}
.prod-img .ph{height:100%;aspect-ratio:4/5}
.prod-img .ph::before{display:none}
.prod-img-stamp{
  position:absolute;top:24px;left:24px;
  background:var(--accent);color:var(--accent-ink);
  padding:14px 18px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:0.08em;
  border-radius:2px;display:flex;flex-direction:column;gap:2px;
}
.prod-img-stamp strong{font-size:18px;letter-spacing:-0.01em;text-transform:none;font-family:'Manrope',sans-serif;font-weight:600}
.prod-features{display:flex;flex-direction:column;gap:0}
.prod-features > div{padding:28px 0;border-bottom:1px solid var(--dark-3);display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start}
.prod-features > div:first-child{padding-top:0}
.prod-features > div:last-child{border-bottom:0}
.prod-features .pf-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:0.06em}
.prod-features h4{font-family:'Manrope',sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.015em;margin-bottom:8px}
.prod-features p{font-size:14px;color:var(--on-dark-2);line-height:1.55}
.prod-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:64px;border-top:1px solid var(--dark-3)}
.prod-stats > div{padding:24px;border-right:1px solid var(--dark-3)}
.prod-stats > div:last-child{border-right:0}
.prod-stats .num-big{font-family:'Manrope',sans-serif;font-weight:600;font-size:56px;letter-spacing:-0.03em;line-height:1.05;display:inline-flex;align-items:flex-start;gap:0.06em}
.prod-stats .num-big sup{font-size:0.46em;color:var(--accent);margin:0.14em 0 0;font-weight:500;line-height:1;position:static;top:auto}
.prod-stats .lbl{margin-top:12px;font-size:13px;line-height:1.45;color:var(--on-dark-2)}

/* SERVICE RESPONSIVE */
@media(max-width:1100px){
.hero-grid,.prod-grid{grid-template-columns:1fr;gap:48px}
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.prod-stats > div:nth-child(2n){border-right:0}
.sec-head{grid-template-columns:1fr;gap:24px;align-items:start;margin-bottom:48px}
.sec-head-right{max-width:none}
}
@media(max-width:700px){
.svc-grid{grid-template-columns:1fr}
.hero h1{font-size:clamp(28px,8vw,40px);line-height:1.05}
.hero-meta{grid-template-columns:1fr 1fr}
.hero-meta > div:nth-child(3){display:none}
.hero-card-spec{grid-template-columns:1fr}
.hero-card-spec > div:nth-child(odd){padding-right:0;border-right:0}
.hero-card-spec > div:nth-child(even){padding-left:0}
.calc-row.two{grid-template-columns:1fr}
}
@media(max-width:680px){
.sec{padding:64px 0}
.sec-head{margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,8vw,42px);line-height:1.04}
.process-grid{grid-template-columns:1fr}
.process-step{border-right:0;border-bottom:1px solid var(--rule);padding:24px 20px}
.process-step:last-child{border-bottom:0}
.prod-stats .num-big{font-size:clamp(36px,10vw,48px)}
}
@media(max-width:480px){
.hero-meta{grid-template-columns:1fr}
.hero-meta > div:nth-child(3){display:block}
.hero-meta > div{border-right:0;border-bottom:1px solid var(--rule)}
.hero-meta > div:last-child{border-bottom:0}
}
@media(max-width:390px){
.prod-stats{grid-template-columns:1fr}
.prod-stats > div{border-right:0;border-bottom:1px solid var(--dark-3)}
.prod-stats > div:last-child{border-bottom:0}
}

/* Блоки статей и решений на странице услуги */
.zakaz-service-related{padding-top:56px;padding-bottom:64px;border-top:1px solid var(--rule)}
.zakaz-service-related + .zakaz-service-related{padding-top:40px;border-top:0}
.zakaz-service-related + .zakaz-service-solutions{padding-top:40px;border-top:0}
.service-related-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.service-related-head .display{margin:0}
.service-related-grid--articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-related-row{display:flex;flex-direction:column;gap:8px;min-width:0;height:100%;padding:18px 20px;border:1px solid var(--rule);border-radius:4px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.service-related-row:hover{border-color:var(--ink);background:var(--bg-2)}
.service-related-row__title{font-weight:600;font-size:16px;line-height:1.3;color:var(--ink)}
.service-related-row__meta{font-size:14px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.service-related-foot{margin:20px 0 0;font-size:13px;color:var(--ink-2)}
@media(max-width:960px){.service-related-grid--articles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.service-related-grid--articles{grid-template-columns:1fr}}

/* Решения — разметка как у #cases (cases-grid / case из project.css) */
.zakaz-service-solutions{padding-top:56px;padding-bottom:0;border-top:1px solid var(--rule)}
.zakaz-service-solutions .cases-grid{margin-top:8px}
.zakaz-service-solutions__foot{margin-top:40px;padding-top:32px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.zakaz-service-solutions__count{font-size:14px;color:var(--ink-3)}
@media(max-width:900px){.zakaz-service-solutions__foot{flex-direction:column;align-items:flex-start}}

/* SEO-текст внизу страницы услуги */
.zakaz-service-seo{padding-top:72px;padding-bottom:80px;border-top:1px solid var(--rule)}
.service-seo-title{margin:0 0 20px;font-size:clamp(24px,3vw,32px);letter-spacing:-0.02em}
.service-seo-body{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:900px}
.service-seo-body p{margin:0 0 16px}
.service-seo-body h3{color:var(--ink);margin:28px 0 12px;font-size:18px;font-weight:600}
.service-seo-body ul,.service-seo-body ol{margin:0 0 16px;padding-left:1.25em}
.service-seo-body li{margin-bottom:6px}
.service-seo-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.service-seo-body a:hover{color:var(--accent)}