/* Страницы услуг. Собираются скриптом tools/build_services.py. */
.service-hero{padding:95px 5vw 85px;border-bottom:1px solid var(--line)}
.service-hero h1{font-size:clamp(44px,7vw,104px);font-weight:500;line-height:.94;letter-spacing:-.065em;max-width:1200px;margin:22px 0 32px;text-wrap:balance}
.service-hero>p:not(.kicker){font-size:20px;color:var(--muted);max-width:700px;margin-bottom:36px}

.services{background:#e0e4dc;padding:90px 5vw}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#aeb6aa;border:1px solid #aeb6aa;margin-top:36px}
.service-grid.count-4{grid-template-columns:repeat(4,1fr)}
.service{background:#e0e4dc;padding:28px;min-height:230px}
.service span{font:11px ui-monospace,SFMono-Regular,monospace;color:#727a70}
.service h3{font-size:25px;font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:40px 0 12px}
.service p{color:#626a60;line-height:1.6;font-size:15px}

.service-examples{padding:110px 5vw 90px}
.service-examples .section-head{margin-bottom:30px}
.project-row{display:grid;grid-template-columns:80px .8fr 1.2fr 190px;gap:35px;padding:40px 0;border-top:1px solid var(--line);align-items:start}
.project-row .index{font:12px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}
.project-row h3{font-size:clamp(30px,4vw,56px);font-weight:500;letter-spacing:-.055em;line-height:1}
.project-row h3 small{display:block;font:12px ui-monospace,SFMono-Regular,monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:12px}
.project-description{color:var(--muted);line-height:1.7}
.project-links{display:grid;justify-items:start;gap:10px;font-size:13px}
.project-links a{border-bottom:1px solid currentColor}
.stack{font:12px ui-monospace,SFMono-Regular,monospace;color:var(--muted);padding-top:28px;border-top:1px solid var(--line)}
.stack span{text-transform:uppercase;letter-spacing:.06em}

.service-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-gallery figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#242725}
.service-gallery img{width:100%;height:100%;object-fit:cover}
.service-gallery figcaption{position:absolute;left:10px;bottom:10px;padding:6px 9px;background:#f4f4f0dd;color:#373b36;font:11px ui-monospace,SFMono-Regular,monospace}

.service-process{background:var(--dark);color:#eef0ea;padding:105px 5vw}
.service-process .kicker{color:#8b9287}
.service-process h2,.other-services h2{font-size:clamp(38px,5vw,76px);line-height:1;letter-spacing:-.055em;font-weight:500;max-width:900px;margin:18px 0 56px}
.service-process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.service-process li{border-top:1px solid #3a403a;padding-top:20px}
.service-process li span{font:11px ui-monospace,SFMono-Regular,monospace;color:#8b9287}
.service-process li h3{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:28px 0 12px}
.service-process li p{color:#aeb3aa;line-height:1.6;font-size:15px}

.other-services{padding:105px 5vw 40px}
.other-services>div{border-bottom:1px solid var(--line)}
.other-service{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid var(--line);font-size:clamp(20px,2.4vw,32px);letter-spacing:-.03em;transition:opacity .2s}
.other-service span:last-child{transition:transform .2s}

.projects-contact{padding:110px 5vw}
.projects-contact h2{font-size:clamp(46px,7vw,100px);line-height:.95;letter-spacing:-.065em;font-weight:500;margin:20px 0 45px}
.projects-contact a{font-size:20px;border-bottom:1px solid currentColor}

@media(hover:hover){
  .other-service:hover{opacity:.6}
  .other-service:hover span:last-child{transform:translateX(6px)}
}
@media(max-width:1100px){
  .service-grid.count-4{grid-template-columns:repeat(2,1fr)}
  .service-process ol{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .service-hero{padding:60px 6% 70px}
  .services,.service-process,.projects-contact{padding:80px 6%}
  .service-grid,.service-grid.count-4{grid-template-columns:1fr}
  .service{min-height:0}
  .service h3{margin-top:24px}
  .service-examples{padding:80px 6% 70px}
  .project-row{grid-template-columns:42px 1fr;gap:15px 20px}
  .project-row h3,.project-description,.project-links{grid-column:2}
  .service-gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .service-process ol{grid-template-columns:1fr;gap:28px}
  .service-process li h3{margin-top:16px}
  .other-services{padding:80px 6% 20px}
}
@media(max-width:420px){.project-row h3{grid-column:1!important}}
.other-services.related{padding-bottom:0}
.other-services.related>div{margin-top:22px}
.other-services.related .other-service{font-size:clamp(18px,2vw,24px);line-height:1.25}

/* Страницы проектов. Собираются скриптом tools/build_projects.py. */
.project-hero .kicker a{border-bottom:1px solid currentColor}
.project-hero .hero-actions{margin-top:0;flex-wrap:wrap}
.project-closed{font:12px ui-monospace,SFMono-Regular,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:13px 0}
.project-shot{margin:0;padding:60px 5vw 0}
.project-shot img{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#15161a}
.project-what{padding:90px 5vw;display:grid;grid-template-columns:200px 1fr;gap:35px}
.project-what>p:last-child{font-size:clamp(20px,2.2vw,30px);line-height:1.4;letter-spacing:-.02em;max-width:980px}
.services .stack{border-top:0;padding-top:32px}
.project-service{margin:90px 5vw 0;padding:36px;background:#e0e4dc}
.project-service-link{display:inline-block;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.045em;line-height:1.05;margin:16px 0 12px;border-bottom:1px solid currentColor}
.project-service>p:not(.kicker){color:#626a60;margin-bottom:26px}
.other-service small{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-left:12px;vertical-align:middle}
@media(max-width:850px){
  .project-shot{padding:40px 6% 0}
  .project-what{padding:60px 6%;grid-template-columns:1fr;gap:16px}
  .project-service{margin:70px 6% 0;padding:24px}
  .other-service small{display:block;margin:6px 0 0}
}
/* Первый экран проекта: смысл слева, картинка или видео справа.
   Задача — уместить название, суть и кнопки без прокрутки. */
.project-hero.has-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:4vw;align-items:center;padding:52px 5vw 56px}
.project-hero.has-media h1{font-size:clamp(40px,4.6vw,72px);margin:14px 0 18px}
.project-hero.has-media .hero-text>p:not(.kicker){font-size:19px;margin-bottom:16px;max-width:46ch}
.project-hero.has-media .hero-lead{font-size:16px;line-height:1.65;color:var(--muted);margin-bottom:26px}
.project-hero.has-media .hero-actions{margin-top:0;flex-wrap:wrap}
.hero-media{min-width:0}
.hero-media video,.hero-media img{display:block;width:100%;height:auto;max-height:62vh;
  object-fit:contain;border-radius:14px;background:#0f1b2d}
.hero-media figure{margin:0}
@media(max-width:900px){
  .project-hero.has-media{grid-template-columns:1fr;gap:26px;padding:34px 6% 40px}
  .project-hero.has-media h1{font-size:clamp(38px,11vw,60px)}
  .hero-media video,.hero-media img{max-height:none}
}
/* Нарисованные карточки для проектов без скриншотов. */
.drawn-card{border-radius:14px;padding:34px 30px;min-height:330px;display:flex;
  flex-direction:column;justify-content:center;gap:18px;text-align:center}
.poster-card{background:#e7ece4;color:#1d2a1c}
.podcast-card{background:#e4e8ef;color:#172033}
.drawn-top{font:500 15px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin:0}
.drawn-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.drawn-flow span{background:#fff;border-radius:9px;padding:13px 10px;font-size:15px;font-weight:500}
.drawn-arrow{font-size:26px;opacity:.5;line-height:1}
.drawn-channel{background:#fff;border-radius:9px;padding:17px;font-size:21px;font-weight:600}
.drawn-note{margin:0;font-size:13px;opacity:.65}
@media(max-width:900px){.drawn-card{min-height:240px;padding:28px 22px}}