/* Shared alignment and reading rhythm. Image scenes keep their existing full-bleed layout. */
:root{
 --page-gutter:clamp(16px,3vw,48px);
 --section-inset:clamp(24px,4.2vw,60px);
 --section-top:var(--section-inset);
 --section-gap:clamp(48px,6vw,84px);
 --content-gap:clamp(24px,3vw,44px);
 scroll-padding-top:calc(var(--header,100px) + 20px);
 scroll-padding-bottom:100px;
}
.wrap{width:calc(100% - var(--page-gutter) * 2);max-width:1440px;margin-inline:auto}
.section{margin-block:var(--section-gap)}
.section-surface.photo-surface{--photo-space:var(--section-inset)}
.section-head,.photo-stage .section-head,.company-copy .company-heading{margin-bottom:28px}
.section-surface :is(h2,h3,h4,p,li),.footer :is(p,a,dd){overflow-wrap:break-word}
.section-surface :is(.service-layout,.profession-layout,.support-layout,.about-layout,.service-intro,.international-intro,.jobseeker-intro,.brief-heading,.brief-form),
.company-overview>*,.company-approach-grid>*,.candidate-application>*,.scope-columns>*,.catalog-grid>*{min-width:0}
body .section .section-surface :is(.catalog-grid h3,.candidate-paths h3){font-size:var(--heading-card);line-height:1.45}
.section-surface :is(p,ul,ol)+:is(p,ul,ol){margin-top:16px}
.section-surface .form-privacy>p{margin-top:12px}

/* The logo and the copy occupy separate grid cells, even at intermediate widths. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:28px 20px;min-height:640px;padding:var(--section-inset);align-content:center}
.hero .hero-title-wrap{grid-column:1;grid-row:1;max-width:none;min-width:0;order:0}
.hero .hero-title-wrap h1,html[lang=en] .hero .hero-title-wrap h1{font-size:clamp(36px,3.65vw,60px);line-height:1.15;letter-spacing:-.045em}
.hero .hero-title-wrap .eyebrow{margin-bottom:22px;line-height:1.6}
.hero .hero-copy{grid-column:1;grid-row:2;align-self:start;max-width:510px;min-width:0;padding:0;order:2}
.hero .hero-copy>p{margin:0 0 28px}
.hero .logo-stage{position:relative;inset:auto;grid-column:2;grid-row:1/3;align-self:stretch;width:100%;height:auto;min-height:480px;margin:0;order:1}
.hero-actions{gap:16px}
.hero-actions .button{min-width:0;max-width:100%;padding:14px 22px;white-space:normal;text-align:center}
/* Reduce the desktop hero from 640px by the requested 11 / 12.7 ratio.
   Content can still grow at text zoom; the narrow-screen layout is unchanged. */
@media(min-width:1001px){
 .hero{min-height:554px;padding-block:32px;row-gap:22px}
 .hero .logo-stage{min-height:420px}
}

