/* Service landings: Miro uXjVHysSPLA. All rules stay inside these fourteen pages. */ #start.service-page { --seo-ink:#3b4173; --seo-muted:#3b4173; --seo-accent:#c1492e; --seo-action:#c1492e; --seo-action-hover:#a83b24; --seo-line:#dde0eb; --seo-paper:#fff; --seo-page:#fff; --seo-soft:#f4f5f8; --service-space:clamp(40px,4.8vw,64px); --seo-section-space:var(--service-space); color:var(--seo-ink); background:#fff; font-family:Roboto,Arial,sans-serif; font-size:16px; line-height:1.65; overflow:clip; padding-top:0; display:block; } #start.service-page *, #start.service-page *::before, #start.service-page *::after { box-sizing:border-box } #start.service-page :is(h1,h2,h3,h4,p,li,label,th,td,summary,blockquote):not(:where(.kg-voice *,.kg-studio-trust *)) { color:var(--seo-ink); font-family:inherit } #start.service-page :is(p,li) { font-weight:400 } #start.service-page :is(h1,h2,h3,h4):not(:where(.kg-voice *,.kg-studio-trust *)) { text-transform:none; letter-spacing:-.035em; text-wrap:balance } #start.service-page h1 { font-size:clamp(36px,4.45vw,68px)!important; font-weight:600!important; line-height:1.05!important; margin:0 0 24px; letter-spacing:-.045em!important } #start.service-page h2:not(:where(.kg-studio-trust *)) { font-size:clamp(28px,3.1vw,44px)!important; font-weight:600!important; line-height:1.15!important; letter-spacing:-.035em!important; max-width:940px; margin:0 0 26px } #start.service-page h3:not(:where(.kg-voice *,.kg-studio-trust *)) { font-size:clamp(19px,1.65vw,24px)!important; font-weight:600!important; line-height:1.25!important; letter-spacing:-.02em!important } #start.service-page p:not(:where(.kg-voice *,.kg-studio-trust *)) { font-size:16px; line-height:1.7; margin:0 0 18px } #start.service-page :is(.mark,.headers__subtitle,.headers__pretitle,.kg-intro,.kg-kicker,.s-base__language-count,.kg-review-date,.kg-review-sources) { color:var(--seo-ink)!important; opacity:1; font-weight:400 } #start.service-page .headers { margin:0 0 28px; text-align:left; max-width:none; padding:0 } #start.service-page .headers__title { margin:0 0 20px; padding:0; max-width:940px; text-align:left } #start.service-page :is(.headers__pretitle,.kg-kicker) { display:block; margin:0 0 12px; font-size:12px!important; font-weight:600; letter-spacing:.08em; text-transform:uppercase } #start.service-page :is(.headers__subtitle,.s-need__text,.s-why__text) { font-size:17px; line-height:1.65; font-weight:400 } #start.service-page a:not(:where(.kg-voice *)) { text-underline-offset:4px } #start.service-page :is(a,button,input,select,textarea,summary):not(:where(.kg-voice *)):focus-visible { outline:3px solid var(--seo-accent); outline-offset:4px } #start.service-page :is(.kg-wrap,[class$="__container"]) { width:calc(100% - 64px); max-width:1276px; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0 } #start.service-page :is(section, .kg-section,.s-video-examples,.s-audio-examples,.s-studio,.s-stages,.s-calculator,.s-dev,.s-ar-speakers,.s-script-examples,.s-answers,.s-choice,.s-audio-prices) { padding-top:var(--service-space); padding-bottom:var(--service-space); margin-top:0; margin-bottom:0; background-color:#fff; background-image:none } /* One white page canvas; colour belongs to cards, media and contact strips. */ #start.service-page > :is(section,div):not(.homepage-contact-banner):not(.film-contact):not(.s-callback):not(.s-questions) { background-color:#fff; background-image:none } #start.service-page :is(section,.s-video-examples,.s-audio-examples,.s-studio,.s-stages,.s-calculator,.s-dev,.s-ar-speakers,.s-script-examples,.s-answers,.s-choice,.s-audio-prices) > :last-child { margin-bottom:0 } #start.service-page .s-need { background:#fff } #start.service-page :is(.s-studio,.s-why,.s-audiobook-prices,.s-audio-prices,.s-script-prices,.s-stages,.s-types,.s-answers) { background-color:#fff } #start.service-page .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 24px; border:1px solid transparent; border-radius:12px; color:var(--seo-ink); background:#fff; box-shadow:none; font:600 15px/1.4 Roboto,Arial,sans-serif; letter-spacing:0; text-transform:none; text-align:center; white-space:normal; transition:background .2s,border-color .2s,transform .2s } #start.service-page .button::after { animation:none } #start.service-page .button--orange { background:var(--seo-accent); border-color:var(--seo-accent); color:#fff } #start.service-page .button--orange:hover { background:var(--seo-action-hover); border-color:var(--seo-action-hover) } #start.service-page .button--frame { background:#fff; color:var(--seo-ink); border-color:var(--seo-line) } #start.service-page .button--frame:hover { border-color:var(--seo-ink); background:var(--seo-soft) } #start.service-page .button.js-popup[href="#order"] { background:var(--seo-accent); border-color:var(--seo-accent); color:#fff } #start.service-page .button.js-popup[href="#order"]:is(:hover,:focus-visible) { background:var(--seo-action-hover); border-color:var(--seo-action-hover); color:#fff } #start.service-page .button:active { transform:translateY(1px) } #start.service-page :is(.s-first__arrow,.s-first__icon,.button--blicked::before) { display:none } /* First screen: the same composition and type hierarchy on every service. */ #start.service-page .service-hero, #start.service-page .film-hero { padding:0 0 42px; background:#fff; min-height:0; height:auto; max-height:none } #start.service-page .breadcrumbs { width:calc(100% - 64px); max-width:1276px; margin:0 auto 32px; padding:18px 0; color:var(--seo-ink); text-align:left } #start.service-page .breadcrumbs :is(a,span) { font-size:13px } #start.service-page .breadcrumbs__item a { color:var(--seo-ink); text-decoration:none } #start.service-page .breadcrumbs__item > span { color:#a8a8a8 } #start.service-page .breadcrumbs__items { display:flex; flex-wrap:wrap; align-items:center; gap:8px 0 } #start.service-page .breadcrumbs__item { position:relative; display:inline-flex; align-items:center; margin:0; padding:0; line-height:1.5; text-align:left } #start.service-page .breadcrumbs__item:not(:last-child) { margin-right:0; padding-right:0 } #start.service-page .breadcrumbs__item::before { content:none; display:none } #start.service-page .breadcrumbs__item:not(:last-child)::after { content:"→"; position:static; display:inline-block; width:auto; height:auto; margin:0 10px; border:0; background:none; color:var(--seo-ink); font-size:14px; font-weight:400; line-height:1; transform:none; opacity:.7 } #start.service-page .service-hero__layout, #start.service-page .film-hero__container { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(32px,5vw,72px) } #start.service-page .service-hero__intro { max-width:58ch; margin:0; font-size:17px; line-height:1.7 } #start.service-page .service-hero__secondary-link { align-self:center; color:var(--seo-ink); font-size:15px; font-weight:500; text-decoration:underline; text-decoration-color:var(--seo-accent); text-decoration-thickness:1px; text-underline-offset:5px } #start.service-page .service-hero__secondary-link:is(:hover,:focus-visible) { color:var(--seo-accent) } #start.service-page .service-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0 0 } #start.service-page .service-hero__actions :is(.button,.s-first__button) { margin:0 } #start.service-page .s-first__items { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; max-width:none; padding:24px 0 0; margin:32px 0 0; border-top:1px solid var(--seo-line); list-style:none; text-align:left } #start.service-page .s-first__item { display:block; width:auto; margin:0; padding:0 16px 0 0; border:0; min-height:0; text-align:left } #start.service-page .s-first__item + .s-first__item { padding-left:20px; border-left:1px solid var(--seo-line) } #start.service-page .s-first__caption { color:var(--seo-ink); font-family:inherit; font-size:14px; line-height:1.6; letter-spacing:0; text-transform:none; font-weight:400; text-align:left } #start.service-page .s-first__caption span { display:block; color:var(--seo-ink); font-family:inherit; font-size:22px; font-weight:600; line-height:1.6; letter-spacing:-.025em; text-transform:none; text-align:left } #start.service-page .s-first__caption span br { display:none } #start.service-page .service-scene { position:relative; min-height:376px; padding:0 0 50px 32px } #start.service-page .service-scene__paper { display:flex; flex-direction:column; min-height:320px; padding:28px 30px 66px; border-radius:24px; background:#eef0f8; border:1px solid var(--seo-line); color:var(--seo-ink) } #start.service-page .service-scene__label { font-size:12px; letter-spacing:.07em; text-transform:uppercase } #start.service-page .service-scene__drawing { width:156px; height:150px; margin:28px auto 12px; stroke-width:2.2 } #start.service-page .service-scene__wave { display:flex; align-items:center; justify-content:center; gap:5px; height:46px; width:100%; margin:8px auto 0; color:var(--seo-accent) } #start.service-page .service-scene__wave i { display:block; width:3px; height:var(--bar); border-radius:4px; background:currentColor } #start.service-page .service-scene__photo { position:absolute; bottom:0; right:22px; left:0; width:58%; margin:0; padding:7px; background:#fff; border:1px solid var(--seo-line); border-radius:16px; transform:rotate(-4deg) } #start.service-page .service-scene__photo img { display:block; width:100%; height:132px; object-fit:cover; border-radius:10px } #start.service-page .service-scene__photo figcaption { display:flex; align-items:center; gap:8px; padding:9px 4px 2px; font-size:11px; font-weight:500; color:var(--seo-ink) } #start.service-page .service-scene__dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--seo-accent) } #start.service-page .film-hero__studio { border:1px solid var(--seo-line); height:360px; image-rendering:auto } #start.service-page .film-hero__visual { padding-bottom:50px } #start.service-page .film-hero__frames img { height:88px } #start.service-page .cartoon-hero__scene { min-height:380px } #start.service-page .cartoon-hero__frame img { height:185px } #start.service-page img[src$="/cartoons/nevsky-hd.jpg"] { object-position:50% 20% } #start.service-page .cartoon-facts { margin-top:30px; padding-top:20px } /* Portfolio: the original works are retained in the service's first tab. */ #start.service-page .kg-portfolio-showcase { padding:42px 0 52px; background:#fff } #start.service-page .kg-portfolio-showcase__inner { display:block; gap:0 } #start.service-page .kg-portfolio-showcase #portfolio-title { width:100%; max-width:none; text-align:left; margin:0 0 22px } #start.service-page .kg-portfolio-showcase__panels { margin:0; padding:0 } #start.service-page .service-primary-portfolio .film-section-heading { width:100%; max-width:none; margin:0 0 20px } #start.service-page .service-primary-portfolio .film-section-heading .kg-intro { margin:0 } #start.service-page .service-primary-portfolio .film-section-heading:empty { display:none } #start.service-page .kg-portfolio-showcase h2 { margin:0 0 24px } #start.service-page .kg-portfolio-showcase__tabs { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:9px; margin:0 0 28px } #start.service-page .kg-portfolio-showcase__tabs button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin:0; padding:9px 16px; border:1px solid var(--seo-line); border-radius:22px; color:var(--seo-ink); background:#fff; font:500 13px/1.4 Roboto,Arial,sans-serif; cursor:pointer } #start.service-page .kg-portfolio-showcase__tabs button[aria-selected="true"] { color:#fff; background:var(--seo-accent); border-color:var(--seo-accent) } #start.service-page .kg-portfolio-showcase__tabs svg { display:block; width:18px; height:18px } #start.service-page .kg-portfolio-showcase__panel[hidden] { display:none!important } #start.service-page #portfolio .service-primary-portfolio { --seo-section-space:0px; padding:0; background:transparent } #start.service-page #portfolio #portfolio-panel-service > .s-video-examples { padding:0 } #start.service-page .service-primary-portfolio :is([class$="__container"],.kg-wrap) { width:100%; max-width:none; padding:0; margin:0 } #start.service-page .service-primary-portfolio .headers { margin-bottom:20px } #start.service-page .service-primary-portfolio .headers:empty { display:none } #start.service-page .service-primary-portfolio .headers__subtitle { max-width:760px; font-size:16px } #start.service-page :is(.s-video-examples__videos,.kg-portfolio-showcase__landscape,.kg-portfolio-showcase__posters,.kg-portfolio-showcase__editorial-grid) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:20px; margin:0; width:100%; max-width:none } #start.service-page .service-primary-portfolio :is(.s-video-examples__videos,.s-video-examples__videos.items) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px } #start.service-page.cartoon-page .service-primary-portfolio .s-video-examples__videos.items { display:flex; justify-content:center; flex-wrap:wrap; gap:24px } #start.service-page.cartoon-page .service-primary-portfolio .s-video-examples__videos.items > .card-video { flex:0 1 310px; width:min(100%,310px); grid-column:auto; margin:0 } #start.service-page.cartoon-page #need .cartoon-intro__panels { border-top:0; padding-top:0 } #start.service-page .service-primary-portfolio .card-video { display:flex; flex-direction:column; width:auto; min-width:0; max-width:none; margin:0; padding:0; overflow:hidden; background:#fff; border:1px solid var(--seo-line); border-radius:18px; color:var(--seo-ink) } #start.service-page .service-primary-portfolio .card-video__video { position:relative; width:100%; aspect-ratio:16/10; height:auto; min-height:0; background:var(--seo-soft); overflow:hidden; border-radius:0 } #start.service-page .service-primary-portfolio :is(.card-video__poster,.card-video__video>img) { display:block; width:100%; height:100%; min-height:0; object-fit:cover } #start.service-page .service-primary-portfolio .card-video__link { inset:0; border-radius:0 } #start.service-page .service-primary-portfolio .card-video__content { flex:1; width:100%; padding:20px; text-align:left } #start.service-page .service-primary-portfolio .card-video__title { margin:0 0 10px; color:var(--seo-ink); font-size:19px; font-weight:600; line-height:1.25; text-transform:none; letter-spacing:-.02em } #start.service-page .service-primary-portfolio :is(.card-video__category,.card-video__descr) { color:var(--seo-ink); font-size:14px; font-weight:400; line-height:1.6; margin:0 0 10px } #start.service-page .service-primary-portfolio .card-video__category:empty { display:none } #start.service-page .service-primary-portfolio :is(.card-video__descr a,.card-video__content a) { color:var(--seo-ink); overflow-wrap:anywhere } #start.service-page .kg-portfolio-showcase__video-card { border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--seo-line); min-width:0 } #start.service-page .kg-portfolio-showcase__media { aspect-ratio:16/10; border-radius:0; overflow:hidden } #start.service-page .kg-portfolio-showcase__card-copy { padding:18px } #start.service-page .kg-portfolio-showcase__card-copy h3 { font-size:19px!important } #start.service-page .kg-portfolio-showcase__card-copy p { font-size:14px } #start.service-page .kg-portfolio-showcase__controls { margin-top:22px } #start.service-page .kg-portfolio-showcase__controls:not(:has(button:not(:disabled))) { display:none } /* Keep book/guide badges and playback controls inside their own card. * Otherwise their absolute coordinates resolve against the page and leak * over the hero when the corresponding portfolio tab is selected. */ #start.service-page .kg-portfolio-showcase__panel { position:relative; overflow:hidden } #start.service-page .kg-portfolio-showcase__editorial-card { position:relative; isolation:isolate } #start.service-page .service-editorial-play svg { display:block; width:20px; height:20px; grid-area:1 / 1 } #start.service-page .service-editorial-play .service-editorial-play__pause, #start.service-page .service-editorial-play[aria-pressed="true"] .service-editorial-play__start { display:none } #start.service-page .service-editorial-play[aria-pressed="true"] .service-editorial-play__pause { display:block } #start.service-page :is(.s-audio-examples__list,.audios__list,.s-script-examples__items,.s-audiobook-examples__items) { width:100%; max-width:none; gap:16px } #start.service-page :is(.card-audio,.card-guide,.card-audiobook,.card-script,.audio-example,.script-example) { background:#fff; color:var(--seo-ink); border:1px solid var(--seo-line); border-radius:16px; overflow:hidden } /* Editorial copy and service-specific blocks. */ #start.service-page .s-need__container { display:block } #start.service-page .s-need__text { width:100%; max-width:none; margin:0; padding:0; text-align:left } #start.service-page .s-need__title { max-width:850px; margin:0 0 26px } #start.service-page .s-need__text p { max-width:85ch; font-size:17px; line-height:1.7; text-align:left } #start.service-page .s-need__text p + p { margin-top:18px } #start.service-page .s-need__text h2 + p { margin-top:0 } #start.service-page :is(.s-need__img,.s-need__image) { max-width:420px; margin:24px 0; border-radius:20px; overflow:hidden } /* A continuous reading column; supplementary copy expands in document flow. */ #start.service-page .service-editorial-copy { padding-block:48px 64px; background:#fff } #start.service-page .service-editorial-copy .s-need__container { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr); align-items:start; gap:28px 32px; max-width:1276px; padding-top:32px; border-top:1px solid var(--seo-line) } #start.service-page .service-editorial-copy :is(.s-need__text,.service-editorial-copy__content,.service-editorial-copy__points) { display:contents } #start.service-page .service-editorial-copy .service-editorial-copy__title { grid-column:1/-1 } #start.service-page .service-editorial-copy__content > p { grid-column:1/-1; max-width:80ch!important } #start.service-page .service-editorial-copy__points > p { padding-top:18px!important; margin:0!important; border-top:2px solid var(--seo-accent)!important; font-size:16px!important; line-height:1.6!important } #start.service-page .service-editorial-copy__points > p:nth-child(1) { grid-column:1; grid-row:3 } #start.service-page .service-editorial-copy__points > p:nth-child(2) { grid-column:1; grid-row:4 } #start.service-page .service-editorial-copy__points > p:nth-child(3) { grid-column:1; grid-row:5 } #start.service-page .service-editorial-copy__points > p:nth-child(4) { grid-column:3; grid-row:3 } #start.service-page .service-editorial-copy__points > p:nth-child(5) { grid-column:3; grid-row:4 } #start.service-page .service-editorial-copy__points > p:nth-child(6) { grid-column:3; grid-row:5 } #start.service-page .service-editorial-copy .service-editorial-copy__title { margin:0 0 22px; color:var(--seo-ink); font-size:clamp(24px,2vw,30px)!important; font-weight:600; line-height:1.3!important; letter-spacing:-.02em; text-align:left } #start.service-page .service-editorial-copy .service-editorial-copy__content p { max-width:none; margin:0 0 18px; padding:0; border:0; color:var(--seo-ink); font-size:17px; font-weight:400; line-height:1.7; text-align:left } #start.service-page .service-editorial-copy__details { margin-top:24px } #start.service-page .service-editorial-copy__details summary { width:fit-content; cursor:pointer; color:var(--seo-accent); font-size:16px; font-weight:500; line-height:1.5; padding-block:8px } #start.service-page .service-editorial-copy__details summary:focus-visible { outline:2px solid var(--seo-accent); outline-offset:4px } #start.service-page .service-editorial-copy__more { padding-top:18px } #start.service-page .service-editorial-copy .button { grid-column:1/-1; grid-row:6; justify-self:start; margin-top:0 } #start.service-page .service-editorial-copy__studio { grid-column:2; grid-row:3/6; min-width:0; align-self:center; padding:0 } #start.service-page .service-editorial-copy__studio img { display:block; width:100%; height:auto; object-fit:contain } #start.service-page .service-editorial-copy__caption { margin:18px 0 0; color:var(--seo-ink); text-align:center; font-size:14px; line-height:1.5 } @media (max-width:767px) { #start.service-page .service-editorial-copy { padding-block:40px 56px } #start.service-page .service-editorial-copy .s-need__container { display:flex; flex-direction:column; gap:24px; padding-top:28px } #start.service-page .service-editorial-copy__studio { order:-1; width:min(100%,420px); align-self:center } #start.service-page .service-editorial-copy .service-editorial-copy__content p { font-size:16px } } #start.service-page :is(.s-types__items,.s-choice__items,.s-translation__items,.s-why__items,.s-advantages__items) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:0; margin:0; list-style:none } #start.service-page :is(.s-types__item,.s-choice__item,.s-translation__item,.s-why__item,.s-advantages__item) { width:auto; flex:auto; margin:0; padding:28px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; color:var(--seo-ink); min-width:0; text-align:left } #start.service-page .s-types__item { display:block } #start.service-page .s-types__items>.s-types__item:first-child:last-child { grid-column:1/-1 } #start.service-page :is(.s-types__caption,.s-choice__title,.s-translation__item-title,.s-why__caption,.s-why__item-title) { color:var(--seo-ink); font:600 23px/1.25 Roboto,Arial,sans-serif; letter-spacing:-.02em; text-transform:none; margin:0 0 16px } #start.service-page :is(.s-types__descr,.s-types__descr p,.s-choice__text,.s-translation__item p,.s-why__text,.s-why__item p) { color:var(--seo-ink); font-size:16px; line-height:1.65; font-weight:400; text-align:left; max-width:none } #start.service-page .s-choice__items::before { display:none } #start.service-page .s-choice__item { display:flex; flex-direction:column; gap:20px; padding:32px } #start.service-page .s-choice__caption { margin:0; font-size:26px } #start.service-page .s-choice__decision { padding:20px; border-radius:14px; background:var(--seo-soft) } #start.service-page .s-choice__eyebrow { display:block; margin-bottom:8px; color:var(--seo-accent); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase } #start.service-page .s-choice__decision p { margin:0; color:var(--seo-ink); font-size:17px; font-weight:600; line-height:1.45 } #start.service-page .s-choice__decision ul { display:grid; gap:8px; margin:16px 0 0; padding:0; list-style:none } #start.service-page .s-choice__decision li { position:relative; padding-left:20px; color:var(--seo-ink); font-size:15px; line-height:1.45 } #start.service-page .s-choice__decision li::before { content:""; position:absolute; top:.45em; left:0; width:8px; height:8px; border-radius:50%; background:var(--seo-accent) } #start.service-page .s-choice__details { margin:0 } #start.service-page .s-choice__details summary { color:var(--seo-ink); cursor:pointer; font-size:15px; font-weight:600 } #start.service-page .s-choice__details[open] summary { margin-bottom:12px } #start.service-page .s-choice__details .s-choice__text { margin:0; color:#686b88; font-size:15px; line-height:1.6 } #start.service-page .s-choice__caption-2 { margin:0; color:#686b88; font-size:14px; font-weight:500 } #start.service-page .s-choice__bottom { margin-top:auto; align-items:center; gap:18px } #start.service-page .s-choice__examples { gap:8px } #start.service-page .s-choice__player { top:0; width:48px } #start.service-page .s-choice__button { margin:0; padding:11px 22px; font-size:14px } #start.service-page :is(.s-types__left,.s-types__right) { width:100%; margin:0; padding:0 } #start.service-page .s-types__links { margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px } #start.service-page .s-types__link { display:inline-flex; padding:9px 16px; border:1px solid var(--seo-line); border-radius:22px; color:var(--seo-ink); background:#fff; font-size:15px; line-height:1.4; letter-spacing:0; text-transform:none } #start.service-page .s-types__link.active { color:#fff; border-color:var(--seo-accent); background:var(--seo-accent) } #start.service-page :is(.s-types__video,.s-types .video,.s-studio .video) { margin-top:24px; width:100%; height:auto; aspect-ratio:16/9; border-radius:14px; overflow:hidden; min-height:0 } #start.service-page .video__media { width:100%; height:100%; object-fit:cover } #start.service-page .video__button { display:grid; place-items:center; z-index:2; width:60px; height:60px; padding:0; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; background:var(--seo-accent); box-shadow:0 8px 22px rgb(35 44 85 / .32); transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease } #start.service-page .video__button .video__button-shape { display:none } #start.service-page .video__button .video__button-icon { fill:#fff; transform:translateX(2px) } #start.service-page .video:hover .video__button, #start.service-page .video__button:focus-visible { background:#a93c25; transform:translate(-50%,-50%) scale(1.06); box-shadow:0 12px 26px rgb(35 44 85 / .38) } #start.service-page :is(.s-types__button-wrapper,.s-need__button-wrapper,.s-audiobook-prices__button-wrapper,.s-ar-speakers__button-wrapper) { margin:24px 0 0; padding:0; text-align:left } #start.service-page :is(.s-types__button,.s-need__button) { margin:0 } #start.service-page :is(.s-types__item-mobile,.s-types__item-mobile h3) { color:var(--seo-ink) } #start.service-page :is(.seo-text,.s-seo__text,.s-text__text,.film-seo-article) { max-width:1276px; margin-left:auto; margin-right:auto } #start.service-page .service-copy-topic { margin:18px 0; padding:28px 30px; background:var(--seo-soft); border:1px solid var(--seo-line); border-radius:18px } #start.service-page .service-copy-topic :last-child { margin-bottom:0 } #start.service-page .service-copy-topic h3 { margin:0 0 16px } #start.service-page :is(.film-story-grid,.kg-source-seo-copy) p { color:var(--seo-ink)!important } /* The four-step recording block from the voice profile reference. */ #start.service-page .s-studio__items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:0; padding:0 } #start.service-page .s-studio__item { display:flex; flex-direction:column; width:auto; margin:0; padding:26px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; min-width:0; text-align:left } #start.service-page .s-studio__item h3 { margin:0 0 16px } #start.service-page .s-studio__item p { color:var(--seo-ink); font-size:16px; line-height:1.65; text-align:left } #start.service-page .s-studio__item .video { margin-top:auto } #start.service-page .service-recording-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0 0 28px; padding:0; list-style:none; counter-reset:none } #start.service-page .service-recording-steps li { margin:0; padding:20px 0 0; border-top:1px solid var(--seo-line); text-align:left } #start.service-page .service-recording-steps li>span { display:grid; place-items:center; width:32px; height:32px; margin-bottom:15px; border-radius:50%; background:var(--seo-accent); color:#fff; font-size:12px; font-weight:600 } #start.service-page .service-recording-steps h3 { font-size:19px!important; margin:0 0 12px } #start.service-page .service-recording-steps p { font-size:14px; margin:0 } #start.service-page .s-studio__channel { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:24px 0 0; padding:0; font-size:14px; text-align:left } #start.service-page .s-studio__channel .button { margin:0 } /* Recording: a compact sequence beside the two real studio sessions. */ #start.service-page .service-recording-layout { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,2fr); gap:32px 40px; align-items:start } #start.service-page #studio .service-recording-layout { width:calc(100% - 64px); max-width:1276px; padding:0; margin-inline:auto } #start.service-page .service-recording-layout p { min-height:0 } #start.service-page .service-recording-layout>.headers { grid-column:1 / -1; margin:0 } #start.service-page .service-recording-layout .service-recording-steps { grid-template-columns:1fr; gap:0; margin:0; align-self:stretch; align-content:space-between } #start.service-page .service-recording-layout .service-recording-steps li { display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:16px; padding:12px 0; border-top:0; border-bottom:1px solid var(--seo-line) } #start.service-page .service-recording-layout .service-recording-steps li:first-child { padding-top:0 } #start.service-page .service-recording-layout .service-recording-steps li:last-child { border-bottom:0; padding-bottom:0 } #start.service-page .service-recording-layout .service-recording-steps li>span { grid-row:1 / span 2; display:block; width:auto; height:auto; margin:0; background:none; color:var(--seo-accent); font:500 30px/1 Roboto,Arial,sans-serif; letter-spacing:-.04em } #start.service-page .service-recording-layout .service-recording-steps h3 { margin:0 0 8px; font-size:19px!important } #start.service-page .service-recording-layout .service-recording-steps p { grid-column:2; font-size:14px; line-height:1.6 } #start.service-page .service-recording-layout .s-studio__items { gap:28px; align-self:stretch } #start.service-page .service-recording-layout .s-studio__item { padding:0; border:0; border-radius:0; background:none } #start.service-page .service-recording-layout .s-studio__item .video { order:-1; margin:0 0 22px; overflow:hidden; border-radius:18px; aspect-ratio:16 / 9 } #start.service-page .service-recording-layout .s-studio__item .video__wrapper { width:100%; height:100%; padding:0 } #start.service-page .service-recording-layout .s-studio__item h3 { font-size:22px!important; margin:0 0 12px } #start.service-page .service-recording-layout .s-studio__item p { margin:0; margin-top:auto; font-size:15px; line-height:1.65 } #start.service-page .service-recording-layout .s-studio__channel { grid-column:1 / -1; margin:0; padding-top:24px; border-top:1px solid var(--seo-line) } @media(max-width:1100px) { #start.service-page .service-recording-layout { grid-template-columns:minmax(230px,.85fr) minmax(0,2fr); gap:28px } } @media(max-width:900px) { #start.service-page .service-recording-layout { grid-template-columns:minmax(0,1fr) } #start.service-page .service-recording-layout .service-recording-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px } #start.service-page .service-recording-layout .service-recording-steps li { padding:0; border:0 } } @media(max-width:600px) { #start.service-page .service-recording-layout .service-recording-steps { grid-template-columns:1fr; gap:22px } #start.service-page .service-recording-layout .s-studio__items { grid-template-columns:1fr; gap:32px } } /* Matching catalogue cards, with the original service demos and order routes. */ #start.service-page .s-ar-speakers { padding:0; background:transparent } #start.service-page .s-ar-speakers__container { width:100% } /* Language tiles retain their routes and country artwork, without dark overlays. */ #start.service-page :is(.popular-languages,.s-base__languages) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:100%; margin:24px 0; padding:0 } #start.service-page :is(.popular-language,.s-base__language) { position:relative; display:flex; flex-direction:column; width:auto; min-width:0; height:auto; min-height:130px; margin:0; padding:22px; border:1px solid var(--seo-line); border-radius:16px; background-color:#fff!important; background-size:42px 30px!important; background-repeat:no-repeat!important; background-position:calc(100% - 20px) 22px!important; box-shadow:none; color:var(--seo-ink); text-align:left; overflow:hidden } #start.service-page :is(.popular-language,.s-base__language)::before { display:none!important } #start.service-page .s-base__language-container { position:static; display:flex; flex:1; flex-direction:column; width:100%; height:auto; padding:0; min-height:118px } #start.service-page :is(.popular-language__name,.popular-language__title,.s-base__language a) { display:block; width:auto; padding:0; margin:0 56px 10px 0; color:var(--seo-ink)!important; font-size:17px; line-height:1.35; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:none; text-align:left } #start.service-page .film-language-search input.kg-field { border:0!important; border-radius:0!important; padding:0; background:transparent!important; box-shadow:none!important } #start.service-page :is(.popular-language__price,.popular-language__info,.s-base__language-count,.s-base__language-price) { position:static; color:var(--seo-ink)!important; font-size:14px; font-weight:400; margin:0 0 10px } #start.service-page .s-base__language-price-container { position:static; margin-top:auto } #start.service-page .s-base__language-price strong { color:var(--seo-ink); font-size:20px; font-weight:600 } #start.service-page :is(.foreigner-start,.foreigner-form) { padding:0; margin:24px 0 } #start.service-page .foreigner-form .form-item { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:12px; padding:20px; border:1px solid var(--seo-line); border-radius:18px; background:var(--seo-soft) } #start.service-page .foreigner-form .form-item__input { width:auto; margin:0 } #start.service-page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.selectric) { border:1px solid var(--seo-line); border-radius:12px; color:var(--seo-ink); background:#fff; box-shadow:none; font-family:inherit; font-weight:400 } #start.service-page .selectric .label { color:var(--seo-ink); font-size:14px } #start.service-page .selectric .button { background:transparent; border:0; min-height:0; padding:0 } #start.service-page :is(.selectric-items,.selectize-dropdown,.selectize-input) { border:1px solid var(--seo-line); border-radius:12px; color:var(--seo-ink); background:#fff; overflow:hidden } #start.service-page :is(.fast-filters,.fast-filters__list) { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; margin:0 0 20px; padding:0 } #start.service-page :is(.fast-filters__item,.fast-filter,.fast-filters a) { border-radius:20px; font-size:14px; letter-spacing:0 } /* Prices, calculators and timelines keep their original data and controls. */ #start.service-page :is(.s-audiobook-prices__items,.s-script-prices__items,.s-audio-prices__items) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%; max-width:none; padding:0; margin:0; list-style:none } #start.service-page :is(.s-audiobook-prices__item,.s-script-prices__item,.s-audio-prices__item) { width:auto; max-width:none; min-width:0; margin:0; padding:0; border:0; background:transparent; flex:none } #start.service-page :is(.card-audiobook-price,.script-price,.card-audio-price) { display:flex; flex-direction:column; width:100%; min-height:100%; height:auto; margin:0; padding:28px; background:#fff; border:1px solid var(--seo-line); border-radius:18px; box-shadow:none; color:var(--seo-ink); text-align:left } #start.service-page .s-audio-prices__item-main .card-audio-price { border-color:var(--seo-accent); box-shadow:0 12px 28px rgb(35 44 85 / .10) } #start.service-page .card-audiobook-price__in { padding:0; width:100%; border:0; text-align:left } #start.service-page :is(.card-audiobook-price__number,.s-stages__number) { position:static; display:grid; place-items:center; width:34px; height:34px; margin:0 0 18px; padding:0; background:var(--seo-accent); color:#fff; border:0; border-radius:50%; font-size:14px; font-weight:600; line-height:1 } #start.service-page :is(.card-audiobook-price__title,.script-price__title,.card-audio-price__title) { color:var(--seo-ink); text-transform:none; letter-spacing:-.02em; font-size:21px; font-weight:600; line-height:1.3; margin:0 0 20px; min-height:0 } #start.service-page :is(.card-audiobook-price__total,.script-price__price,.card-audio-price__total) { color:var(--seo-ink); font-size:26px; font-weight:600; line-height:1.3; margin:0 0 16px } #start.service-page .card-audio-price__button { width:100%; margin-top:auto } #start.service-page :is(.card-audiobook-price__descr,.card-audiobook-price__descr p,.s-audiobook-prices__button-caption,.script-price__caption,.script-price__value) { color:var(--seo-ink); font-size:15px; font-weight:400; line-height:1.6 } #start.service-page .translation-price { margin:0; width:100%; max-width:none; border-collapse:separate; border-spacing:0; border:1px solid var(--seo-line); border-radius:16px; overflow:hidden; background:#fff } #start.service-page .translation-price :is(th,td) { padding:12px 18px; color:var(--seo-ink); text-transform:none; letter-spacing:0; font-size:14px; text-align:left; border-bottom:1px solid var(--seo-line) } #start.service-page .translation-price th { background:#e9ecf5; font-weight:600 } #start.service-page .translation-price td img { display:inline-block; width:24px; border:0; border-radius:4px; margin-right:8px; vertical-align:middle } #start.service-page .translation-price tr { background:#fff } #start.service-page .translation-price tr:nth-child(even) { background:#f8f9fc } #start.service-page .translation-price td span { color:var(--seo-ink); font-size:14px } #start.service-page .translation-price tbody tr:last-child td { border-bottom:0 } #start.service-page :is(.s-stages__items,.s-stages__list) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none } #start.service-page .s-stages__item { width:auto; margin:0; padding:22px; border:1px solid var(--seo-line); border-radius:16px; background:#fff; color:var(--seo-ink); text-align:left; font-size:16px; line-height:1.6 } #start.service-page :is(.s-stages__item-header,.s-stages__info) { color:var(--seo-ink); text-transform:none; letter-spacing:0 } #start.service-page .s-stages__chief { margin:28px 0 0; padding:24px 28px; border:1px solid var(--seo-line); border-radius:18px; background:#fff } #start.service-page .s-stages__chief-header { color:var(--seo-ink); font-size:21px; font-weight:500; letter-spacing:0; text-transform:none } #start.service-page .s-stages__chief-photo img { border-radius:16px; max-height:180px; width:auto } #start.service-page :is(.chronomer-service,.s-calculator__main,.s-calculator__form,.calculator) { padding:26px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; max-width:100%; margin:24px 0 0; color:var(--seo-ink) } #start.service-page :is(.chronomer-service__text,.s-calculator p,.s-dev p) { color:var(--seo-ink); text-align:left; font-size:16px } #start.service-page :is(.chronomer__aside,.chronomer__main) { background:var(--seo-soft); color:var(--seo-ink); border-radius:14px } #start.service-page .chronomer__open { width:auto; margin:0; padding:16px 22px; border:1px solid var(--seo-line); border-radius:12px; color:var(--seo-ink); background:#fff; font-size:16px; text-transform:none; letter-spacing:0 } #start.service-page .ivr-scheme { padding:28px; border-radius:20px; background:#fff; border:1px solid var(--seo-line); overflow-x:auto; max-width:100% } #start.service-page .ivr-scheme__item { border-radius:12px; color:var(--seo-ink) } /* One contact strip, guarantees, reviews, clients and FAQ language. */ #start.service-page :is(.s-callback,.s-questions,.kg-contact-strip) { background:var(--seo-accent)!important; background-image:none!important; color:#fff; padding:32px 0; margin:0; min-height:0; height:auto } #start.service-page :is(.s-callback,.s-questions,.kg-contact-strip) :is(h2,h3,p,a,span,.headers__pretitle,.headers__subtitle,.s-callback__title,.s-callback__text,.s-callback__messenger,.s-callback__messenger-text) { color:#fff!important } #start.service-page .s-callback__container { display:grid; grid-template-columns:1fr 1.6fr; gap:36px; align-items:center } #start.service-page .s-callback__title { margin:0; padding:0; font-size:34px; line-height:1.15; text-transform:none; letter-spacing:-.025em } #start.service-page .s-callback__title br { display:none } #start.service-page .s-callback__text { margin:0 0 16px } #start.service-page .s-callback :is(.s-callback__messenger-text,.s-callback__messenger) { margin:14px 0 0; font-size:14px } #start.service-page :is(.s-callback,.s-questions,.kg-contact-strip) .button { border-color:#fff; color:#fff; background:transparent; box-shadow:none } #start.service-page :is(.s-callback,.s-questions,.kg-contact-strip) .button:hover { background:rgb(255 255 255 / .12) } #start.service-page .kg-contact-strip { width:100%; max-width:none; border-radius:0 } #start.service-page .kg-contact-strip__inner { width:calc(100% - 64px); max-width:1276px; padding:0; margin:0 auto; gap:14px } #start.service-page .kg-contact-strip h2 { color:#fff; font-size:34px!important; margin:0 } #start.service-page .kg-contact-strip p { font-size:15px; margin:0; max-width:680px } #start.service-page .kg-contact-strip__button { border:1px solid #fff; border-radius:12px; padding:12px 20px; background:transparent } /* Keep the homepage contact component full width inside service layouts. */ #start.service-page .service-contact-banner { width:100%; max-width:none; margin:0; padding:0 } #start.service-page .film-contact { width:100%; max-width:none; margin:0; padding:0 } #start.service-page .service-contact-banner .kg-cta.kg-contact-strip { width:100%; max-width:none; margin:0; padding:48px 24px; border:0; border-radius:0; background:var(--seo-accent)!important; text-align:center } #start.service-page .service-contact-banner .kg-contact-strip__inner { display:grid; justify-items:center; width:100%; max-width:720px; margin:0 auto; padding:0; gap:0 } #start.service-page .service-contact-banner .kg-contact-strip h2 { width:auto; max-width:none; margin:0; text-align:center; font-size:clamp(28px,2.2vw,34px)!important; line-height:1.12!important } #start.service-page .service-contact-banner .kg-contact-strip h2::after { margin:20px auto } #start.service-page .service-contact-banner .kg-contact-strip p { max-width:650px; margin:0; font-size:16px; line-height:1.5; text-align:center } #start.service-page .service-contact-banner .kg-contact-strip__phone { margin:26px 0 0; font-size:clamp(30px,4.2vw,52px); line-height:1.1; letter-spacing:.06em } #start.service-page .service-contact-banner .kg-contact-strip__email { margin:20px 0 0; font-size:20px; line-height:1.4 } #start.service-page .service-contact-banner .kg-contact-strip__button { margin:26px 0 0; min-width:230px; min-height:50px; padding:13px 24px; border-radius:15px; font-size:15px } /* Shared editorial layout and wide media rows on all fourteen services. */ #start.service-page .s-need__container:has(>.s-need__title):has(>.s-need__text) { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:24px clamp(32px,5vw,72px) } #start.service-page .s-need__container:has(>.s-need__text)>.s-need__title { max-width:none; margin:0 } #start.service-page .s-need__container:has(>.s-need__title)>.s-need__text { max-width:64ch } #start.service-page .s-need__container:has(>.s-need__title)>.s-need__link-brief { grid-column:2; margin:0 } #start.service-page .s-need__container:has(>.s-need__title)>.fast-filters { grid-column:1/-1; margin:0 } /* Wide category navigation and its explanations each need their own grid row. */ #start.service-page .s-need__container>.video-service__items { grid-column:1/-1; width:100%; min-width:0; max-width:none; margin:8px 0 0 } #start.service-page .s-need__container>.video-service__items+.s-need__text { grid-column:1/-1; min-width:0; max-width:none } #start.service-page.seo-document--film #need .s-need__container { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:clamp(32px,5vw,72px) } #start.service-page.seo-document--film #need .s-need__title { max-width:none; margin:0 } #start.service-page.seo-document--film #need .s-need__text { max-width:64ch } #start.service-page.seo-document--film #need .s-need__text p { max-width:none; margin:0 0 24px } #start.service-page.seo-document--film #need .s-need__text p:last-child { margin-bottom:0 } #start.service-page .s-types:has(:is(.s-types__video,.s-types__player)) .s-types__items { display:block } #start.service-page .s-types:has(:is(.s-types__video,.s-types__player)) .s-types__item { padding:32px 0; border:0; border-top:1px solid var(--seo-line); border-radius:0; background:transparent } #start.service-page .s-types:has(:is(.s-types__video,.s-types__player)) .s-types__in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start } #start.service-page .s-types .s-types__in:has(>.s-types__number) { grid-template-columns:32px minmax(0,1fr) minmax(220px,.7fr); gap:24px } #start.service-page .s-types .s-types__in>.s-types__number { margin:0; padding-top:4px } #start.service-page .s-types:not(:has(.s-types__links)) .s-types__descr { display:block } #start.service-page .s-types .s-types__player { width:100%; margin:0; align-self:center; justify-self:center } #start.service-page .s-types .s-types__video { margin:0 } #start.service-page .s-types .s-types__video[data-tab-video]:not(.active) { display:none } /* Use the existing branded client filmstrip, including its original markup. */ #start.service-page #clients .kg-clients-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,2.1fr); align-items:center; gap:24px 48px } #start.service-page #clients .kg-clients-layout h2 { max-width:8ch; margin:0 0 18px } #start.service-page #clients .kg-clients-layout>.kg-intro { max-width:29ch; margin:0 } @media(max-width:760px) { #start.service-page.seo-document--film #need .s-need__container, #start.service-page .s-need__container:has(>.s-need__title):has(>.s-need__text), #start.service-page .s-types:has(:is(.s-types__video,.s-types__player)) .s-types__in, #start.service-page .s-types .s-types__in:has(>.s-types__number) { grid-template-columns:1fr; gap:24px } #start.service-page .s-need__container:has(>.s-need__title)>.s-need__link-brief { grid-column:auto } #start.service-page #clients .kg-clients-layout { grid-template-columns:1fr; gap:20px } #start.service-page #clients .kg-clients-layout h2 { max-width:none } #start.service-page #clients .kg-clients-layout>.kg-intro { max-width:48ch } #start.service-page #clients .kg-logos.is-film-enhanced { grid-area:auto; width:calc(100% + 40px); margin:0 -20px } #start.service-page .service-contact-banner .kg-cta.kg-contact-strip { padding:40px 20px } #start.service-page .service-contact-banner .kg-contact-strip__phone { font-size:clamp(26px,7.8vw,40px); letter-spacing:.02em } } #start.service-page .kg-guarantees-documents { padding:var(--service-space) 0; background:#fff } #start.service-page .kg-guarantees-documents__intro p { color:var(--seo-ink) } #start.service-page .kg-guarantees-documents__paper { color:var(--seo-ink) } #start.service-page :is(.kg-guarantees-documents__meta,.kg-guarantees-documents__body,.kg-guarantees-documents__subtitle) { color:var(--seo-ink)!important } #start.service-page .kg-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch } #start.service-page .kg-review { margin:0; padding:26px; border:1px solid var(--seo-line); border-radius:18px; background:var(--seo-soft); color:var(--seo-ink); min-width:0 } #start.service-page .kg-review p { margin:16px 0 0; font-size:16px } #start.service-page :is(.kg-review-name,.kg-review-date,.kg-review-sources,.kg-review-sources i) { color:var(--seo-ink)!important } #start.service-page .kg-review-date { display:block; margin-top:7px; font-size:12px } #start.service-page .film-review-details { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px } #start.service-page .film-review-more { display:inline-flex; width:auto; min-height:46px; padding:12px 20px; align-items:center; justify-content:center; background:#fff; color:var(--seo-ink); border:1px solid var(--seo-line); border-radius:12px; font-size:14px; text-align:center; line-height:1.5; white-space:normal } #start.service-page .film-review-studio { color:var(--seo-ink); font-size:13px; line-height:1.6 } #start.service-page :is(.kg-faq-stage,.kg-faq-layout,.kg-faq-heading,.kg-faq-list,.s-answers__container,.s-answers__items) { background:none } #start.service-page :is(.s-answers__item,.kg-faq-list details) { margin:0 0 12px; padding:0; border:1px solid var(--seo-line); border-radius:14px; background:#fff; color:var(--seo-ink); overflow:hidden } #start.service-page :is(.s-answers__question,.kg-faq-list summary) { padding:22px 54px 22px 22px; color:var(--seo-ink); font-size:18px; font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none } #start.service-page :is(.s-answers__answer,.kg-faq-list details>p) { padding:0 22px 22px; color:var(--seo-ink); font-size:16px; line-height:1.7; margin:0 } #start.service-page :is(.s-answers__answer p,.s-answers__question span) { color:var(--seo-ink) } @media (max-width:1100px) { #start.service-page :is(.s-video-examples__videos,.service-primary-portfolio .s-video-examples__videos,.kg-portfolio-showcase__landscape,.kg-portfolio-showcase__posters,.kg-portfolio-showcase__editorial-grid) { grid-template-columns:repeat(2,minmax(0,1fr)) } #start.service-page .s-stages__items { grid-template-columns:repeat(3,minmax(0,1fr)) } } @media (max-width:800px) { #start.service-page { --service-space:38px } #start.service-page :is(.kg-wrap,[class$="__container"],.breadcrumbs) { width:calc(100% - 40px) } #start.service-page .service-hero__layout, #start.service-page .film-hero__container { grid-template-columns:1fr; gap:30px } #start.service-page .service-hero__intro, #start.service-page .film-hero__text { font-size:16px; max-width:64ch } #start.service-page .service-scene { width:100%; max-width:530px; margin:0 auto; min-height:330px; padding-left:30px } #start.service-page .service-scene__paper { min-height:285px; padding-top:22px } #start.service-page .service-scene__drawing { width:120px; height:115px; margin-top:18px } #start.service-page .service-scene__photo { width:55% } #start.service-page .film-hero__visual { max-width:600px; margin:auto } #start.service-page .film-hero__studio { height:300px } #start.service-page .s-first__items { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } #start.service-page .s-first__item+.s-first__item { border:0; padding-left:0 } #start.service-page :is(.service-recording-steps,.popular-languages,.s-base__languages,.s-stages__items) { grid-template-columns:repeat(2,minmax(0,1fr)) } #start.service-page :is(.s-audiobook-prices__items,.s-script-prices__items,.s-audio-prices__items) { grid-template-columns:1fr } #start.service-page .foreigner-form .form-item { grid-template-columns:repeat(2,minmax(0,1fr)) } #start.service-page :is(.kg-review-grid,.kg-faq-layout,.s-answers__container,.s-callback__container) { grid-template-columns:1fr; gap:24px } #start.service-page .film-review-details { align-items:flex-start; flex-direction:column } #start.service-page .service-copy-topic { padding:24px } #start.service-page .cartoon-facts { grid-template-columns:repeat(2,minmax(0,1fr)) } #start.service-page .cartoon-facts li { border:0; padding-left:0 } } @media (max-width:700px) { #start.service-page .s-first__caption span { font-size:20px } } @media (max-width:520px) { #start.service-page :is(.kg-wrap,[class$="__container"],.breadcrumbs) { width:calc(100% - 32px) } #start.service-page .breadcrumbs { padding:14px 0; margin-bottom:20px } #start.service-page .service-hero, #start.service-page .film-hero { padding-bottom:30px } #start.service-page :is(.service-hero__actions .button,.film-hero__actions .button) { width:100% } #start.service-page .service-scene { min-height:295px; padding-left:22px } #start.service-page .service-scene__paper { min-height:250px; padding:20px 22px 50px; border-radius:20px } #start.service-page .service-scene__drawing { width:105px; height:100px; margin:15px auto 0 } #start.service-page .service-scene__photo { width:59%; padding:5px; border-radius:12px } #start.service-page .service-scene__photo img { height:95px; border-radius:8px } #start.service-page .service-scene__photo figcaption { font-size:9px; gap:5px } #start.service-page .service-scene__wave { gap:4px; height:35px } #start.service-page .s-first__items { grid-template-columns:repeat(2,minmax(0,1fr)) } #start.service-page :is(.s-video-examples__videos,.service-primary-portfolio .s-video-examples__videos,.kg-portfolio-showcase__landscape,.kg-portfolio-showcase__posters,.kg-portfolio-showcase__editorial-grid,.s-types__items,.s-choice__items,.s-translation__items,.s-why__items,.s-advantages__items,.s-studio__items,.s-stages__items,.foreigner-form .form-item) { grid-template-columns:1fr } #start.service-page :is(.s-types__item,.s-choice__item,.s-translation__item,.s-why__item,.s-advantages__item,.s-studio__item,.card-audiobook-price,.script-price) { padding:22px } #start.service-page .kg-portfolio-showcase__tabs { flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin } #start.service-page .kg-portfolio-showcase__tabs button { flex-shrink:0; font-size:12px; padding:9px 13px } #start.service-page .popular-language { padding:18px 14px; background-position:calc(100% - 14px) 18px!important; background-size:30px 22px!important } #start.service-page .s-base__language { padding:18px 14px; background-position:calc(100% - 14px) 18px!important; background-size:30px 22px!important } #start.service-page .s-base__language a { font-size:15px; margin-right:32px } #start.service-page .s-studio__channel { flex-direction:column; align-items:flex-start } #start.service-page .kg-contact-strip__inner { width:calc(100% - 32px) } #start.service-page .service-copy-topic { padding:20px } #start.service-page .service-copy-topic h3 { font-size:20px!important } #start.service-page .film-hero__studio { height:240px } #start.service-page .film-hero__frames img { height:65px } } @media (prefers-reduced-motion:reduce) { #start.service-page *, #start.service-page *::before, #start.service-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important } } /* The audio, book and scenario variants use the same portfolio card rail. */ #start.service-page .headers__title { color:var(--seo-ink); font-size:clamp(28px,3.1vw,44px); font-weight:600; line-height:1.15; letter-spacing:-.035em; text-transform:none } #start.service-page .kg-portfolio-showcase [data-portfolio-grid] { display:grid; grid-template-columns:none!important; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px)/4); gap:20px; width:100%; max-width:100%; margin:0; padding:0 0 12px; overflow-x:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; align-items:stretch } /* Arrows retain programmatic paging; native horizontal scrolling is disabled. */ #start.service-page .kg-portfolio-showcase [data-portfolio-grid]::-webkit-scrollbar { display:none } #start.service-page .kg-portfolio-showcase [data-portfolio-item] { width:auto; min-width:0; max-width:none; margin:0; scroll-snap-align:start } #start.service-page .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item,.s-audiobook-examples__item) { display:flex; flex-direction:column; gap:14px; margin:0; padding:22px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; color:var(--seo-ink); text-align:left; min-width:0; box-shadow:none } #start.service-page .service-primary-portfolio :is(.audios__content,.scripts__caption,.s-avr-examples__content,.s-audiobook-examples__content) { width:100%; max-width:100%; padding:0; margin:0; float:none; color:var(--seo-ink) } #start.service-page .service-primary-portfolio :is(.audios__caption,.scripts__caption,.s-avr-examples__caption,.s-audiobook-examples__name) { color:var(--seo-ink); font-size:19px; font-weight:600; line-height:1.3; text-transform:none; letter-spacing:-.02em } #start.service-page .service-primary-portfolio :is(.audios__caption a,.scripts__caption a,.s-avr-examples__caption a,.s-audiobook-examples__voices a) { color:var(--seo-ink) } #start.service-page .service-primary-portfolio :is(.audios__subcaption,.s-avr-examples__subcaption,.s-audiobook-examples__author,.s-audiobook-examples__voices) { color:var(--seo-ink); font-size:14px; line-height:1.6; font-weight:400; margin:10px 0 0 } #start.service-page .service-primary-portfolio :is(.audios__more,.s-avr-examples__more) { display:inline-block; color:var(--seo-ink); margin-top:12px; font-size:13px } #start.service-page .service-primary-portfolio :is(.audios__player,.s-avr-examples__player) { flex-shrink:0; margin:12px 0; float:none } #start.service-page .service-primary-portfolio .s-audiobook-examples__poster { width:100%; height:220px; margin:0 0 6px; float:none; border-radius:12px; background:var(--seo-soft); overflow:hidden } #start.service-page .service-primary-portfolio .s-audiobook-examples__poster img { width:100%; height:100%; object-fit:contain } #start.service-page .service-primary-portfolio .s-audiobook-examples__content hr { display:none } #start.service-page .s-types>.s-types__items { width:calc(100% - 64px); max-width:1276px; margin:0 auto } #start.service-page .s-types__in { width:100%; height:auto; background:none; padding:0; border:0 } #start.service-page .s-types__content { width:100%; padding:0; margin:0; background:none } #start.service-page .s-types__number { display:block; width:auto; height:auto; margin:0 0 18px; padding:0; color:var(--seo-ink); font-size:18px; line-height:1; font-weight:600; background:none } #start.service-page .popular-language img { display:block; width:42px; height:30px; object-fit:cover; border-radius:5px; margin:0 0 16px; border:1px solid var(--seo-line) } #start.service-page .popular-language :is(span,strong) { color:var(--seo-ink); font-size:16px; font-weight:500; text-transform:none; letter-spacing:0 } #start.service-page .service-copy-paragraph { max-width:none; padding:24px 28px; margin:18px 0; background:var(--seo-soft); border:1px solid var(--seo-line); border-radius:18px } #start.service-page .service-copy-paragraph>p { max-width:90ch; margin:0 } /* Keep the shared /diktory trust component's own typography and card treatments. */ #start.service-page .kg-studio-trust { padding:54px 0 } #start.service-page .kg-review { max-width:none } #start.service-page .kg-review p { max-width:75ch } #start.service-page .s-text-examples { padding:var(--service-space) 0; background:#fff } #start.service-page .s-text-examples__headers { max-width:760px; margin:0 0 30px } #start.service-page .s-text-examples__headers .headers__pretitle { margin:0 0 10px; color:var(--seo-accent)!important; font-size:12px!important; font-weight:700; letter-spacing:.1em; line-height:1.4; text-transform:uppercase } #start.service-page .s-text-examples__headers .headers__title { margin:0 0 14px; color:var(--seo-ink); font-size:clamp(28px,3.2vw,44px); font-weight:600; letter-spacing:-.035em; line-height:1.12; text-transform:none } #start.service-page .s-text-examples__headers .headers__subtitle { max-width:680px; margin:0; color:var(--seo-ink); font-size:16px; line-height:1.6; text-align:left } #start.service-page .s-text-examples__items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; margin:0; list-style:none; counter-reset:none } #start.service-page .s-text-examples__item { width:auto; margin:0; padding:0; color:var(--seo-ink); background:#fff; border:1px solid var(--seo-line); border-radius:16px; overflow:hidden } #start.service-page .s-text-examples__item::before { display:none } #start.service-page .s-text-examples__item details { height:100% } #start.service-page .s-text-examples__item summary { display:flex; align-items:center; gap:12px; padding:18px 20px; color:var(--seo-ink); cursor:pointer; font-size:16px; font-weight:600; line-height:1.35; list-style:none } #start.service-page .s-text-examples__item summary::-webkit-details-marker { display:none } #start.service-page .s-text-examples__item summary::after { content:"+"; margin-left:auto; color:var(--seo-accent); font-size:24px; font-weight:400; line-height:1 } #start.service-page .s-text-examples__item details[open] summary { border-bottom:1px solid var(--seo-line); background:var(--seo-soft) } #start.service-page .s-text-examples__item details[open] summary::after { content:"−" } #start.service-page .s-text-examples__item summary>span { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--seo-accent); color:#fff; font-size:12px; font-weight:600 } #start.service-page .s-text-examples__copy { display:grid; gap:16px; padding:20px } #start.service-page .s-text-examples__copy>div { padding-left:14px; border-left:2px solid var(--seo-accent) } #start.service-page .s-text-examples__copy h3 { margin:0 0 8px; color:var(--seo-ink); font-size:14px!important; font-weight:600; line-height:1.35 } #start.service-page .s-text-examples__copy p { margin:0; color:var(--seo-ink); font-size:15px; font-weight:400; line-height:1.6 } /* The SEO guide is rendered by the existing layout, just after the service. */ .service-semantic-guide { --seo-ink:#3b4173; --seo-line:#dde0eb; padding:48px 0; background:#fff; color:var(--seo-ink); font-family:Roboto,Arial,sans-serif } .service-semantic-guide>.kg-wrap { width:calc(100% - 64px); max-width:1276px; margin:0 auto } .service-semantic-guide #recording-guide-title { color:var(--seo-ink); margin:0 0 28px; font-size:clamp(28px,3.1vw,44px); line-height:1.15; font-weight:600; letter-spacing:-.035em; text-transform:none } .service-semantic-guide__topics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px } .service-semantic-guide__topic { padding:28px; border:1px solid var(--seo-line); border-radius:18px; background:#fff } .service-semantic-guide__topic h3 { margin:0 0 16px; color:var(--seo-ink); font:600 22px/1.25 Roboto,Arial,sans-serif; letter-spacing:-.02em; text-transform:none } .service-semantic-guide__topic p { margin:0; color:var(--seo-ink); font:400 16px/1.7 Roboto,Arial,sans-serif } /* Cartoon preparation: one readable chapter per row, with no orphan card. */ .service-semantic-guide--cartoon { scroll-margin-top:100px } .service-semantic-guide--cartoon #recording-guide-title { max-width:1000px; margin-bottom:36px } .service-semantic-guide--cartoon .service-semantic-guide__topics { display:block } .service-semantic-guide--cartoon .service-semantic-guide__topic { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr); align-items:start; gap:48px; padding:30px 0; border:0; border-top:1px solid var(--seo-line); border-radius:0; } .service-semantic-guide--cartoon .service-semantic-guide__topic:last-child { padding-bottom:0 } .service-semantic-guide--cartoon .service-semantic-guide__topic h3 { max-width:290px; margin:0; font-size:24px; line-height:1.3 } .service-semantic-guide--cartoon .service-semantic-guide__topic p { max-width:78ch; line-height:1.75 } @media(max-width:800px) { .service-semantic-guide--cartoon .service-semantic-guide__topic { grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:28px } } @media(max-width:600px) { .service-semantic-guide--cartoon #recording-guide-title { margin-bottom:26px } .service-semantic-guide--cartoon .service-semantic-guide__topic { grid-template-columns:minmax(0,1fr); gap:14px; padding:24px 0 } .service-semantic-guide--cartoon .service-semantic-guide__topic h3 { max-width:none; font-size:22px } } @media(max-width:1100px) { #start.service-page .kg-portfolio-showcase [data-portfolio-grid] { grid-auto-columns:calc((100% - 40px)/3) } } @media(max-width:800px) { #start.service-page .kg-portfolio-showcase [data-portfolio-grid] { grid-auto-columns:calc((100% - 20px)/2) } .service-semantic-guide>.kg-wrap { width:calc(100% - 40px) } #start.service-page .s-types>.s-types__items { width:calc(100% - 40px) } .service-semantic-guide__topics { grid-template-columns:1fr } } @media(max-width:520px) { #start.service-page .kg-portfolio-showcase [data-portfolio-grid] { grid-auto-columns:88%; gap:14px } #start.service-page .s-types>.s-types__items { width:calc(100% - 32px) } .service-semantic-guide>.kg-wrap { width:calc(100% - 32px) } #start.service-page .kg-studio-trust { padding:42px 0 } #start.service-page .s-text-examples__items { grid-template-columns:1fr } #start.service-page .service-copy-paragraph { padding:20px } .service-semantic-guide { padding:36px 0 } .service-semantic-guide__topic { padding:22px } } #start.service-page .service-talent__footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px } #start.service-page .calc { width:100%; max-width:none; padding:32px; margin:24px 0 0; color:var(--seo-ink); background:#fff; border:1px solid var(--seo-line); border-radius:20px; box-shadow:none } #start.service-page .calc :is(.calc__header,.calc-type,.calc-write,.calc__row,.calc-files,.calc-fee,.calc-music,.calc-effects) { background:none; color:var(--seo-ink); border-radius:14px } #start.service-page .calc__header { padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid var(--seo-line); text-align:left } #start.service-page :is(.calc__title,.calc-fee__title,.calc-files__title,.calc-music__title,.calc-write__title,.calc-effects__title,.calc-type__title) { color:var(--seo-ink); font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-.02em; text-transform:none } #start.service-page .calc__subtitle { max-width:720px; margin:0; color:var(--seo-ink); font-size:16px; line-height:1.65; font-weight:400; text-align:left } #start.service-page .calc__row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0 } #start.service-page .calc__col { width:100%; max-width:none; padding:22px; margin:0; border:1px solid var(--seo-line); border-radius:16px; background:var(--seo-soft) } #start.service-page .calc__col-wide { grid-column:1 / -1; width:100%; max-width:none; margin:0 } #start.service-page .calc__col--result { grid-column:1 / -1; padding:0; border:0; background:none } #start.service-page :is(.calc-fee__subtitle,.calc-files__subtitle,.calc-music__subtitle,.calc-effects__subtitle) { color:var(--seo-ink); font-size:14px; line-height:1.6; font-weight:400 } #start.service-page :is(.calc-total,.calc__total) { width:100%; padding:24px; margin:24px 0 0; border:1px solid var(--seo-line); border-radius:16px; background:var(--seo-soft); color:var(--seo-ink) } #start.service-page .calc-total :is(p,span,strong) { color:var(--seo-ink) } #start.service-page :is(.calc-type__items,.calc-write__items) { display:flex; flex-wrap:wrap; gap:12px } #start.service-page :is(.calc-type__label,.calc-write__label,.calc-effects__label,.calc-music__label) { border-radius:12px; color:var(--seo-ink); letter-spacing:0; text-transform:none } #start.service-page .calc-music__items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none } #start.service-page .calc-music__item { max-width:none; margin:0; flex:none } #start.service-page .calc-music__item .form-item { height:100%; margin:0; padding:16px; border:1px solid var(--seo-line); border-radius:12px; background:#fff } #start.service-page .calc-music__item .form-item__helpers { margin:8px 0 0 } #start.service-page .calc-result { display:grid; grid-template-columns:auto minmax(210px,340px) minmax(0,1fr); align-items:center; gap:24px; padding:20px 24px; border:1px solid var(--seo-line); border-radius:16px; background:var(--seo-soft) } #start.service-page .calc-result__result { margin:0; text-align:left; font-size:36px } #start.service-page .calc-result__button { max-width:none; margin:0 } #start.service-page .calc-result__comment { margin:0; text-align:left; color:var(--seo-ink); font-size:14px; line-height:1.5 } #start.service-page input[type=range] { accent-color:var(--seo-accent) } #start.service-page .card-audio-price__in { width:100%; height:auto; padding:0; border:0; background:none } #start.service-page .card-audio-price__descr { color:var(--seo-ink); font-size:15px; line-height:1.65; font-weight:400 } #start.service-page :is(.s-audio-prices__note,.calc-note,.calc__note) { color:var(--seo-ink); font-size:14px; line-height:1.65 } @media(max-width:800px) { #start.service-page .calc { padding:24px } #start.service-page .calc__row { grid-template-columns:1fr } #start.service-page .calc__col-wide, #start.service-page .calc__col--result { grid-column:auto } #start.service-page .calc-music__items { grid-template-columns:1fr } #start.service-page .calc-result { grid-template-columns:1fr; gap:14px } #start.service-page .calc-result :is(.calc-result__result,.calc-result__comment) { text-align:left } } @media(max-width:520px) { #start.service-page .service-talent__footer { gap:12px } #start.service-page .service-talent__footer>.button { padding-left:16px; padding-right:16px; font-size:13px } #start.service-page .calc { padding:20px } } #start.service-page .s-readers__cards .audios__list { display:block; width:100%; margin:0 } #start.service-page :is(.fast-filters-items,.s-readers__fast-filters) { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0 } #start.service-page .fast-filters-items .button { min-height:38px; padding:8px 14px; border-radius:20px; margin:0; font-size:13px } /* IVR: replace the overloaded legacy diagram with a readable call path and * give the long, content-heavy page a deliberate vertical rhythm. */ #start.service-page [id] { scroll-margin-top:132px } #start.service-page .headers:has(+ .ivr-scheme), #start.service-page .ivr-scheme { display:none } #start.service-page .ivr-call-flow { padding:clamp(64px,7vw,104px) 0; background:#fff } #start.service-page .ivr-call-flow__heading { max-width:720px; margin:0 0 34px } #start.service-page .ivr-call-flow__eyebrow { margin:0 0 10px; color:var(--seo-accent); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase } #start.service-page .ivr-call-flow h2 { margin:0; color:var(--seo-ink); font-size:clamp(32px,4vw,52px); line-height:1.08; letter-spacing:-.045em } #start.service-page .ivr-call-flow__heading>p:last-child { max-width:58ch; margin:16px 0 0; color:var(--seo-ink); font-size:17px; line-height:1.65 } #start.service-page .ivr-call-flow__body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:28px; align-items:stretch } #start.service-page .ivr-call-flow__steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; margin:0; list-style:none; counter-reset:ivr } #start.service-page .ivr-call-flow__steps li { min-height:174px; padding:22px; border:1px solid var(--seo-line); border-radius:18px; background:var(--seo-soft) } #start.service-page .ivr-call-flow__steps span { display:block; margin:0 0 26px; color:var(--seo-accent); font-size:13px; font-weight:700; letter-spacing:.08em } #start.service-page .ivr-call-flow__steps strong { display:block; color:var(--seo-ink); font-size:20px; line-height:1.25 } #start.service-page .ivr-call-flow__steps p { margin:9px 0 0; color:var(--seo-ink); font-size:14px; line-height:1.55 } #start.service-page .ivr-call-flow__menu { padding:28px; border-radius:18px; background:#303662; color:#fff } #start.service-page .ivr-call-flow__menu>span { display:block; margin:0 0 18px; color:#ffffffb8; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase } #start.service-page .ivr-call-flow__menu>strong { display:block; max-width:30ch; font-size:23px; line-height:1.28; letter-spacing:-.02em } #start.service-page .ivr-call-flow__menu ul { display:grid; gap:10px; margin:28px 0 0; padding:0; list-style:none } #start.service-page .ivr-call-flow__menu li { display:flex; align-items:center; gap:12px; color:#fff; font-size:14px; line-height:1.4 } #start.service-page .ivr-call-flow__menu b { display:grid; place-items:center; width:28px; height:28px; flex:none; border:1px solid #ffffff70; border-radius:50%; font-size:13px } #start.service-page .s-dev { padding:clamp(64px,7vw,96px) 0; background:var(--seo-soft) } #start.service-page .s-dev__container { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:30px; align-items:center; width:min(100% - 48px,1220px); padding:32px; border:1px solid var(--seo-line); border-radius:22px; background:#fff } #start.service-page .s-dev__headers { margin:0 } #start.service-page .s-dev__headers .headers__title { max-width:14ch; margin-bottom:0 } #start.service-page .s-dev__items { display:grid; grid-template-columns:1fr; gap:0; padding:0; margin:0; list-style:none; border-top:1px solid var(--seo-line) } #start.service-page .s-dev__item { display:flex; align-items:center; gap:14px; min-height:56px; padding:11px 0; border-bottom:1px solid var(--seo-line); color:var(--seo-ink); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:none } #start.service-page .s-dev__item .svg-icon { width:28px; height:28px; flex:none; color:var(--seo-accent) } #start.service-page .s-dev__button-wrapper { grid-column:2; margin-top:-84px } #start.service-page .s-dev__button { min-width:220px; margin:0 } #start.service-page .s-calculator { padding:clamp(64px,7vw,96px) 0; background:#fff } #start.service-page .s-calculator__container { width:min(100% - 48px,1220px) } #start.service-page .s-calculator .calc { padding:0; margin:0; border:0; border-radius:0; background:transparent } #start.service-page .s-calculator .calc__header { max-width:760px; padding:0; margin:0 0 30px; border:0 } #start.service-page .s-calculator .calc__row { gap:16px; margin:16px 0 } #start.service-page .s-calculator .calc__col { padding:24px; border-radius:18px; background:var(--seo-soft) } #start.service-page .s-calculator .calc__col-wide { padding:0; background:transparent } #start.service-page .s-calculator .calc-music__item .form-item { min-height:94px; padding:18px; border-radius:14px } #start.service-page .s-calculator .calc-result { grid-template-columns:auto minmax(220px,310px) 1fr; padding:18px 20px; border-radius:18px; background:#303662; border:0 } #start.service-page .s-calculator .calc-result :is(.calc-result__result,.calc-result__comment) { color:#fff } #start.service-page .s-calculator .calc-result__button { background:var(--seo-accent) } @media(max-width:800px) { #start.service-page .ivr-call-flow__body, #start.service-page .s-dev__container { grid-template-columns:1fr } #start.service-page .ivr-call-flow__steps { grid-template-columns:1fr } #start.service-page .s-dev__container, #start.service-page .s-calculator__container { width:calc(100% - 40px); padding:24px } #start.service-page .s-dev__button-wrapper { grid-column:auto; margin:0 } #start.service-page .s-dev__headers .headers__title { max-width:none } #start.service-page .s-calculator .calc-result { grid-template-columns:1fr; gap:14px } } /* The IVR tab contains audio, not poster cards. Keep the original player and * popup links, but present each recording as a compact, complete audio card. */ #start.service-page .service-primary-portfolio .audios__buttons { display:none } #start.service-page .service-primary-portfolio #ivrList { width:100%; margin:0 } #start.service-page .service-primary-portfolio .s-avr-examples__items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:236px; gap:20px; width:100%; margin:0; padding:0; list-style:none } #start.service-page .service-primary-portfolio .s-avr-examples__item { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:16px; height:236px; min-height:0; max-width:none; margin:0; padding:22px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; box-shadow:none } #start.service-page .service-primary-portfolio .s-avr-examples__item::before { display:none } #start.service-page .service-primary-portfolio .s-avr-examples__item:is(:hover,:focus-within) { border-color:#c1492e80; box-shadow:0 14px 28px #27305212 } #start.service-page .service-primary-portfolio .s-avr-examples__player.player--mid { position:relative!important; display:grid; place-items:center; width:52px; height:52px; margin:0; border-radius:50%; background:#f5e8e2 } #start.service-page .service-primary-portfolio .s-avr-examples__player :is(.player__back,.player__progress,.service-inline-audio__timeline,.service-inline-audio__time) { display:none!important } #start.service-page .service-primary-portfolio .s-avr-examples__player .player__button { position:static!important; display:grid; place-items:center; width:52px!important; height:52px!important; margin:0!important; padding:0; border:0; border-radius:50%; background:var(--seo-accent)!important; box-shadow:none; transform:none!important } #start.service-page .service-primary-portfolio .s-avr-examples__player .player__button:is(:hover,:focus-visible) { background:#a93c25; transform:scale(1.04) } #start.service-page .service-primary-portfolio .s-avr-examples__player :is(.player__icon-play,.player__icon-pause) { position:static; width:16px; height:16px; margin:0; fill:#fff; transform:none } /* The legacy player keeps both SVGs in the DOM. Without an explicit state * switch they overlap and read as an orange square instead of one control. */ #start.service-page .service-primary-portfolio .s-avr-examples__player .player__icon-pause { display:none } #start.service-page .service-primary-portfolio .s-avr-examples__player.playing .player__icon-play { display:none } #start.service-page .service-primary-portfolio .s-avr-examples__player.playing .player__icon-pause { display:block } #start.service-page .service-primary-portfolio .s-avr-examples__content { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; margin:0; padding:0 } #start.service-page .service-primary-portfolio .s-avr-examples__caption { margin:0 0 8px; color:var(--seo-ink); font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.02em; text-transform:none } #start.service-page .service-primary-portfolio .s-avr-examples__caption a { color:inherit; text-decoration:none } #start.service-page .service-primary-portfolio .s-avr-examples__subcaption { display:-webkit-box; margin:0; overflow:hidden; color:#69708d; font-size:14px; font-weight:400; line-height:1.5; opacity:1; -webkit-line-clamp:3; -webkit-box-orient:vertical } #start.service-page .service-primary-portfolio .s-avr-examples__more { margin-top:auto; padding-top:12px; color:var(--seo-accent); font-size:13px; font-weight:600; text-decoration:none } #start.service-page .service-primary-portfolio .s-avr-examples__more::after { padding-left:6px; content:'→' } #start.service-page .service-primary-portfolio .s-avr-examples__button-wrapper { margin:22px 0 0; text-align:center } @media(max-width:1100px) { #start.service-page .service-primary-portfolio .s-avr-examples__items { grid-template-columns:repeat(3,minmax(0,1fr)) } } /* Service pages use the same portfolio proportions as /perevod. Every category reserves * the same card and panel height so switching tabs never moves the next block. */ #start.service-page .kg-portfolio-showcase__panels { min-height:372px } #start.service-page #portfolio [data-portfolio-grid] { height:372px; grid-template-rows:360px } #start.service-page #portfolio [data-portfolio-item] { box-sizing:border-box; height:360px; min-height:360px; max-height:360px; border:1px solid var(--seo-line); border-radius:18px; background:#fff; overflow:hidden } #start.service-page #portfolio :is(.kg-portfolio-showcase__media,.card-video__video), #start.service-page #portfolio .kg-portfolio-showcase__editorial-card>img { flex:none; height:180px; min-height:180px; width:100%; aspect-ratio:auto; object-fit:cover } #start.service-page #portfolio :is(.kg-portfolio-showcase__card-copy,.card-video__content), #start.service-page #portfolio .kg-portfolio-showcase__editorial-card>div { box-sizing:border-box; height:180px; min-height:0; padding:18px; overflow:auto } #start.service-page #portfolio .kg-portfolio-showcase__audio-card { grid-template-columns:1fr; grid-template-rows:52px 1fr; align-content:start; gap:20px; padding:24px } #start.service-page #portfolio .kg-portfolio-showcase__audio-card>button { align-self:start; width:52px; height:52px; background:var(--seo-accent); border:0; color:#fff } #start.service-page #portfolio .kg-portfolio-showcase__audio-card>div { min-width:0; overflow:auto } #start.service-page #portfolio .kg-portfolio-showcase__voice { gap:10px; line-height:1.4 } #start.service-page #portfolio .service-editorial-play { top:90px; bottom:auto; transform:translate(-50%,-50%) } #start.service-page #portfolio .kg-service-portfolio-intro { max-width:760px; margin:-6px 0 24px; line-height:1.6 } #start.service-page #portfolio .service-primary-portfolio .s-audiobook-examples__item { padding:0; gap:0 } #start.service-page #portfolio .service-primary-portfolio .s-audiobook-examples__poster { flex:none; height:180px; margin:0; border-radius:0 } #start.service-page #portfolio .service-primary-portfolio .s-audiobook-examples__content { min-height:0; padding:18px; overflow:auto } @media(max-width:800px) { #start.service-page .service-primary-portfolio .s-avr-examples__items { grid-template-columns:repeat(2,minmax(0,1fr)) } } @media(max-width:600px) { #start.service-page .service-primary-portfolio .s-avr-examples__items { grid-template-columns:1fr } #start.service-page .service-primary-portfolio .s-avr-examples__item { height:auto; min-height:170px; padding:18px } }