/* Shared finishing layer: native scrolling, the inquiry dialog and trust content. */
:root{color-scheme:dark;scrollbar-gutter:stable;--scroll-track:#151b19;--scroll-thumb:#66736b}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
@supports selector(::-webkit-scrollbar){
  *{scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--scroll-track)}
  ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:3px solid var(--scroll-track);border-radius:12px;min-height:48px}
  ::-webkit-scrollbar-thumb:hover{background:#dd8069}
  ::-webkit-scrollbar-thumb:active{background:var(--accent)}
  ::-webkit-scrollbar-corner{background:var(--scroll-track)}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
}
dialog,textarea{overscroll-behavior:contain}
dialog{scrollbar-gutter:stable;max-height:calc(100dvh - 32px)}
#brief-dialog{width:min(650px,calc(100% - 28px));padding:0;overflow-y:auto;border-radius:6px;border-color:#435149;box-shadow:0 30px 120px #0008}
.brief-topbar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 28px;border-bottom:1px solid var(--line);background:#171d1bf5;backdrop-filter:blur(18px)}
.brief-topbar>.eyebrow{font-size:.75rem;letter-spacing:.13em;color:#b6c3ba}
#brief-dialog .dialog-close{position:static;margin:0 -9px 0 0;flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:1.8rem;color:#c3cec6;line-height:1}
#brief-dialog .dialog-close:hover{color:#fff;background:#ffffff12}
#brief-form-view,#brief-result{padding:26px 28px 30px}
#brief-dialog h2{font-size:clamp(1.9rem,4vw,2.65rem);line-height:1.15;letter-spacing:-.045em;margin:0 0 14px}
.brief-intro{font-size:1rem;line-height:1.65;color:#aebdb2;margin:0 0 22px;max-width:510px}
#brief-form{gap:16px}
.brief-identity{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}
#brief-form label{font-size:.875rem;line-height:1.5}
.brief-identity>label{display:grid;align-content:start;gap:8px;min-width:0}
#brief-form input:not([type=radio]),#brief-form textarea,#brief-form select{background-color:#202724;border-color:#46544b;color:#edf2ee;border-radius:3px;font-size:1rem;padding:11px 12px;min-height:46px;line-height:1.5}
#brief-form textarea{min-height:88px;resize:vertical}
#brief-form input::placeholder,#brief-form textarea::placeholder{color:#94a79a}
#brief-form input:-webkit-autofill,#brief-form input:-webkit-autofill:hover,#brief-form input:-webkit-autofill:focus{-webkit-text-fill-color:#edf2ee;-webkit-box-shadow:0 0 0 1000px #202724 inset;caret-color:#edf2ee}
#brief-form .field-error:empty{display:none}
.brief-options{border:1px solid #435148;border-radius:3px;background:#1d2420}
.brief-options>summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 16px;list-style:none}
.brief-options>summary::after{content:'+';font-size:1.5rem;line-height:1;color:#e28d73;font-weight:400}
.brief-options[open]>summary::after{content:'−'}
.brief-options>summary strong{display:block;font-weight:500;font-size:.875rem}
.brief-options>summary small{display:block;font-size:.875rem;line-height:1.6;color:#9fb0a4;margin-top:3px}
.brief-options-fields{display:grid;gap:16px;padding:0 16px 16px}
.brief-options-fields>label{display:grid;gap:8px}
#brief-submit{width:100%;min-height:52px;padding:14px 19px}
#brief-form .form-note{font-size:.75rem;line-height:1.6;color:#9daf9f;margin:0}
#brief-result>.eyebrow{color:var(--accent);margin-bottom:18px}
#brief-result-title:focus{outline:0}
#brief-result-text{font-size:1rem!important;line-height:1.7}
#brief-result #brief-summary{margin:22px 0;font-size:.875rem}
.photo-story-grid{gap:18px}
.story-photo{border-radius:3px}
.story-photo img{filter:saturate(.75);transition:transform .8s var(--ease),filter .5s}
.story-photo:hover img{filter:saturate(1);transform:scale(1.035)}
.story-photo>span small{font-size:.875rem;line-height:1.5}
.story-photo>span b{font-size:clamp(1.2rem,1.7vw,1.75rem);font-weight:500;letter-spacing:-.035em}
.photo-story-note{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:22px;margin-top:26px}
.photo-story-note>p{font-size:.875rem;color:#a4b5a8;max-width:660px}
.photo-story-note>a{font-size:.875rem;color:#ef9278;white-space:nowrap}
.client-heading{display:flex;justify-content:space-between;align-items:start;gap:30px;margin-bottom:28px}
.client-heading>.eyebrow{color:#a9b9ad}
.client-heading>p:last-child{max-width:420px;font-size:1rem;color:#a9b9ad;line-height:1.65}
.client-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.client-logo{margin:0;flex:0 1 calc(25% - 9px);min-width:0;display:flex;align-items:center;justify-content:center;min-height:142px;padding:22px 30px;background:transparent;border:0;overflow:hidden}
.client-logo img{width:100%;max-width:185px;height:100px;object-fit:contain;transition:transform .3s var(--ease)}
.client-logo:hover img{transform:scale(1.04)}
.client-logo[data-format=seal] img{max-width:102px}
.client-logo[data-format=wide] img{max-width:225px}
/* Carousel: client-carousel.js wraps the logos in .client-track and adds .is-marquee; without it the grid above stays.
   In marquee mode the rail is a real scroll area (scrollbar hidden): the script moves it by itself and the visitor can take over. */
.client-track{display:contents}
.client-logos.is-marquee{--logo-w:clamp(200px,17vw,300px);display:block;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.client-logos.is-marquee::-webkit-scrollbar{display:none}
.client-logos.is-marquee.is-dragging{cursor:grabbing}
.client-logos.is-marquee:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.is-marquee .client-track{display:flex;width:max-content}
.is-marquee .client-logo{flex:0 0 var(--logo-w);margin-right:12px}
.is-marquee .client-logo img{-webkit-user-drag:none;pointer-events:none}
@media(max-width:760px){.is-marquee .client-logo{margin-right:10px}}
.client-footnote{font-size:.75rem;color:#91a296;line-height:1.6;margin-top:18px}
.client-footnote>a{color:#c3d0c6;text-decoration:underline;text-underline-offset:4px}
.about-values{display:grid;grid-template-columns:1fr;gap:0;margin-top:32px;border-top:1px solid var(--line)}
.about-values>div{display:grid;grid-template-columns:32px 1fr;gap:16px;border-bottom:1px solid var(--line);padding:19px 0}
.about-values>div>span{padding:0;border:0;font-size:.75rem;color:var(--accent);padding-top:4px}
.about-values h3{font-size:1rem;line-height:1.5;color:#e1e8e2;font-weight:500}
.about-values p{font-size:.875rem;line-height:1.7;color:#a3b1a7;margin-top:5px}
.contact-next{display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none;max-width:530px;border-top:1px solid #171a1a40}
.contact-next li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid #171a1a30;font-size:.875rem;line-height:1.6}
.contact-next li>span{font-size:.75rem;padding-top:3px;color:#662616}
.contact-section .contact-intro{max-width:550px;line-height:1.7}
/* The six companies of the group with their mailboxes (was a single address) */
.group-contacts{list-style:none;margin:18px 0 38px;padding:0 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;border-bottom:1px solid #171a1a50}
.group-contacts li{display:grid;gap:5px;align-content:start;min-width:0}
.group-contacts .group-name{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3b1710}
.group-contacts a{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.35;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#171a1a55;text-underline-offset:4px}
.group-contacts a:hover{text-decoration-color:currentColor}
.group-contacts .group-scope{font-size:.8125rem;line-height:1.5;color:#5e2016}
@media(max-width:760px){.group-contacts{grid-template-columns:1fr;gap:22px;margin-bottom:32px;padding-bottom:28px}}
.service-proof-line{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-top:22px;color:#a3b3a6;font-size:.875rem;line-height:1.6}
.service-proof-line>span{border-left:1px solid #df765a;padding-left:12px}
/* The custom listbox (select-listbox.js), used by the vacancy dropdown: a dark, on-brand trigger + list instead
   of the browser's own <select> popup. */
.select-trigger{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:46px;padding:11px 12px;text-align:left;background:#202724;border:1px solid #46544b;border-radius:3px;color:#edf2ee;font:inherit;font-size:1rem;line-height:1.5;cursor:pointer}
.select-trigger>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-trigger[data-empty]{color:#94a79a}
.select-trigger::after{content:'';flex:none;width:8px;height:8px;margin-top:-4px;border-right:2px solid #c3cec6;border-bottom:2px solid #c3cec6;transform:rotate(45deg);transition:transform .2s}
.select-trigger[aria-expanded=true]{border-color:#6f8177}
.select-trigger[aria-expanded=true]::after{margin-top:4px;transform:rotate(-135deg)}
.select-trigger[aria-invalid=true]{border-color:#ff9676}
.select-list{position:absolute;left:0;right:0;z-index:6;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;background:#202724;border:1px solid #5a6a5f;border-radius:4px;box-shadow:0 18px 50px #000a}
.select-list[hidden]{display:none}
.select-list[data-direction=down]{top:calc(100% + 4px)}
.select-list[data-direction=up]{bottom:calc(var(--trigger-height,46px) + 4px)}
.select-option{padding:10px 12px;border-radius:3px;color:#dfe7e1;font-size:.9375rem;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.select-option[data-active]{background:#2d3833}
.select-option[aria-selected=true]{color:#fff;padding-left:14px;box-shadow:inset 3px 0 0 var(--accent)}
/* The language switch: RU / ҚАЗ / EN / 中文 sit right of the header CTA as one bordered row of buttons — no
   popup, so it can never misalign or spill outside the header the way a dropdown list could. */
/* flex-shrink:0 and no overflow:hidden on the row itself: a flex child with overflow:hidden shrinks all the way
   to 0 width before anything else gives way (its automatic minimum size stops being content-based), so at the
   very narrowest phones the last button was being clipped away rather than the row simply staying full width.
   Each button gets its own corner rounding instead, so the group still reads as one segmented control. */
.lang-switch{display:flex;flex-shrink:0;border:1px solid #ffffff3a;border-radius:4px}
.lang-switch button{background:transparent;border:0;border-left:1px solid #ffffff3a;color:#c3cec6;font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.02em;line-height:1;padding:0 11px;min-height:44px;cursor:pointer;transition:background .2s,color .2s}
.lang-switch button:first-child{border-left:0;border-radius:4px 0 0 4px}
.lang-switch button:last-child{border-radius:0 4px 4px 0}
.lang-switch button:hover{color:#fff;background:#ffffff12}
.lang-switch button[aria-pressed=true]{background:var(--accent);color:var(--ink)}
.navigation .lang-switch{display:none}
.story-photo:nth-child(2)>img,.story-photo:nth-child(3)>img{object-position:center 40%}
.detail-hero-photo img[src*="editorial/"]{object-position:center 40%}
@media(min-width:1500px){.client-logo{min-height:168px}.client-logo img{height:112px}}
@media(max-width:1000px){.client-logo{padding:18px;min-height:130px;flex-basis:calc(33.333% - 8px)}.client-logo img{height:90px}}
@media(max-width:760px){
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{border-width:2px}
  #brief-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .brief-topbar{padding:9px 20px}
  #brief-form-view,#brief-result{padding:22px 20px 25px}
  #brief-dialog h2{font-size:2rem}
  .brief-intro{font-size:1rem;margin-bottom:20px}
  .brief-identity{grid-template-columns:1fr;gap:14px}
  .brief-options>summary{padding:12px 14px}
  .brief-options-fields{padding:0 14px 14px}
  #brief-form .brief-context-fields{grid-template-columns:1fr}
  .photo-story-note{align-items:start;flex-direction:column;gap:15px;margin-top:20px;padding-top:20px}
  .client-heading{flex-direction:column;gap:16px;margin-bottom:24px}
  .client-heading>p:last-child{font-size:1rem;max-width:none}
  .client-logos{gap:10px}
  .client-logo{min-height:114px;padding:14px 18px;flex-basis:calc(50% - 5px)}
  .client-logo img{height:80px}
  .client-logo[data-format=seal] img{max-width:80px}
  .about-values{margin-top:25px}
  .contact-next{margin-top:24px}
  .service-proof-line{gap:12px;margin-top:20px;font-size:.875rem}
}
@media(max-width:1180px){.lang-switch button{min-height:40px;padding:0 8px;font-size:.6875rem}.header-actions .lang-switch{display:none}.navigation .lang-switch{display:flex;margin-top:20px}}
@media(forced-colors:active){*{scrollbar-color:auto}.client-logo{border:1px solid CanvasText}.brief-options{border:1px solid CanvasText}.select-trigger,.select-list{border:1px solid CanvasText}.lang-switch{border:1px solid CanvasText}.lang-switch button{border-left-color:CanvasText}}
/* Catalogue cards use second-level headings below their page heading. */
.related-case h2{font-size:1.5rem;letter-spacing:-.03em;margin:12px 0}
.related-case:hover h2{color:#a73c27}

/* Analytics consent is available on every page and remains easy to revise later. */
#cookie-consent[hidden],.cookie-settings[hidden]{display:none}
.cookie-banner{position:fixed;z-index:1200;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:24px 28px;background:#171a1a;color:#f4f5f3;border:1px solid #ffffff30;box-shadow:0 18px 55px #0007}
.cookie-banner h2{font-size:1.15rem;margin:0 0 7px}
.cookie-banner p{max-width:760px;margin:0;color:#c7d1c9;font-size:.875rem;line-height:1.55}
.cookie-banner a{color:#e7bd72;text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-actions button{border:1px solid #ffffff40;padding:12px 18px;background:transparent;color:#f4f5f3;font:inherit;cursor:pointer}
.cookie-actions .cookie-accept{border-color:#e7bd72;background:#e7bd72;color:#171a1a}
.cookie-settings{border:0;border-bottom:1px solid currentColor;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
@media(max-width:760px){.cookie-banner{left:10px;right:10px;bottom:10px;display:block;padding:20px}.cookie-actions{margin-top:18px}.cookie-actions button{flex:1;padding:12px 8px}}
.service-specialties{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:3rem;padding:5rem max(5vw,2rem);border-top:1px solid var(--line,#d8d9d3)}
.service-specialties h2{font-size:clamp(2rem,4vw,4.25rem);font-weight:400;line-height:1.02;margin:.8rem 0}
.specialty-links{border-top:1px solid var(--line,#d8d9d3)}
.specialty-links a{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:center;padding:1.35rem 0;border-bottom:1px solid var(--line,#d8d9d3);color:inherit;text-decoration:none;font-size:clamp(1.1rem,2vw,1.55rem)}
.specialty-links a:hover span{color:var(--accent,#d6371c)}
.specialty-links small{grid-column:1;color:var(--muted,#68706d);font-size:.85rem}
.catalogue-specialties{padding-top:2rem}
@media(max-width:760px){.service-specialties{grid-template-columns:1fr;gap:1.5rem;padding:3.5rem 1.25rem}}