/* Four facts in the same order as MCPK, immediately below the main logo. */
.hero-facts{margin-top:34px;padding:14px var(--section-inset);border:1px solid #ffffff73;border-radius:28px;background:var(--soft-surface);box-shadow:var(--soft-panel)}
.hero-facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.hero-fact{min-width:0;padding:0 24px;border-right:1px solid #c9d9e6;text-align:center}
.hero-fact:last-child{border-right:0}
.hero-fact strong{display:block;min-height:0;margin:0 0 8px;font-size:clamp(19px,1.6vw,24px);font-weight:500;line-height:1.3;letter-spacing:-.025em;color:var(--ink)}
.hero-fact span{display:block;max-width:23ch;margin-inline:auto;font-size:14px;line-height:1.65;color:var(--copy-ink)}
.chaz-intro{gap:var(--content-gap);padding:0 var(--section-inset);margin-top:36px}
.chaz-intro .accreditation-face{padding:24px}

/* Header dimensions are intrinsic; measured height keeps anchor destinations visible. */
.header{height:auto;min-height:0;padding-block:12px}
.header .header-inner{height:auto;min-width:0;grid-template-columns:auto minmax(0,1fr) auto auto;gap:18px}
.header .brand{min-width:0}
.header .brand-logo{width:180px;max-width:100%;height:58px;display:block}
.header .header-inner>nav{width:max-content;max-width:100%;min-width:0;gap:2px;padding:5px;justify-self:center;justify-content:center}
.header nav a{padding:10px 9px;white-space:normal;text-align:center;min-width:0}
.header .header-phone{padding:12px 16px}
.header .language-switch a{min-height:36px}

/* All five steps fit without pushing the mobile next button out of the scene. */
:root body .journey .journey-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:24px}
:root body .journey .journey-stops button{min-width:0;width:100%;white-space:normal;overflow-wrap:break-word}
.journey .journey-mobile-nav{width:min(100%,460px);padding:20px 24px 24px}
.journey .journey-nav-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
.journey :is(.journey-back,.journey-next){min-width:0;width:100%;padding:12px 8px;white-space:normal;text-align:center;overflow-wrap:break-word}
.journey .journey-counter{min-width:40px}
.journey .journey-player{margin-inline:0}

/* Form labels, long addresses and footer links must remain inside their columns. */
.brief-form{max-width:100%;padding:clamp(20px,2.5vw,32px);gap:24px}
.brief-form :is(label,.form-privacy,.form-note,.field-pair,.consent-check span){min-width:0;max-width:100%;overflow-wrap:break-word}
.brief-form .field-pair{column-gap:20px}
.brief-form :is(input,select,textarea){max-width:100%;min-width:0}
.brief-contacts a{max-width:100%;overflow-wrap:anywhere}
.social-list{grid-template-columns:repeat(3,44px);gap:18px;width:max-content;max-width:100%;margin:0;padding:0}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--content-gap);align-items:start}
.footer-top>*{min-width:0}
.footer-top .footer-social{justify-self:end}
.footer-bottom{gap:24px}
.footer-bottom .legal-links{display:flex;flex-wrap:wrap;gap:16px 24px}
.footer-requisites{padding-block:32px}
.footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.contact-panel{max-width:calc(100vw - 32px);scrollbar-gutter:stable;max-height:calc(100dvh - 120px)}
.contact-panel .eyebrow{padding-right:36px}
.contact-panel>a:not(.button){overflow-wrap:anywhere}
.contact-dock{right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}

