.lang-switch{position:relative;z-index:25;flex:0 0 auto;margin-left:auto;display:flex;align-items:center;padding:4px;border:1px solid rgba(7,61,58,.22);border-radius:999px;background:rgba(244,248,246,.86);box-shadow:0 8px 28px rgba(7,61,58,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lang-switch a{min-width:42px;height:36px;padding:0 9px;border-radius:999px;display:grid;place-items:center;color:var(--ink,#073d3a);font:600 .65rem/1 var(--sans,"Manrope",Arial,sans-serif);letter-spacing:.06em;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.lang-switch a:hover{transform:translateY(-1px)}
.lang-switch a[aria-current="true"]{background:var(--teal,#16847c);color:#fff}
.header-inner{gap:10px}
.page-head .lang-switch,.site-header .lang-switch{margin-left:auto}
.menu-panel .lang-switch{margin:20px 0 0;padding:5px;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08);box-shadow:none;width:max-content}
.menu-panel .lang-switch a{color:#fff}
.menu-panel .lang-switch a[aria-current="true"]{background:var(--mint,#8be2d8);color:var(--ink,#073d3a)}
@media(max-width:759px){.site-header{left:0;right:auto;width:100vw}.site-header .header-inner{position:static;min-height:78px}.site-header .header-inner>a:first-child{flex:0 0 120px;min-width:120px;overflow:visible}.site-header .logo{width:120px;max-width:none}.site-header .menu-button{position:absolute;z-index:3;left:calc(100vw - 80px);right:auto;top:18px;width:64px;height:64px}.site-header .back{position:absolute;z-index:3;left:calc(100vw - 94px);right:auto;top:18px}.site-header .lang-switch{position:absolute;z-index:4;left:calc(100vw - 176px);right:auto;top:27px;margin:0;padding:3px}.site-header .lang-switch a{min-width:37px;height:32px;padding-inline:7px;font-size:.59rem}.page-head .lang-switch a{min-width:38px;padding-inline:7px}.page-head .back{padding-inline:12px}.page-head .back span{display:none}html[lang="kk"] .hero h1{font-size:clamp(2.8rem,12.5vw,8rem);line-height:.95}}
@media(max-width:410px){.site-header .header-inner>a:first-child{flex-basis:112px;min-width:112px}.site-header .logo{width:112px}.site-header .menu-button{left:calc(100vw - 74px);top:18px;width:58px;height:58px}.site-header .menu-button span{font-size:.7rem}.site-header .lang-switch{left:calc(100vw - 164px);top:25px}.site-header .lang-switch a{min-width:34px;padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.lang-switch a{transition:none}}

/* Kazakh uses longer compound words. Keep the expressive scale while allowing
   every heading and CMS value to stay inside its mobile container. */
html[lang="kk"] .hero h1,
html[lang="kk"] .menu-nav a,
html[lang="kk"] .announcement-body h2,
html[lang="kk"] .announcement-body p,
html[lang="kk"] .offers-intro h2,
html[lang="kk"] .offer-card h3,
html[lang="kk"] .offer-summary,
html[lang="kk"] .offer-details span,
html[lang="kk"] .process-step h2,
html[lang="kk"] .process-step p,
html[lang="kk"] .process-output,
html[lang="kk"] .media-head h2,
html[lang="kk"] .media-entry a,
html[lang="kk"] .clients-head h2,
html[lang="kk"] .cases h2,
html[lang="kk"] .case-meta h3,
html[lang="kk"] .contact h2,
html[lang="kk"] .projects-head h2,
html[lang="kk"] .backstage h2,
html[lang="kk"] .closing h2,
html[lang="kk"] .release-hero h1,
html[lang="kk"] .gallery-section h2,
html[lang="kk"] .more h2{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

html[lang="kk"] .announcement-card,
html[lang="kk"] .announcement-body,
html[lang="kk"] .offer-card,
html[lang="kk"] .offer-main,
html[lang="kk"] .offer-details,
html[lang="kk"] .offer-details div,
html[lang="kk"] .process-step,
html[lang="kk"] .media-entry,
html[lang="kk"] .media-entry a,
html[lang="kk"] .case-meta,
html[lang="kk"] .article-body,
html[lang="kk"] .box{
  min-width:0;
}

@media(min-width:760px){
  html[lang="kk"] .hero h1{font-size:clamp(6.35rem,8.5vw,8rem);line-height:.92;letter-spacing:-.048em}
  html[lang="kk"] .announcement-body h2{font-size:clamp(4.65rem,6.5vw,5.55rem);line-height:.95;letter-spacing:-.043em}
  html[lang="kk"] .clients-head h2{font-size:clamp(6.4rem,8.2vw,7.6rem);line-height:.9}
  html[lang="kk"] .offers-intro h2{font-size:clamp(6.25rem,8vw,7.35rem);line-height:.9}
  html[lang="kk"] .offer-card h3,
  html[lang="kk"] .offer-card:nth-child(2) h3,
  html[lang="kk"] .offer-card:nth-child(5) h3,
  html[lang="kk"] .offer-card:nth-child(6) h3{font-size:clamp(4rem,5.15vw,4.65rem);line-height:.98;letter-spacing:-.04em}
  html[lang="kk"] .process-step{max-width:720px}
  html[lang="kk"] .process-step h2{font-size:clamp(4rem,5.1vw,5.15rem);line-height:.98;letter-spacing:-.04em}
  html[lang="kk"] .media-head h2{font-size:clamp(5.8rem,7.3vw,6.75rem);line-height:.92}
  html[lang="kk"] .cases h2{font-size:clamp(5.15rem,6.2vw,5.9rem);line-height:.98}
  html[lang="kk"] .contact h2{font-size:clamp(6rem,7.5vw,7rem);line-height:.98}
  html[lang="kk"] .projects-head h2{font-size:clamp(5.55rem,7vw,6.6rem);line-height:.94}
  html[lang="kk"] .backstage h2{font-size:clamp(5.7rem,7.1vw,6.7rem);line-height:.94}
  html[lang="kk"] .closing h2{font-size:clamp(5rem,6.2vw,5.85rem);line-height:.98}
  html[lang="kk"] .release-hero h1{font-size:clamp(5.35rem,6.7vw,6.25rem);line-height:1}
  html[lang="kk"] .gallery-section h2,
  html[lang="kk"] .more h2{font-size:clamp(4.1rem,5.1vw,4.8rem);line-height:1}
}

@media(max-width:759px){
  html[lang="kk"] .menu-nav a{font-size:clamp(2rem,10vw,3.25rem);line-height:1.02}
  html[lang="kk"] .announcement-body h2{font-size:clamp(2.15rem,9.5vw,3.9rem);line-height:.98;letter-spacing:-.042em}
  html[lang="kk"] .offers-intro h2{font-size:clamp(3.05rem,13vw,5.2rem);line-height:.91}
  html[lang="kk"] .offer-card h3,
  html[lang="kk"] .offer-card:nth-child(2) h3,
  html[lang="kk"] .offer-card:nth-child(5) h3,
  html[lang="kk"] .offer-card:nth-child(6) h3{font-size:clamp(2rem,9vw,3.45rem);line-height:1;letter-spacing:-.038em}
  html[lang="kk"] .offer-details span{line-height:1.35}
  html[lang="kk"] .offer-count,
  html[lang="kk"] .offer-action,
  html[lang="kk"] .process-output{letter-spacing:.075em}
  html[lang="kk"] .process-step h2{font-size:clamp(2.4rem,10.7vw,4.5rem);line-height:1;letter-spacing:-.04em}
  html[lang="kk"] .media-head h2{font-size:clamp(3.05rem,13vw,5.25rem);line-height:.92}
  html[lang="kk"] .clients-head h2{font-size:clamp(3.25rem,14.5vw,5.7rem);line-height:.9}
  html[lang="kk"] .cases h2{font-size:clamp(2.85rem,12.2vw,4.8rem);line-height:.98}
  html[lang="kk"] .contact h2{font-size:clamp(2.95rem,12.6vw,5rem);line-height:.98}
  html[lang="kk"] .projects-head h2{font-size:clamp(3rem,13vw,5.15rem);line-height:.94}
  html[lang="kk"] .backstage h2{font-size:clamp(2.95rem,12.5vw,5rem);line-height:.94}
  html[lang="kk"] .closing h2{font-size:clamp(2.8rem,12vw,4.85rem);line-height:.98}
  html[lang="kk"] .release-hero h1{font-size:clamp(2.55rem,10.8vw,4.9rem);line-height:1}
  html[lang="kk"] .gallery-section h2,
  html[lang="kk"] .more h2{font-size:clamp(2.35rem,10vw,4rem);line-height:1.02}
}

@media(max-width:410px){
  html[lang="kk"] .announcement-body h2{font-size:2.1rem}
  html[lang="kk"] .offer-card h3,
  html[lang="kk"] .offer-card:nth-child(2) h3,
  html[lang="kk"] .offer-card:nth-child(5) h3,
  html[lang="kk"] .offer-card:nth-child(6) h3{font-size:1.95rem}
  html[lang="kk"] .process-step h2{font-size:2.35rem}
  html[lang="kk"] .projects-head h2{font-size:2.9rem}
  html[lang="kk"] .case-meta h3{font-size:2rem}
  html[lang="kk"] .backstage h2{font-size:2.9rem}
  html[lang="kk"] .closing h2{font-size:2.75rem}
}