@media(max-width:1300px){
 .header .header-inner{grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px}
 .header .header-inner>.brand{grid-column:1;grid-row:1}
 .header .header-inner>.header-phone{grid-column:2;grid-row:1}
 .header .language-switch{grid-column:3;grid-row:1}
 .header .header-inner>nav{grid-column:1/-1;grid-row:2;flex-wrap:wrap;gap:2px;justify-content:center}
}
@media(max-width:1000px){
 .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;gap:24px}
 .hero .hero-title-wrap{grid-column:1;grid-row:1}
 .hero .logo-stage{grid-column:1;grid-row:2;min-height:0;height:clamp(300px,48vw,450px);width:100%;margin:0}
 .hero .hero-copy{grid-column:1;grid-row:3;max-width:720px}
 .hero .hero-title-wrap h1,html[lang=en] .hero .hero-title-wrap h1{font-size:clamp(32px,5.6vw,52px)}
 .hero-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
 .hero-fact:nth-child(2n){border-right:0}
 .hero-fact strong{font-size:23px;min-height:2.6em}
 .chaz-intro{grid-template-columns:1fr}
 .photo-stage .section-head{max-width:none}
}
@media(max-width:700px){
 :root{--section-inset:24px;--section-top:28px;--section-gap:48px;--disclosure-inset:18px}
 .header{padding-block:8px}
 .header .header-inner{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
 .header .brand-logo{width:clamp(104px,31vw,150px);height:46px}
 .header .header-inner>.header-phone{grid-column:2;grid-row:1;--control-text:13px;padding:10px 12px}
 .header .header-inner>nav{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1/-1;grid-row:2;gap:2px;padding:4px}
 .header nav a{--control-text:13px;min-height:40px;padding:8px 4px}
 .header .header-inner>nav.primary-navigation{grid-template-columns:repeat(6,minmax(0,1fr))}
 .header .primary-navigation>a{grid-column:span 2}
 .header .primary-navigation>a:nth-last-child(-n+2){grid-column:span 3}
 .header .language-switch{grid-column:1/-1;grid-row:3;justify-self:end}
 .header .language-switch a{min-height:28px;padding:5px 7px}
 .hero{padding:28px var(--section-inset);gap:20px}
 .hero .hero-title-wrap h1,html[lang=en] .hero .hero-title-wrap h1{font-size:clamp(28px,6.8vw,42px)}
 .hero .hero-title-wrap .eyebrow{margin-bottom:18px;font-size:14px}
 .hero .logo-stage{height:clamp(260px,66vw,350px)}
 .hero-actions{gap:12px}
 .hero-actions .button{flex:1 1 180px;width:auto;min-width:0}
 .hero-facts{margin-top:24px;padding:24px var(--section-inset)}
 .hero-facts-grid{gap:24px 0}
 .hero-fact{padding:0 14px}
 .hero-fact strong{font-size:clamp(18px,4.2vw,22px);min-height:2.6em;line-height:1.3;margin-bottom:8px}
 .hero-fact span{font-size:13px}
 .chaz-intro{padding-inline:0;margin-top:28px;gap:18px}
 .chaz-intro .accreditation-face{padding:22px var(--section-inset)}
 .section-head,.photo-stage .section-head,.company-copy .company-heading{margin-bottom:24px}
 :root body .journey .journey-stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px}
 :root body .journey .journey-stops button:last-child{grid-column:1/-1}
 .journey .journey-mobile-nav{padding:18px}
 .journey .journey-nav-row{gap:8px}
 .journey .journey-next,.journey .journey-back{font-size:14px}
 .footer-top{grid-template-columns:1fr;gap:32px}
 .footer-top .footer-social{justify-self:start}
 .footer-requisites dl{grid-template-columns:1fr}
 .contact-trigger{gap:10px;padding:12px 16px}
 .contact-trigger .contact-logo{width:54px;max-width:54px;flex-basis:54px}
}
@media(max-width:360px){
 :root{--page-gutter:14px;--section-inset:20px;--disclosure-inset:16px}
 .hero-facts-grid{grid-template-columns:1fr;gap:22px}
 .hero-fact{padding:0;border:0}
 .hero-fact strong{min-height:0;font-size:21px;margin-bottom:6px}
 .header .header-inner{column-gap:8px}
 .header .header-inner>.header-phone{padding-inline:10px;--control-text:12px}
 .header nav a{--control-text:12px}
}
/* Shared rows align both the values and their descriptions without empty fixed-height labels. */
@supports(grid-template-rows:subgrid){
 .hero-facts .hero-facts-grid{grid-template-rows:auto auto;row-gap:8px}
 .hero-facts .hero-fact{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
 .hero-facts .hero-fact strong{min-height:0;margin:0}
 .hero-facts .hero-fact span{align-self:start}
}

/* Make the main phone number legible without changing its call action. */
:root body .header .header-phone{--control-text:18px;font-size:18px!important;font-weight:700;letter-spacing:.015em}
@media(max-width:700px){:root body .header .header-phone{--control-text:16px;font-size:16px!important;padding-inline:12px;letter-spacing:0}}
@media(max-width:360px){:root body .header .header-phone{--control-text:14px;font-size:14px!important;padding-inline:10px}}