*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Same as in admin.css: an author display rule beats the user agent's [hidden], and the
   form's scripts hide with the attribute. Said once here so no class has to remember. */
[hidden] { display: none !important; }

/* Токены переехали в assets/css/tokens.css -- он грузится ПЕРЕД этим файлом.
   Значения при переносе не менялись ни на единицу. Смысл переезда: правило
   "цвет числом записан только в файле токенов" проверяется по имени файла. */

/* Base type scale — bumped from 62.5% to compensate for Barlow Condensed reading
   narrower/smaller than the previous Kanit. Scales the whole rem-based type up ~6%. */
html { font-size: 70%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
@media (max-width: 1440px) { html { font-size: 55%; } }
@media (max-width: 1299px) { html { font-size: 50%; } }
@media (max-width: 991px)  { html { font-size: 45%; } }

body {
  font-family: var(--lato);
  font-size: 1.6rem;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 120rem;
  padding: 0 2rem;
  margin: 0 auto;
}

/* ── HEADER ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 12px rgba(0,33,91,.06);
  padding: 1.8rem 0;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
}
/* The wordmark is type, not a file. Both lines are Barlow Condensed, the face the site
   already uses for headings; navy from the palette with the domain suffix in gold, so
   the mark carries the site's two colours and needs no third. Pixel floors on both
   lines: below 991px the root font drops to 45% and a caption set in rem alone lands
   near 8px, which is not a caption, it is a smudge. */
.logo { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; }
/* Weight 300 on both lines, to sit in the same voice as the entry heading (h1.e-h1 is
   Barlow Condensed 300). Thin type is not small type: the pixel floors below stay. */
.lg-name {
  font-family: var(--kanit);
  font-size: max(22px, 3.2rem); font-weight: 300; line-height: 1;
  letter-spacing: -.01em; color: var(--navy);
}
.lg-dot { color: var(--gold); font-weight: 300; }
.lg-sub {
  font-family: var(--kanit);
  font-size: max(9px, 1.2rem); font-weight: 300; line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mid);
  white-space: nowrap;
}
/* Kept: the old raster mark is still the logo in structured data. */
.logo img {
  width: 20rem;
  height: auto;
  object-fit: contain;
}

/* ── HERO ── */
#hero {
  margin-top: 0;
  background: linear-gradient(145deg, var(--navy-d) 0%, var(--navy) 50%, #0a3080 100%);
  position: relative; overflow: hidden;
  min-height: 68rem;
  display: flex; align-items: center;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-glow {
  position: absolute; bottom: -15%; right: 10%;
  width: 55rem; height: 55rem;
  background: radial-gradient(circle, rgba(238,155,0,.18) 0%, transparent 70%);
  pointer-events: none;
}
.pk-map {
  position: absolute; right: 2%; top: 50%;
  transform: translateY(-50%);
  width: 38%; max-width: 38rem;
  pointer-events: none; z-index: 0;
  opacity: .85;
}
@keyframes pk-ping {
  0%   { r: 6; opacity: .5; }
  100% { r: 14; opacity: 0; }
}
.pk-lahore-ping { animation: pk-ping 2.2s ease-out infinite; }
@media (max-width: 900px) { .pk-map { display: none; } }
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 58% 42%;
  align-items: center; gap: 0;
  width: 100%; padding: 7rem 2rem;
  max-width: 120rem; margin: 0 auto;
}
.hero-l { padding-right: 5rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  padding: .7rem 1.5rem; margin-bottom: 3rem;
  font-family: var(--kanit); font-size: 1.2rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  box-shadow: 0 0 8px var(--gold);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}
.hero-h1 {
  font-family: var(--kanit);
  font-size: clamp(3.8rem, 5.2vw, 6.4rem);
  font-weight: 500; line-height: 1.02;
  color: var(--white); margin-bottom: 2.5rem;
}
.hero-h1 em { color: var(--gold); font-style: normal; display: block; }
.hero-sub {
  font-family: var(--lato);
  font-size: 1.8rem; font-weight: 300;
  color: rgba(255,255,255,.92); line-height: 1.7;
  max-width: 48rem; margin-bottom: 4rem;
}
.hero-acts { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--navy); color: var(--white);
  font-family: var(--kanit); font-size: 1.8rem; font-weight: 500;
  padding: 1.6rem 3rem;
  transition: background .25s;
  border: none; cursor: pointer;
}
.btn:hover { background: var(--gold); }
.btn svg { flex-shrink: 0; margin-top: 2px; }
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.hero-r {
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 5rem;
  display: flex; flex-direction: column; gap: 0;
}
.hero-offices {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  padding: 2.5rem; margin-bottom: 3rem;
}
.offices-label {
  font-family: var(--kanit); font-size: 1.1rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.5rem;
}
.office-row {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.office-row:last-child { border-bottom: none; }
.office-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.office-dot.dim { background: rgba(255,255,255,.25); }
.office-city {
  font-family: var(--kanit); font-size: 1.5rem; font-weight: 500;
  color: var(--white); text-transform: uppercase; letter-spacing: .05em;
}
.office-country { margin-left: auto; font-size: 1.3rem; color: rgba(255,255,255,.8); font-family: var(--lato); }
.hero-kpis { display: flex; flex-direction: column; }
.hkpi {
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 1.5rem;
}
.hkpi-n {
  font-family: var(--kanit); font-size: 3.5rem; font-weight: 600;
  color: var(--gold); line-height: 1; min-width: 7rem;
}
.hkpi-l {
  font-size: 1.2rem; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.85); line-height: 1.4;
  font-family: var(--kanit);
}

/* ── TICKER ── */
/* Both tickers and their tick animation are gone -- removed with the markup, not
   left behind as rules with nothing to match. The carousels on /why-encotec and the
   projects strip are a different mechanism (transform transitions, arrows, autoplay)
   and are untouched. */


/* ── STATS ── */
.stats {
  background: var(--navy);
  padding: 5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  padding: 3rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--kanit); font-size: 5rem; font-weight: 600;
  color: var(--white); line-height: 1; margin-bottom: .8rem;
}
.stat-num span { color: var(--gold); }
.stat-label {
  font-family: var(--lato); font-size: 1.5rem; font-weight: 400;
  color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em;
}

/* ── SECTION HEAD ── */
.section-head { margin-bottom: 5rem; }
.section-head.center { text-align: center; }
.section-head .label {
  display: block; font-family: var(--kanit); font-size: 1.2rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .8rem;
}
.section-head h2 {
  font-family: var(--kanit); font-size: clamp(3.5rem, 4.6vw, 4.7rem);
  font-weight: 500; color: var(--navy-m); line-height: 1.1;
}
.section-head h2 em { color: var(--gold); font-style: normal; }

/* ── ABOUT ── */
body:not(.adm) #about { padding: 10rem 0; background: var(--white); }
.about-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8rem;
  align-items: start;
}
.about-l .section-head { margin-bottom: 2.5rem; }
.about-desc h3 {
  font-family: var(--lato); font-size: 2rem; font-weight: 700;
  color: var(--navy); margin-bottom: 1.5rem; line-height: 1.4;
}
.about-desc p {
  font-size: 1.6rem; color: var(--text); line-height: 1.8; margin-bottom: 1.2rem;
}
.about-hq {
  margin-top: 3rem; padding: 2rem 2.5rem;
  border-left: 3px solid var(--gold);
  background: var(--light);
}
.hq-label {
  font-family: var(--kanit); font-size: 1.1rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .5rem;
}
.hq-name {
  font-family: var(--kanit); font-size: 1.8rem; font-weight: 600;
  color: var(--navy); text-transform: uppercase; margin-bottom: .3rem;
}
.hq-addr { font-size: 1.4rem; color: var(--mid); }
.about-btn { margin-top: 3rem; }

.about-r { display: flex; flex-direction: column; gap: 2px; }
.cap-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--rule); border: 1px solid var(--rule);
}
.cap-item {
  background: var(--white); padding: 2.5rem 2rem;
  border-left: 3px solid transparent;
  transition: border-color .25s, background .25s;
}
.cap-item:hover { border-left-color: var(--gold); background: #fffdf0; }
.cap-abbr {
  width: 4.5rem; height: 4.5rem;
  background: var(--light); display: flex; align-items: center; justify-content: center;
  font-family: var(--kanit); font-size: 1.2rem; font-weight: 700;
  color: var(--navy); margin-bottom: 1.5rem;
}
.cap-title {
  font-family: var(--kanit); font-size: 1.4rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy-m); margin-bottom: .6rem;
}
.cap-text { font-size: 1.35rem; color: var(--mid); line-height: 1.65; }

.offices-strip {
  margin-top: 2rem; padding: 2rem 2.5rem;
  background: var(--light); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.strip-label {
  font-family: var(--kanit); font-size: 1.1rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mid);
}
.strip-tags { display: flex; gap: .8rem; flex-wrap: wrap; }
.strip-tag {
  font-family: var(--kanit); font-size: 1.25rem; font-weight: 500;
  letter-spacing: .06em; color: var(--navy);
  border: 1px solid var(--rule); padding: .5rem 1.2rem;
  background: var(--white);
}
.strip-tag.active { border-color: var(--gold); color: var(--gold); background: #fffcf0; }

/* ── SERVICES ── */
body:not(.adm) #services { padding: 10rem 0; background: var(--light); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--rule); border: 1px solid var(--rule);
}
.svc-item {
  background: var(--white); padding: 3.5rem 2.5rem;
  border-top: 3px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.svc-item:hover {
  border-top-color: var(--gold);
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,33,91,.08);
}
.svc-icon {
  width: 5.5rem; height: 5.5rem;
  display: flex; align-items: center; justify-content: center;
}
.svc-icon img { width: 4rem; height: 4rem; object-fit: contain; }
.svc-num {
  font-family: var(--kanit); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .18em; color: var(--gold);
}
.svc-title {
  font-family: var(--kanit); font-size: 1.9rem; font-weight: 600;
  color: var(--navy); line-height: 1.2;
}
.svc-desc {
  font-size: 1.45rem; color: var(--mid); line-height: 1.7;
  font-weight: 400;
}
.svc-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--kanit); font-size: 1.3rem; font-weight: 500;
  color: var(--navy); letter-spacing: .06em; text-transform: uppercase;
  margin-top: auto; transition: color .2s;
}
.svc-link:hover { color: var(--gold); }
.svc-link svg { transition: transform .2s; }
.svc-link:hover svg { transform: translateX(4px); }

/* ── CLIENTS ── */
body:not(.adm) #clients { padding: 10rem 0; background: var(--white); }
.clients-logos {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--rule);
}
.client-logo {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kanit); font-size: 1.5rem; font-weight: 600;
  letter-spacing: .06em; color: var(--mid); text-transform: uppercase;
  background: var(--white);
  transition: background .25s, color .25s;
  min-height: 7rem;
}
.client-logo:hover { background: var(--navy); color: var(--white); }

/* ── WHY ── */
body:not(.adm) #why { padding: 10rem 0; background: var(--navy); }
#why .section-head .label { color: var(--gold); }
#why .section-head h2 { color: var(--white); }
#why .section-head h2 em { color: var(--gold); }
.why-inner { display: grid; grid-template-columns: 38% 62%; gap: 6rem; align-items: start; }
.why-l p,
#why .why-inner > div > p {
  font-size: 1.6rem; font-weight: 300;
  color: #fff; line-height: 1.8; max-width: 36rem;
  margin-top: 1.5rem;
}
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.why-item {
  padding: 2.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .25s, border-color .25s;
}
.why-item:hover { background: rgba(238,155,0,.08); border-color: rgba(238,155,0,.3); }
.wi-n {
  font-family: var(--kanit); font-size: 3rem; font-weight: 600;
  color: rgba(238,155,0,.3); margin-bottom: 1.2rem; line-height: 1;
}
.wi-title {
  font-family: var(--kanit); font-size: 1.5rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--white); margin-bottom: .7rem;
}
.wi-text { font-size: 1.4rem; color: rgba(255,255,255,.88); line-height: 1.65; }

/* ── CONTACT ── */
body:not(.adm) #contact { padding: 10rem 0 0; background: var(--navy-m); color: var(--white); }
#contact .section-head .label { color: var(--gold); }
#contact .section-head h2 { color: var(--white); }
.contact-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  padding-bottom: 7rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.c-offices { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.c-office {
  padding: 2rem 2.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--gold);
}
.c-office.dim { border-left-color: rgba(255,255,255,.2); }
.co-label {
  font-family: var(--kanit); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .6rem;
}
.c-office.dim .co-label { color: rgba(255,255,255,.75); }
.co-name {
  font-family: var(--kanit); font-size: 1.7rem; font-weight: 600;
  color: var(--white); text-transform: uppercase; margin-bottom: .4rem;
}
.co-addr { font-size: 1.4rem; color: rgba(255,255,255,.88); line-height: 1.5; }
.co-links { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.co-links a {
  font-size: 1.4rem; color: rgba(255,255,255,.88); display: flex;
  align-items: center; gap: .5rem; transition: color .2s;
}
.co-links a:hover { color: var(--gold); }

/* FORM */
.cf { display: flex; flex-direction: column; gap: 1.5rem; }
.cf-title {
  font-family: var(--kanit); font-size: 2.88rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--white); margin-bottom: .5rem;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cf-field { display: flex; flex-direction: column; gap: .5rem; }
.cf-lbl {
  font-family: var(--kanit); font-size: 1.76rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--white);
}
.cf-inp, .cf-sel, .cf-ta {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--white); font-family: var(--lato); font-size: 2.4rem;
  padding: 1.2rem 1.5rem; outline: none; width: 100%;
  transition: border-color .2s, background .2s; appearance: none;
}
.cf-inp::placeholder, .cf-ta::placeholder { color: rgba(255,255,255,.6); }
.cf-inp:focus, .cf-sel:focus, .cf-ta:focus {
  border-color: var(--gold); background: rgba(238,155,0,.05);
}
.cf-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.5rem center;
  padding-right: 3.5rem; cursor: pointer;
}
.cf-sel option { background: #1a2a40; }
.cf-ta { resize: vertical; min-height: 12rem; line-height: 1.6; }
.cf-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.cf-messengers { display: flex; gap: 1rem; }
.msg-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem; font-family: var(--kanit); font-size: 1.3rem; font-weight: 500;
  letter-spacing: .05em; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.88); transition: all .25s;
}
.msg-btn svg { width: 16px; height: 16px; }
.msg-btn.tg:hover { background: rgba(39,174,229,.2); border-color: #27aee5; color: #fff; }
.msg-btn.wa:hover { background: rgba(37,211,102,.2); border-color: #25d366; color: #fff; }
.cf-btn { background: var(--gold); }
.cf-btn:hover { background: var(--gold-l); }
.cf-success {
  display: none; padding: 1.5rem 2rem;
  background: rgba(238,155,0,.1); border: 1px solid rgba(238,155,0,.35);
  color: var(--gold); font-size: 1.5rem;
}
.cf-error {
  display: none; margin-bottom: 1.5rem; padding: 1.2rem 2rem;
  background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.45);
  color: #e8867c; font-size: 1.4rem;
}

.contact-foot {
  padding: 2.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.ft-copy { font-size: 1.3rem; color: var(--mid); font-family: var(--kanit); letter-spacing: .04em; }
.ft-links { display: flex; gap: 2rem; margin-left: auto; }
.ft-links a {
  font-family: var(--kanit); font-size: 1.2rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: var(--navy); transition: color .2s;
}
.ft-links a:hover { color: var(--gold); }

/* REVEAL */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.rv.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }

/* ── BURGER ── */
/* The only way into the menu, so it is present at every width -- not revealed at 900px.
   Orange because it is now the single control in the header and has to be findable at a
   glance; the icons inside draw with currentColor. */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--gold);
  transition: color .2s;
}
.burger:hover { color: var(--gold-l); }
.burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Floored in pixels for the same reason the form controls are: below 991px the root
   font drops to 45% and 2.8rem lands at 20px, where a framed icon turns to mush. */
.burger svg { width: max(24px, 2.8rem); height: max(24px, 2.8rem); display: block; }
/* One button, two faces: the cross belongs to the open menu. */
.burger .bi-close { display: none; }
.burger.open .bi-menu { display: none; }
.burger.open .bi-close { display: block; }

/* Sits under the fixed header rather than behind it: the header is position:fixed and
   its height changes with the width, so the clearance is a variable that site.js keeps
   current (--hdr-h). The rem fallback is what a browser with no JS gets -- generous on
   purpose, because a menu that starts under the logo is unusable, one that starts a
   little low is merely plain. */
/* A panel hanging off the burger, and a full screen only where a panel will not fit.
 *
 * The full-screen version filled 945px of navy to hold 200px of links -- four fifths of
 * it empty. As a panel it is 300px wide, as tall as its contents, and the page stays
 * visible and undimmed behind it, because three links are not a context switch.
 *
 * The 560px line is measured, not chosen. The panel's left edge lands at
 * viewport - 16 - 300, and the wordmark stops growing at 196px:
 *     561 -> panel starts at 245, clear of the mark by 49px (a tap target's worth)
 *     520 -> 204, clear by 8px -- touching
 *     480 -> 164, OVERLAPPING the mark by 32px
 * The query below takes 560 and narrower to the full screen, so the panel's last width
 * is 561, where it still has a finger's clearance; and 560 is a number this sheet
 * already uses. The full screen is also the only state where the page is locked behind
 * the menu -- see site.js. */
.mobile-menu {
  display: none; position: fixed; z-index: 450;
  top: calc(var(--hdr-h, 9rem) + max(8px, .8rem));
  right: max(16px, 1.6rem); left: auto; bottom: auto;
  /* Ширина по самому длинному пункту, выключка вправо (решение владельца, 10.09.2026).
     Фиксированные 300px при выключке вправо оставляли мёртвое поле слева от текста, и
     панель выглядела непропорционально широкой для трёх коротких пунктов. */
  width: max-content;
  max-width: calc(100vw - 2 * max(16px, 1.6rem));
  /* Height follows the contents, but never past the bottom of the window: a low window
     gives the panel its own scrollbar instead of hanging it off the screen. */
  max-height: calc(100vh - var(--hdr-h, 9rem) - max(8px, .8rem) - max(16px, 1.6rem));
  overflow-y: auto;
  background: var(--navy-d);
  /* Заметное скругление, а не намёк (решение владельца, 10.09.2026). Одно значение на
     все экраны: панель везде один и тот же объект, и разное скругление читалось бы как
     разные элементы. */
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 33, 91, .28);
  flex-direction: column; align-items: flex-end; justify-content: flex-start;
  text-align: right;
  gap: 2rem;
  padding: 2rem;
}
.mobile-menu.open { display: flex; }
/* Only the phone loses its footer, so only the phone needs this block in the menu. */
.mm-foot { display: none; }
@media (max-width: 560px) { .mm-foot { display: flex; } }
/* Right-to-left pages hang the panel off the other edge, where their burger is. */
html[lang="ur"] .mobile-menu { left: max(16px, 1.6rem); right: auto; }
.mobile-menu a {
  font-family: var(--kanit); font-size: 2.2rem; font-weight: 500;
  color: var(--white); text-decoration: none; letter-spacing: .08em;
  text-transform: uppercase; transition: color .2s;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu a.active { color: var(--gold); }

/* Phone: the panel drops from under the header across the full width, and it is exactly
   as tall as the items in it (owner's decision, 10.09.2026). It used to take the whole
   screen -- three links and then six hundred pixels of navy, which reads as a page that
   failed to load rather than as a menu. Height comes from the content; the cap only stops
   a long menu from running off a short window, and then the panel scrolls itself.
   `bottom: auto` is the load-bearing part: the base rule sets it, but the full-screen
   variant had pinned it to 0, and a panel pinned top AND bottom is the window's height
   whatever its contents say. site.js still locks the page behind it at this width. */
@media (max-width: 560px) {
  /* The phone gets the same object the wider screens get: a rounded panel hanging under
     the burger with a gap to the edge, not a slab welded to both sides (owner's decision,
     10.09.2026). Only the width needs a phone's arithmetic -- 300px is wider than the gaps
     allow on a 320px screen, so it yields to whatever is left after them.
     bottom:auto and height:auto stay load-bearing: pinned top and bottom, a panel is the
     window's height whatever its contents say. */
  .mobile-menu {
    top: calc(var(--hdr-h, 9rem) + max(8px, .8rem));
    right: max(12px, 1.2rem); left: auto; bottom: auto;
    /* Форма панели -- в базовом правиле выше, одна на все экраны. Здесь только то, что
       у телефона своё: зазор поуже, потолок по dvh (адресная строка съедает vh) и
       чуть плотнее ритм пунктов. */
    max-width: calc(100vw - 2 * max(12px, 1.2rem));
    height: auto;
    max-height: calc(100dvh - var(--hdr-h, 9rem) - max(8px, .8rem) - max(16px, 1.6rem));
    gap: 1.6rem;
  }
  html[lang="ur"] .mobile-menu { left: max(12px, 1.2rem); right: auto; }

  /* The small print the footer used to carry, folded into the menu. Set apart by a rule
     and a smaller size so it reads as the bottom of the panel, not as more navigation. */
  .mm-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem;
    margin-top: .4rem; padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .14); }
  .mm-links { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
  .mm-links a { font-family: var(--kanit); font-size: 1.4rem; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
    text-decoration: none; }
  .mm-links a:hover { color: var(--gold); }
  /* Панель шириной по тексту; иконок в панели может быть сколько угодно, поэтому ряд
     переносится, а не распирает её. */
  .mm-social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem;
    max-width: 100%; }
  .mm-social a { width: 32px; height: 32px; display: inline-flex; align-items: center;
    justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
    color: rgba(255, 255, 255, .72); }
  .mm-social a:hover { border-color: var(--gold); color: var(--gold); }
  .mm-social svg { width: 15px; height: 15px; }
  .mm-copy { font-size: 1.1rem; color: rgba(255, 255, 255, .5); letter-spacing: .02em; }
}
/* ── LANG DROPDOWN ── */
.lang-drop { position:relative; }
.ld-btn { display:flex;align-items:center;gap:.4rem;font-family:var(--kanit);font-size:1.4rem;font-weight:600;letter-spacing:.08em;background:none;border:1.5px solid var(--navy);color:var(--navy);padding:.5rem 1.2rem;cursor:pointer;transition:background .2s,color .2s;border-radius:2px;white-space:nowrap; }
.ld-btn:hover { background:var(--navy);color:var(--white); }
.ld-arrow { font-size:.6rem;transition:transform .2s;display:inline-block;opacity:.65; }
.lang-drop.open .ld-arrow { transform:rotate(180deg); }
.ld-menu { display:none;position:absolute;right:0;top:calc(100% + 5px);background:#fff;border:1.5px solid var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.15);min-width:120px;z-index:700; }
.lang-drop.open .ld-menu { display:block; }
.ld-menu button { display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;font-family:var(--kanit);font-size:1.8rem;font-weight:600;letter-spacing:.06em;background:none;border:none;padding:.55rem 1.1rem;cursor:pointer;color:var(--navy);transition:background .15s,color .15s;border-bottom:1px solid rgba(0,0,0,.08); }
.ld-menu .fi { flex-shrink:0;border-radius:2px; }
.ld-menu button:last-child { border-bottom:none; }
.ld-menu button:hover { background:var(--navy);color:var(--white); }
.ld-menu button.ld-active { color:var(--gold);font-weight:700; }
html[lang="ur"] .ld-menu { right:auto;left:0; }

/* ── RTL (Urdu) ── */
html[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; text-align: right; }
html[lang="ur"] .header-inner { flex-direction: row-reverse; }
html[lang="ur"] .hero-l { padding-right: 0; padding-left: 5rem; }
html[lang="ur"] .hero-badge { flex-direction: row-reverse; }
html[lang="ur"] .hero-acts { flex-direction: row-reverse; }
html[lang="ur"] .section-head h2 { direction: rtl; }
html[lang="ur"] .about-hq { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 2.5rem; }
html[lang="ur"] .cap-item { border-left: none; border-right: 2px solid var(--rule); padding-left: 0; padding-right: 2rem; }
html[lang="ur"] .svc-item { border-left: none; border-right: 3px solid transparent; }
html[lang="ur"] .svc-item:hover { border-right-color: var(--gold); border-left-color: transparent; }
html[lang="ur"] .why-item { border-left: none; border-right: 2px solid rgba(255,255,255,.12); padding-left: 0; padding-right: 2rem; }
html[lang="ur"] .c-office { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 2rem; }
html[lang="ur"] .c-office.dim { border-right-color: rgba(255,255,255,.2); }
html[lang="ur"] .cf { text-align: right; }
html[lang="ur"] .cf-bottom { flex-direction: row-reverse; }
html[lang="ur"] .contact-foot { flex-direction: row-reverse; }
html[lang="ur"] .ft-links { flex-direction: row-reverse; }
html[lang="ur"] .hero-offices { text-align: right; }
html[lang="ur"] .office-row { flex-direction: row-reverse; }
html[lang="ur"] .office-country { margin-left: 0; margin-right: auto; }
html[lang="ur"] .about-btn a, html[lang="ur"] .svc-link { flex-direction: row-reverse; }
html[lang="ur"] .msg-btn { flex-direction: row-reverse; }
html[lang="ur"] .mobile-menu { direction: rtl; }


/* ── MOBILE ── */
@media (max-width: 900px) {
  .lang-drop { margin-left: auto; margin-right: .8rem; }
  header { padding: 1.5rem 0; }
  .ld-menu button { font-size: 2.2rem; }
  /* Regular text 2x */
  body          { font-size: 3.2rem; }
  .hero-sub     { font-size: 3.6rem; }
  .about-desc p { font-size: 3.2rem; }
  .about-desc h3{ font-size: 4rem; }
  .svc-desc     { font-size: 2.9rem; }
  .cap-text     { font-size: 2.7rem; }
  .wi-text      { font-size: 2.8rem; }
  .wi-title     { font-size: 3.2rem; }
  .co-addr      { font-size: 2.8rem; }
  .co-links a   { font-size: 2.8rem; }
  .hq-addr      { font-size: 2.8rem; }
  .ft-copy      { font-size: 2.6rem; }
  .ft-links a   { font-size: 2.4rem; }
  .hero-inner { grid-template-columns: 1fr; padding: 5rem 2rem; }
  .hero-l { padding-right: 0; margin-bottom: 4rem; }
  .hero-r { border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding-left: 0; padding-top: 3rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  body:not(.adm) #about { padding: 6rem 0; }
  .about-inner { grid-template-columns: 1fr; gap: 4rem; }
  .cap-grid { grid-template-columns: 1fr; }
  body:not(.adm) #services { padding: 6rem 0; }
  .svc-grid { grid-template-columns: 1fr; }
  body:not(.adm) #clients { padding: 6rem 0; }
  .clients-logos { grid-template-columns: repeat(3, 1fr); }
  body:not(.adm) #why { padding: 6rem 0; }
  .why-inner { grid-template-columns: 1fr; gap: 3rem; }
  .why-grid { grid-template-columns: 1fr; }
  body:not(.adm) #contact { padding: 6rem 0 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 4rem; }
  .cf-row { grid-template-columns: 1fr; }
}

.ld-globe { flex-shrink:0; display:block; width:1.8em; height:1.8em; }

/* =========================================================================
   MULTI-PAGE ADDITIONS  (compositional only — reuses existing design tokens,
   does not modify any rule above). Added during single-page → multi-page refactor.
   ========================================================================= */

/* Active nav item — reuses the existing underline affordance */

/* Site-wide footer wrapper. The colour is declared once, further down, where the row
   itself is described -- three declarations of one background is how the navy survived
   two redesigns. .contact-foot went with the two-zone markup. */

/* Inner-page hero banner (same brand gradient as #hero, compact) */
.page-hero {
  background: linear-gradient(145deg, var(--navy-d) 0%, var(--navy) 55%, #0a3080 100%);
  position: relative; overflow: hidden;
  padding: 9rem 0 6rem;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .ph-label {
  display: block; font-family: var(--kanit); font-size: 1.2rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.page-hero h1 {
  font-family: var(--kanit); font-size: clamp(4.2rem, 6.5vw, 7rem);
  font-weight: 500; line-height: 1.03; color: #fff;
}
.page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero p {
  font-family: var(--lato); font-weight: 300; font-size: 1.8rem;
  color: rgba(255,255,255,.9); max-width: 62rem; margin-top: 1.8rem; line-height: 1.7;
}
.breadcrumb {
  margin-top: 2.5rem; font-family: var(--kanit); font-size: 1.3rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--gold); margin: 0 .7rem; }
@media (max-width: 900px) {
  .page-hero { padding: 6rem 0 4rem; }
  .page-hero p { font-size: 3rem; }
}

/* ---- Home page composition ---- */
.home-services { padding: 10rem 0; background: var(--light); }
.about-teaser { padding: 10rem 0; background: var(--white); }
.about-teaser .at-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-teaser p { font-size: 1.7rem; color: var(--text); line-height: 1.8; margin: 1.5rem 0 2.5rem; }
.clients-cta { text-align: center; margin-top: 4rem; }
.cta-band { background: var(--navy); padding: 8rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-band .section-head { margin-bottom: 0; }
.cta-band h2 { font-family: var(--kanit); font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 400; color: #fff; line-height: 1.1; }
.cta-band h2 em { color: var(--gold); font-style: normal; }
.cta-band p { color: rgba(255,255,255,.85); font-weight: 300; font-size: 1.8rem; max-width: 55rem; margin: 1.5rem auto 3rem; }
.cta-band .btn { background: var(--gold); }
.cta-band .btn:hover { background: var(--gold-l); }
@media (max-width: 900px) {
  .home-services, .about-teaser { padding: 6rem 0; }
  .about-teaser .at-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cta-band { padding: 6rem 0; }
  .cta-band p { font-size: 3rem; }
}

/* ---- Inner pages: shared dark-section header colors ---- */
.section-dark .section-head .label { color: var(--gold); }
.section-dark .section-head h2 { color: #fff; }
.section-dark .section-head h2 em { color: var(--gold); }

/* ---- Who we are ---- */
.page-section { padding: 9rem 0; }
.page-section.light { background: var(--light); }
.intro-lead { font-family: var(--lato); font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1.5; max-width: 80rem; margin-bottom: 1.8rem; }
.intro-body p { font-size: 1.6rem; color: var(--text); line-height: 1.85; margin-bottom: 1.2rem; max-width: 80rem; }
.collapse { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.collapse.open { max-height: 200rem; }
.more-btn { margin-top: 1.5rem; background: transparent; border: 1px solid var(--navy); color: var(--navy); font-family: var(--kanit); font-size: 1.4rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .9rem 2rem; cursor: pointer; transition: background .2s, color .2s; }
.more-btn:hover { background: var(--navy); color: #fff; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.value-card { background: var(--white); padding: 3rem 2.5rem; border-top: 3px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s; }
.value-card:hover { border-top-color: var(--gold); box-shadow: 0 8px 32px rgba(0,33,91,.08); }
.value-card .vc-n { font-family: var(--kanit); font-size: 2.6rem; font-weight: 600; color: rgba(238,155,0,.35); line-height: 1; margin-bottom: 1.2rem; }
.value-card .vc-title { font-family: var(--kanit); font-size: 1.7rem; font-weight: 600; color: var(--navy); margin-bottom: .7rem; }
.value-card .vc-text { font-size: 1.45rem; color: var(--mid); line-height: 1.7; }

/* ---- What we do: accordion ---- */
.acc { border: 1px solid var(--rule); border-top: none; }
.acc-item { border-top: 1px solid var(--rule); background: var(--white); }
.acc-head { display: flex; align-items: center; gap: 2rem; padding: 2.8rem 2.5rem; cursor: pointer; transition: background .2s; }
.acc-head:hover { background: #fffdf0; }
.acc-icon { width: 4.5rem; height: 4.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.acc-icon img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.acc-num { font-family: var(--kanit); font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; color: var(--gold); flex-shrink: 0; }
.acc-title { font-family: var(--kanit); font-size: 1.9rem; font-weight: 600; color: var(--navy); flex: 1; }
.acc-plus { font-family: var(--kanit); font-size: 2.6rem; font-weight: 300; color: var(--navy); transition: transform .3s; flex-shrink: 0; }
.acc-item.open .acc-plus { transform: rotate(45deg); color: var(--gold); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.acc-item.open .acc-body { max-height: 60rem; }
.acc-body-inner { padding: 0 2.5rem 3rem 11.5rem; font-size: 1.55rem; color: var(--text); line-height: 1.8; }
.acc-item.open .acc-head { background: #fffdf0; }

/* ---- Contacts page ---- */
.contact-page { padding: 8rem 0; background: var(--navy-m); color: #fff; }
@media (max-width: 900px) {
  .page-section { padding: 6rem 0; }
  .values-grid { grid-template-columns: 1fr; }
  .acc-body-inner { padding: 0 2.5rem 3rem 2.5rem; }
  .acc-head { gap: 1.2rem; padding: 2.2rem 1.8rem; }
  .contact-page { padding: 6rem 0; }
}

/* ============================ CAREERS ============================ */
.jobs-list { display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.job-card { background: #fff; padding: 3rem; display: flex; align-items: center; gap: 2.5rem; border-left: 3px solid transparent; transition: border-color .25s, background .25s; }
.job-card:hover { border-left-color: var(--gold); background: #fffdf0; }
.job-main { flex: 1; min-width: 0; }
.job-title { font-family: var(--kanit); font-size: 2rem; font-weight: 600; color: var(--navy); margin-bottom: .8rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; font-family: var(--kanit); font-size: 1.3rem; color: var(--mid); letter-spacing: .04em; }
.job-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.job-meta .dot { color: var(--gold); }
.job-summary { font-size: 1.45rem; color: var(--mid); line-height: 1.65; margin-top: 1.1rem; }
.job-apply { flex-shrink: 0; }
.reserve-box { text-align: center; padding: 5rem 3rem; border: 1px dashed var(--rule); background: var(--light); }
.reserve-box h3 { font-family: var(--kanit); font-size: 2.2rem; font-weight: 600; color: var(--navy); margin-bottom: 1rem; }
.reserve-box p { font-size: 1.6rem; color: var(--mid); margin-bottom: 2.5rem; max-width: 55rem; margin-left: auto; margin-right: auto; }

/* Job detail */
.job-detail { display: grid; grid-template-columns: 1.7fr 1fr; gap: 5rem; align-items: start; }
.job-blocks { display: grid; gap: 3.5rem; }
.job-block h3 { font-family: var(--kanit); font-size: 1.9rem; font-weight: 600; color: var(--navy); margin-bottom: 1.5rem; }
.job-block ul { display: flex; flex-direction: column; gap: 1rem; }
.job-block li { position: relative; padding-left: 2.6rem; font-size: 1.55rem; color: var(--text); line-height: 1.65; }
.job-block li::before { content: ''; position: absolute; left: 0; top: .7rem; width: 1rem; height: 1rem; background: var(--gold); }
.job-side { position: sticky; top: 16rem; background: var(--light); border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 2.5rem; }
.job-side .js-row { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.job-side .js-row:last-of-type { border-bottom: none; }
.js-k { font-family: var(--kanit); font-size: 1.1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.js-v { font-family: var(--kanit); font-size: 1.6rem; font-weight: 500; color: var(--navy); margin-top: .3rem; }
.job-side .btn { width: 100%; justify-content: center; margin-top: 2rem; }

/* Application form (light) */
.aform { display: flex; flex-direction: column; gap: 1.8rem; }
/* ONE COLUMN AT EVERY WIDTH (owner's decision, 3 Sep). Two columns saved vertical space
   on a wide screen at the price of making the eye jump left-right-left down a form that
   is read once, in order. One field under another is the same order on every device --
   and the same order the panel lists the answers in. */
.aform-row { display: grid; grid-template-columns: 1fr; gap: 1.8rem; }
.af-field { display: flex; flex-direction: column; gap: .6rem; }
.af-lbl { font-family: var(--kanit); font-size: 1.35rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.af-inp, .af-sel, .af-ta { border: 1px solid var(--rule); background: #fff; color: var(--text); font-family: var(--lato); font-size: 1.6rem; padding: 1.2rem 1.4rem; width: 100%; outline: none; transition: border-color .2s; appearance: none; }
.af-inp:focus, .af-sel:focus, .af-ta:focus { border-color: var(--gold); }
.af-ta { min-height: 13rem; resize: vertical; line-height: 1.6; }
.af-sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.5rem center; padding-right: 3.5rem; cursor: pointer; }
.af-file { border: 1px dashed var(--rule); background: var(--light); padding: 1.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.af-file input[type=file] { font-family: var(--lato); font-size: 1.4rem; }
.af-hint { font-size: 1.3rem; color: var(--mid); }
.af-consent { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.45rem; color: var(--text); line-height: 1.5; }
.af-consent input { margin-top: .4rem; width: 1.8rem; height: 1.8rem; flex-shrink: 0; accent-color: var(--gold); }
.af-consent a { color: var(--navy); text-decoration: underline; }
.field-err { color: #c0392b; font-size: 1.3rem; }
/* ---- the returning applicant: the block above the form and the CV on file ---- */
.af-back { border: 1px solid var(--rule); border-left: 4px solid var(--gold); background: #f4f6f9; padding: 1.6rem 1.8rem; margin: 0 0 2.4rem; border-radius: 2px; }
.af-back.ok { border-left-color: #1f6b3a; background: #eaf6ee; }
.af-back h4 { font-family: var(--kanit); font-size: 1.8rem; font-weight: 600; color: var(--navy); margin: 0 0 .3rem; letter-spacing: .02em; }
.af-back.ok h4 { color: #1f6b3a; }
.af-back p { margin: 0 0 1.2rem; font-size: 1.45rem; color: var(--text); line-height: 1.5; }
.af-back .field-err { margin: 0 0 1rem; }
.af-back-line { display: flex; gap: 1rem; align-items: stretch; }
.af-back-line .af-inp { flex: 1 1 auto; min-width: 0; }
.af-back-line .btn { white-space: nowrap; }
.af-back .btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.af-back small { display: block; color: var(--mid); font-size: 1.25rem; margin-top: .8rem; }
.af-back-small { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; font-size: 1.25rem; color: var(--mid); }
.af-back-small form { display: inline; margin: 0; }
.af-link { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; cursor: pointer; font: inherit; font-size: 1.25rem; }
.af-code { max-width: 16rem; font-family: var(--kanit); font-size: 2.4rem; font-weight: 600; letter-spacing: .3em; text-align: center; }
.af-held { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: -.4rem 0 1rem; }
.af-held-l { font-size: 1.25rem; color: var(--mid); }
.af-held span:not(.af-held-l) { border: 1px solid var(--rule); border-radius: 999px; padding: .3rem 1rem; font-size: 1.25rem; color: var(--mid); background: #fff; }
.af-held b { color: var(--navy); font-weight: 600; }
.af-cvkeep { border: 1px solid var(--rule); border-radius: 2px; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; background: #fff; margin-bottom: 1rem; }
.af-cvkeep label { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.45rem; cursor: pointer; }
.af-cvkeep input { margin-top: .35rem; flex: none; }
.af-cvkeep b { color: var(--navy); font-weight: 600; }
.af-cvkeep small { color: var(--mid); font-size: 1.25rem; }
@media (max-width: 640px) { .af-back-line { flex-direction: column; } .af-back-line .btn { justify-content: center; } }
.alert { padding: 1.6rem 2rem; font-size: 1.5rem; margin-bottom: 2.5rem; line-height: 1.5; }
.alert-error { background: #fdecea; border: 1px solid #f5c6cb; color: #a4212f; }
.alert-ok { background: rgba(238,155,0,.1); border: 1px solid rgba(238,155,0,.4); color: #8a6300; }
.success-box { text-align: center; padding: 3rem 0; }
.success-box .sb-check { width: 7rem; height: 7rem; border-radius: 50%; background: rgba(238,155,0,.12); border: 2px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; margin: 0 auto 2.5rem; }

@media (max-width: 900px) {
  .job-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .job-apply { width: 100%; }
  .job-apply .btn { width: 100%; justify-content: center; }
  .job-detail { grid-template-columns: 1fr; gap: 3.5rem; }
  .job-side { position: static; }
}

/* ============ VACANCIES (Resource Office) ============ */
.vac-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1.2rem; align-items: end; background: var(--light); border: 1px solid var(--rule); padding: 2rem; margin-bottom: 2.5rem; }
.vac-filters .vf { display: flex; flex-direction: column; gap: .5rem; }
.vac-filters label { font-family: var(--kanit); font-size: 1.1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.vac-filters input, .vac-filters select { border: 1px solid var(--rule); background: #fff; color: var(--text); font-family: var(--lato); font-size: 1.5rem; padding: 1rem 1.2rem; width: 100%; outline: none; }
.vac-filters input:focus, .vac-filters select:focus { border-color: var(--gold); }
.vac-filters .vf-btn { display: flex; gap: .8rem; }
.vac-count { font-family: var(--kanit); font-size: 1.6rem; color: var(--navy); margin-bottom: 2.5rem; }
.vac-count strong { color: var(--gold); }
.vac-count a { color: var(--mid); font-size: 1.35rem; margin-left: 1rem; }
.vac-count a:hover { color: var(--gold); }
.disc-group { margin-bottom: 3.5rem; }
.disc-group > h3 { font-family: var(--kanit); font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); padding-bottom: 1rem; border-bottom: 2px solid var(--gold); margin-bottom: 2px; }
.grade-badge { display: inline-flex; align-items: center; font-family: var(--kanit); font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; color: var(--navy); background: var(--light); border: 1px solid var(--rule); padding: .3rem .9rem; }
.grade-badge.on-dark { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag { font-family: var(--kanit); font-size: 1.25rem; color: var(--navy); background: var(--light); border: 1px solid var(--rule); padding: .45rem 1.1rem; }
.empty-state { text-align: center; padding: 5rem 3rem; border: 1px dashed var(--rule); background: var(--light); }
.empty-state h3 { font-family: var(--kanit); font-size: 2rem; color: var(--navy); margin-bottom: 1rem; }
.empty-state p { color: var(--mid); font-size: 1.6rem; margin-bottom: 2.5rem; }

/* Ladder widget */
.ladder { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ladder-step { flex: 1 1 8rem; min-width: 8rem; text-align: center; padding: 1.3rem .8rem; border: 1px solid var(--rule); background: #fff; transition: border-color .2s, background .2s; }
.ladder-step.cur { border-color: var(--gold); border-top: 3px solid var(--gold); background: #fffdf0; }
.ladder-step:hover { border-color: var(--gold); }
.ladder-step .ls-code { font-family: var(--kanit); font-weight: 700; color: var(--navy); font-size: 1.6rem; }
.ladder-step .ls-name { font-size: 1.2rem; color: var(--mid); margin-top: .3rem; line-height: 1.3; }
.ladder-step.cur .ls-code { color: var(--gold); }

.other-jobs { display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.2rem; }
.other-jobs a { background: #fff; padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background .2s; }
.other-jobs a:hover { background: #fffdf0; }
.other-jobs .oj-t { font-family: var(--kanit); font-weight: 600; color: var(--navy); font-size: 1.5rem; }
.ref-num { font-family: var(--kanit); font-size: 2.2rem; font-weight: 700; letter-spacing: .05em; color: var(--gold); margin: 1rem 0 2rem; }

@media (max-width: 900px) {
  .vac-filters { grid-template-columns: 1fr; }
}

/* ============ RESOURCE OFFICE — home & IA pages ============ */
/* dual hero */
.hero-2cta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.hero-2cta .btn small { display: block; font-size: 1.1rem; font-weight: 400; opacity: .8; letter-spacing: .04em; }
.hero-counter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); }
.hero-counter .hc { background: rgba(255,255,255,.03); padding: 2.2rem 1.6rem; text-align: center; }
.hero-counter .hc-n { font-family: var(--kanit); font-size: 3.6rem; font-weight: 700; color: var(--gold); line-height: 1; }
.hero-counter .hc-l { font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: .6rem; font-family: var(--kanit); }

/* disciplines grid */
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.disc-card { background: #fff; padding: 2.8rem 2.4rem; border-top: 3px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s; display: flex; flex-direction: column; gap: 1rem; }
.disc-card:hover { border-top-color: var(--gold); box-shadow: 0 8px 32px rgba(0,33,91,.08); }
.disc-card .dc-code { font-family: var(--kanit); font-size: 1.1rem; font-weight: 700; letter-spacing: .16em; color: var(--gold); }
.disc-card .dc-name { font-family: var(--kanit); font-size: 1.9rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.disc-card .dc-open { font-size: 1.35rem; color: var(--mid); }
.disc-card .dc-open strong { color: var(--navy); }
.disc-card .svc-link { margin-top: auto; }

/* full career ladder */
.cladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1rem; }
.cladder .cl-step { border: 1px solid var(--rule); border-top: 3px solid var(--gold); background: #fff; padding: 2.5rem 2rem; }
.cl-step .cl-code { font-family: var(--kanit); font-size: 2.6rem; font-weight: 700; color: var(--navy); }
.cl-step .cl-name { font-family: var(--kanit); font-size: 1.6rem; font-weight: 600; color: var(--navy); margin: .4rem 0 1rem; }
.cl-step .cl-exp { font-size: 1.3rem; color: var(--gold); font-family: var(--kanit); letter-spacing: .06em; margin-bottom: 1rem; }
.cl-step .cl-desc { font-size: 1.35rem; color: var(--mid); line-height: 1.6; }
.cl-track { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; }
.cl-track .cl-chip { font-family: var(--kanit); font-size: 1.4rem; font-weight: 600; color: var(--navy); border: 1px solid var(--rule); padding: .8rem 1.6rem; background: var(--light); }

/* prose (privacy/about) */
.prose { max-width: 82rem; }
.prose h2 { font-family: var(--kanit); font-size: 2.2rem; font-weight: 600; color: var(--navy); margin: 3rem 0 1rem; }
.prose h3 { font-family: var(--kanit); font-size: 1.7rem; font-weight: 600; color: var(--navy); margin: 2rem 0 .8rem; }
.prose p, .prose li { font-size: 1.55rem; color: var(--text); line-height: 1.85; }
.prose ul { margin: 1rem 0 1rem 2rem; list-style: disc; }
.prose li { margin-bottom: .5rem; }

/* resourcing highlight block */
.resq { background: var(--navy); color: #fff; padding: 8rem 0; }
.resq .section-head .label { color: var(--gold); }
.resq .section-head h2 { color: #fff; } .resq .section-head h2 em { color: var(--gold); }
.resq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.resq p { font-size: 1.7rem; font-weight: 300; color: rgba(255,255,255,.9); line-height: 1.8; }
.resq ul { list-style: none; margin: 2rem 0; }
.resq li { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1.5rem; color: rgba(255,255,255,.9); display: flex; gap: 1rem; }
.resq li::before { content: '▸'; color: var(--gold); }

@media (max-width: 900px) {
  .hero-counter { grid-template-columns: 1fr 1fr 1fr; }
  .disc-grid { grid-template-columns: 1fr; }
  .cladder { grid-template-columns: 1fr 1fr; }
  .resq-grid { grid-template-columns: 1fr; gap: 3rem; }
  .resq { padding: 6rem 0; }
}

/* ============ encotec.az-inspired composition (palette + typography unchanged) ============ */

/* Stats — checkerboard navy/orange tiles */
.stats { padding: 0; }
.stats .stats-grid { gap: 0; }
.stats .stat-item { padding: 5.5rem 2.5rem; border: none; }
.stats .stat-item:nth-child(1), .stats .stat-item:nth-child(4) { background: var(--navy); }
.stats .stat-item:nth-child(2), .stats .stat-item:nth-child(3) { background: var(--gold); }
.stats .stat-item:nth-child(2) .stat-num, .stats .stat-item:nth-child(3) .stat-num { color: var(--navy); }
.stats .stat-item:nth-child(2) .stat-num span, .stats .stat-item:nth-child(3) .stat-num span { color: #fff; }
.stats .stat-item:nth-child(2) .stat-label, .stats .stat-item:nth-child(3) .stat-label { color: rgba(0,33,91,.72); }

/* Discipline cards — checkerboard fills + icon on top */
.disc-card .dc-icon { width: 4.6rem; height: 4.6rem; margin-bottom: .2rem; color: var(--gold); }
.disc-card .dc-icon svg { width: 100%; height: 100%; display: block; }
.disc-card.v-navy { background: var(--navy); border-top-color: var(--gold); }
.disc-card.v-navy .dc-name { color: #fff; }
.disc-card.v-navy .dc-open, .disc-card.v-navy .dc-open strong { color: rgba(255,255,255,.85); }
.disc-card.v-navy .dc-code { color: var(--gold); }
.disc-card.v-navy .svc-link { color: #fff; }
.disc-card.v-navy .svc-link:hover { color: var(--gold); }
.disc-card.v-gold { background: var(--gold); border-top-color: var(--navy); }
.disc-card.v-gold .dc-name, .disc-card.v-gold .svc-link { color: var(--navy); }
.disc-card.v-gold .dc-code { color: #fff; }
.disc-card.v-gold .dc-open, .disc-card.v-gold .dc-open strong { color: rgba(0,33,91,.82); }
.disc-card.v-gold .dc-icon { color: var(--navy); }
.disc-card.v-navy:hover, .disc-card.v-gold:hover { box-shadow: 0 14px 44px rgba(0,33,91,.20); }
.disc-card.v-ghost { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); }

/* Logo carousel (clients) */
.logo-carousel { position: relative; padding: 0 5.5rem; }
.logo-viewport { overflow: hidden; border: 1px solid var(--rule); }
.logo-track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.logo-track .client-logo { flex: 0 0 20%; border-right: 1px solid var(--rule); border-bottom: none; }
.lc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; z-index: 2; }
.lc-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.lc-arrow.prev { left: 0; } .lc-arrow.next { right: 0; }
.lc-arrow svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 900px) { .logo-track .client-logo { flex-basis: 50%; } .logo-carousel { padding: 0 4.6rem; } }

/* Split-banner CTA (half navy / half orange) */
.cta-band.split { background: linear-gradient(108deg, var(--navy) 0 50%, var(--gold) 50% 100%); }
.cta-band.split .section-head .label { color: #fff; }
.cta-band.split h2, .cta-band.split h2 em, .cta-band.split p { color: #fff; }
.cta-band.split .btn { background: #fff; color: var(--navy); }
.cta-band.split .btn:hover { background: var(--navy-d); color: #fff; }
.cta-band.split .btn svg path { stroke: currentColor; }
@media (max-width: 700px) { .cta-band.split { background: linear-gradient(160deg, var(--navy) 0 55%, var(--gold) 55% 100%); } }

/* Site footer */
/* The orange rule and the navy field are gone (owner's decision, 10.09.2026). The strip
   had been empty since the icons moved to the copyright line, and the navy block existed
   to hold an address that left this footer on 05.09.2026 -- a coloured band holding
   nothing is a leftover, not a design. The footer is now one row on the same white
   surface the slides use, so the page ends without a second background appearing. */

/* The icons sit under the address, and that is the whole of the navy zone's top half
   now. They need a margin that ties them to the address above rather than letting them
   float, and flex-wrap, because seven of them do not fit one line on a phone. The colours
   are the navy zone's: navy on navy is invisible. The 44px floor is kept, not overridden
   -- these are links a thumb aims at. */
/* The icons are the whole of this zone now that the address has gone, so they sit in the
   middle of it rather than hanging off a left edge that no longer has anything above it. */
.foot-row .fo-social { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; }
.foot-row .fo-social a { width: 44px; height: 44px;
  padding: 0; flex: none;
  border: 1.5px solid var(--rule); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mid); transition: background .2s, color .2s, border-color .2s; }
.foot-row .fo-social a:hover { border-color: var(--navy); color: var(--navy); }
.foot-row .fo-social svg { width: 1.8rem; height: 1.8rem; }
/* contacts page — social links with their platform icon */
.c-social .c-soc { display: inline-flex; align-items: center; gap: .6rem; color: inherit; }
.c-social .c-soc svg { width: 1.6rem; height: 1.6rem; flex: none; }
.c-social .c-soc span { line-height: 1; }
.site-foot { background: var(--white); border-top: 1px solid var(--rule); }
.foot-row { max-width: 1080px; margin: 0 auto; padding: 1.4rem 2.4rem;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
/* One block, no grid. The offices grid, its auto-fit column count and the four column
   headings went with the columns themselves: the navy zone holds a name, an address and
   a row of icons, and a grid for one block is a grid for nothing. Checked before deleting
   that .foot-offices, .foff and their headings are used nowhere else in the templates or
   the scripts. */

/* The two-column rule for narrow screens is gone with the fixed track count: auto-fit
   already gives two columns at 768 and one at 390, from the same declaration. */

/* Projects gallery (photo carousel) */
.proj-carousel { padding: 0 5.5rem; }
.proj-carousel .logo-viewport { border: none; }
.proj-carousel .logo-track > .proj-card { flex: 0 0 33.333%; padding: 0 .8rem; box-sizing: border-box; }
.pc-inner { position: relative; overflow: hidden; background: var(--navy); }
.proj-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s ease; }
.pc-inner:hover img { transform: scale(1.05); }
.pc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem; font-family: var(--kanit); font-weight: 600; font-size: 1.7rem; color: #fff; background: linear-gradient(transparent, rgba(0,21,64,.9)); }
@media (max-width: 900px) { .proj-carousel .logo-track > .proj-card { flex-basis: 100%; } .proj-carousel { padding: 0 4.6rem; } }

/* Overlapping photo composition + play button (about / who we are) */
.photo-compose { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.photo-stack { position: relative; min-height: 46rem; }
.photo-stack img { position: absolute; border: 5px solid #fff; box-shadow: 0 22px 55px rgba(0,33,91,.28); object-fit: cover; }
.photo-stack .ps1 { width: 60%; top: 0; left: 0; z-index: 1; }
.photo-stack .ps2 { width: 48%; bottom: 0; right: 0; z-index: 2; }
.photo-stack .ps3 { width: 36%; bottom: 14%; left: 16%; z-index: 3; }
.play-btn { position: absolute; z-index: 4; top: 38%; left: 42%; width: 8.5rem; height: 8.5rem; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(0,0,0,.32); cursor: pointer; transition: transform .2s, background .2s; }
.play-btn:hover { transform: scale(1.08); background: var(--gold-l); }
.play-btn svg { width: 2.8rem; height: 2.8rem; margin-left: .4rem; }
@media (max-width: 900px) { .photo-compose { grid-template-columns: 1fr; gap: 3rem; } .photo-stack { min-height: 40rem; } }

/* Disciplines grid — responsive columns (fallback grid, stable) */
@media (max-width: 900px) { .disc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .disc-grid { grid-template-columns: 1fr; } }

/* Fix: footer copyright/links inherited the old one-page "2x" mobile bump — scale to the two-zone footer */
@media (max-width: 900px) {
  /* On a phone the footer is one line and nothing else (owner's decision, 10.09.2026):
     the copyright and the social icons, both small. The three text links are hidden --
     Privacy stays reachable from the application form, which is where it is actually
     needed, and Internal access is a staff door that has no business taking a third of a
     phone screen. Hidden, not removed: the same markup serves the desktop row. */
  .foot-row { flex-wrap: nowrap; gap: .8rem; padding: .5rem 1.4rem; }
  .foot-row .ft-links { display: none; }
  /* px, not rem: the root size itself shrinks on a phone, and 1.1rem landed at 7.9px --
     a footnote nobody can read. The line has to be small, not absent. */
  .foot-row .ft-copy { font-size: 11px; letter-spacing: 0; line-height: 1.25; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  /* One line whatever the panel holds: the strip scrolls sideways rather than wrapping
     the footer into a second row. Today it is one icon; six more would still be one line. */
  .foot-row .fo-social { margin-left: auto; gap: .4rem; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; }
  .foot-row .fo-social::-webkit-scrollbar { display: none; }
  .foot-row .fo-social a { width: 30px; height: 30px; border-width: 1px; flex: none; }
  .foot-row .fo-social svg { width: 15px; height: 15px; }
}

/* ---- Application form: structured phone + salary (fix salary/phone fields) ---- */
.af-phone { display: flex; gap: .8rem; }
/* ШИРИНА ОТ КОДА, А НЕ ОТ СПИСКА. Родной select берёт ширину самой длинной опции.
   На тринадцати странах самая длинная строка была короткой и `width: auto` никого не
   трогало; на 242 появилось "United Arab Emirates (+971)", select раздулся до 245px и,
   будучи `flex: 0 0 auto`, толкнул поле на 100px за колонку -- прямо под соседний блок.
   Здесь ширина задана числом, которого хватает на флаг, код и стрелку (замер: 58px
   текста плюс 49px отступов при 1920, 53+32 при 1280), поэтому расширение справочника
   до трёхсот стран её больше не двигает. Название страны читается в раскрытом списке;
   в свёрнутом оно не нужно -- поэтому код в подписи стоит ПЕРВЫМ и обрезается хвост,
   а не он. */
.af-phone .af-ph-cc { flex: 0 0 auto; width: max(11rem, 108px); padding-right: 3rem;
  text-overflow: ellipsis; }
.af-phone .af-ph-num { flex: 1 1 auto; min-width: 0; }
.af-phone .af-ph-type { flex: 0 0 auto; width: max(9rem, 92px); }
/* Rows two and three. They are laid out exactly like the first: a second number is
   not a lesser field, and shrinking it would say it is. */
.af-phone-row + .af-phone-row { margin-top: .8rem; }
.af-doc { display: flex; gap: .8rem; align-items: center; }
.af-doc .af-doc-file { flex: 1 1 auto; min-width: 0; }
.af-doc .af-doc-kind { flex: 0 0 max(14rem, 150px); width: auto; }
.af-doc-row + .af-doc-row { margin-top: .8rem; }
/* One rule for both repeat buttons: two copies would be two things to keep in step. */
.af-phone-add, .af-doc-add { margin-top: .8rem; background: none; border: 0; padding: 0;
  font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; }
.af-phone-add:hover, .af-doc-add:hover { color: var(--gold); }
/* A grid item does not shrink below its content either -- min-width is `auto` there, the
   same trap as in flexbox. An <option> reading "United Arab Emirates (+971)" is wide
   content, and with thirteen short labels nobody noticed; at 242 the phone row ran 56px
   past a 390px screen and 126px past a 320px one. It never showed as a scrollbar because
   html carries overflow-x:hidden -- it was clipped, which is the kind of breakage that
   goes unreported. This lets the column shrink and the select truncate its own label. */
.aform-row > *,
.af-field, .af-phone, .af-salary, .af-rights { min-width: 0; }
/* The standing hint under the location field: the same quiet style as every other hint,
   because it is guidance and not a complaint. */
.af-loc-hint { margin-top: .4rem; }
/* THE TWO-COLUMN BLOCK IS GONE, RULES AND MARKUP TOGETHER (10.09.2026). .aform-split and
   .aform-stack existed to stand the tall right-to-work picker beside a stack of short
   fields so that one long page did not show a hole down its middle. The form is a wizard
   now and right to work has a step of its own, so there is nothing to pair it with -- and
   a rule kept for markup that no longer exists is the kind that gets revived by accident.
   The same goes for .aform-row.is-wide: every row is one column already. */
.af-salary { display: flex; gap: .8rem; flex-wrap: wrap; }
.af-salary .af-sal-cur { flex: 0 0 max(16rem, 172px); width: auto; }
.af-salary .af-sal-amt { flex: 1 1 9rem; min-width: 0; max-width: 16rem; }
.af-salary .af-sal-per { flex: 0 0 11rem; width: auto; }

/* ---- Ширина поля = ширина ответа ----------------------------------------------
   Форма встала на ширину шапки, и одинаковые 449px превратились в одинаковые 639.
   Растягивать поле только потому, что место есть, -- ошибка: под "12" в годах опыта
   639px это в тридцать раз больше нужного, и человек перестаёт понимать, сколько от
   него ждут. Границу провели замером "контрол против содержимого", не на глаз:
   годы опыта  19px текста  ("60")                     -> 14rem
   срок увед.  173px        ("3 months (negotiable)")  -> 26rem
   готовность  64px         ("Select…")                -> 22rem
   сумма       65px         ("1500000")                -> 16rem на само поле,
                                                          группа валюты не трогается
   Ограничивается КОНТРОЛ, не поле: подпись и подсказка остаются на своих местах, и
   колонки сетки не меняются -- иначе поехали бы соседи. */
.af-inp.af-short { max-width: 14rem; }
.af-inp.af-mid   { max-width: 26rem; }
.af-sel.af-mid   { max-width: 22rem; }
/* Строка в 180 знаков нечитаема: глаз теряет начало следующей. `ch` привязан к
   реальному кеглю, поэтому 60ch держит 73-76 знаков на ВСЕХ шагах корневого шрифта
   (замер: 73.2 при 1920, 75.6 при 1440, 75.9 при 1280) -- в отличие от rem, который
   уехал бы вместе с корнем. */
.af-ta { max-width: 60ch; }
.field-err.is-warn { color: #b26a00; }
.af-inp.is-invalid { border-color: #c0392b; }
@media (max-width: 480px) {
  .af-phone { flex-wrap: wrap; }
  .af-phone .af-ph-cc { max-width: 100%; flex: 1 1 100%; }
  /* At 390 the country code takes its own line; number and label share the next one. */
  .af-phone .af-ph-type { flex: 0 0 auto; width: max(9rem, 92px); }
  /* At 390 the file button alone fills a line; the kind goes under it. */
  .af-doc { flex-wrap: wrap; }
  .af-doc .af-doc-kind { flex: 1 1 0; min-width: 0; }
  .af-salary .af-sal-cur, .af-salary .af-sal-per { flex: 1 1 45%; }
}

/* ---- Imagery integration (steel-blue asset pack) ---- */
/* Hero background photo (duotone already baked — overlay only for text contrast) */
#hero .hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#hero .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#hero .hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(9,15,30,.88) 0%, rgba(10,20,55,.80) 50%, rgba(10,42,120,.72) 100%); }

/* Inner page-hero background photo */
.page-hero.has-photo .ph-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero.has-photo .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero.has-photo .ph-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(9,15,30,.90) 0%, rgba(10,20,55,.72) 100%); }

/* Framed lead figure */
.lead-figure { max-width: 100rem; margin: 0 auto 4.5rem; border-radius: 14px; overflow: hidden;
  line-height: 0; box-shadow: 0 22px 55px rgba(10,20,40,.28); }
.lead-figure img { width: 100%; height: auto; display: block; }

/* Full-width photo band */
.photo-band { width: 100%; height: 28rem; overflow: hidden; line-height: 0; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .photo-band { height: 18rem; } }

/* Client logo images (mono ink on light strip) */
.client-logo.has-img { padding: 1.8rem 2rem; }
.client-logo.has-img img { height: 4rem; width: auto; max-width: 15rem; object-fit: contain;
  opacity: .7; transition: opacity .25s; }
.client-logo.has-img:hover { background: var(--white); }
.client-logo.has-img:hover img { opacity: 1; }

/* About "Who We Are" — single contained figure (replaces overlap-prone photo-stack) */
.about-figure { border-radius: 14px; overflow: hidden; line-height: 0;
  box-shadow: 0 22px 55px rgba(10,20,40,.28); }
.about-figure img { width: 100%; height: auto; display: block; }

/* --- application form: position picker (one questionnaire, several positions) --- */
.af-picker { border:0; padding:0; margin:0 0 2.4rem; }
.af-picker legend { padding:0; margin-bottom:1rem; }
.af-hint { font-weight:400; color:var(--mid); }
.af-grp { margin-bottom:1.4rem; }
.af-grp-h { font-size:1.25rem; letter-spacing:.08em; text-transform:uppercase;
            color:var(--mid); margin-bottom:.5rem; }
.af-chk { display:flex; align-items:center; gap:1rem; padding:.7rem 1rem;
          border-radius:.4rem; margin-bottom:.5rem;
          cursor:pointer; transition:border-color .15s, background .15s; }
.af-chk:hover { border-color:var(--navy); background:rgba(0,0,0,.02); }
.af-chk input { width:1.7rem; height:1.7rem; flex:0 0 auto; accent-color:var(--navy); }
.af-chk-t { flex:1 1 auto; font-size:1.55rem; }
.af-chk-g { flex:0 0 auto; font-size:1.2rem; letter-spacing:.06em; color:var(--mid);
            border-radius:.3rem; padding:.15rem .5rem; }
.af-grp-pool { margin-top:2rem; padding-top:1.4rem; }
.af-none { color:var(--mid); font-size:1.5rem; margin-bottom:1rem; }
.sb-list { list-style:none; padding:0; margin:0 auto; max-width:56rem; text-align:left; }
.sb-list li { font-size:1.55rem; padding:.6rem 1rem; 
              border-radius:.4rem; margin-bottom:.5rem; }

/* ===========================================================================
 * Apply form — compact picker, optional detail, and the mobile floor.
 * Added 29.08.2026 together with the entry screens.
 * ======================================================================== */

/* The position list: one row per position, discipline as a tag on the row.
   Two columns where there is room, one on a phone. */
/* One column, like the right-to-work list. Two columns put a position and its neighbour
   side by side at 916px wide and made the block read as a table of contents rather than a
   list of choices. */
.af-plist { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.af-plist .af-chk { margin: 0; min-height: 44px; }
.af-chk.is-on { border-color: var(--navy); background: rgba(0,33,91,.04); }
.af-chk-d { flex: 0 0 auto; font-size: 1.2rem; color: var(--mid); letter-spacing: .04em;
            text-transform: uppercase; }
.af-chk-t { min-width: 0; overflow-wrap: anywhere; }

/* Optional detail, folded but present on the same page. */
/* Рамки здесь быть не должно. Блок был <details> с <summary>, стал <fieldset> с
   <legend> -- и вместе с ним приехало поведение легенды: она садится ПРЯМО НА
   линию границы, разрывая её собой. Отсюда вид «подпись сидит на линии» на снимке.
   Границу снимаем, разделение оставляем отступом; сам браузерный бордюр fieldset
   тоже гасим явно, чтобы он не вернулся ни в одном движке. */
.af-more { margin: 2.4rem 0 2rem; border: 0; padding: 0; }
.af-more > legend { padding: 0; margin-bottom: 1.2rem; }
.af-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .8rem; min-height: 44px; font-family: var(--kanit); font-size: 1.6rem;
  letter-spacing: .04em; color: var(--navy); }
.af-more > summary::-webkit-details-marker { display: none; }
.af-more > summary::before { content: '+'; display: inline-flex; align-items: center;
  justify-content: center; width: 24px; height: 24px; border: 1px solid var(--navy);
  border-radius: 2px; font-size: 1.6rem; line-height: 1; }
.af-more[open] > summary::before { content: '\2212'; }

/* Privacy, next to the upload rather than two pages away. */
.af-privacy { margin: 0 0 1rem; }
.af-privacy a { font-size: 1.45rem; color: var(--navy); text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------------------
 * THE MOBILE FLOOR.
 *
 * html{font-size} steps down to 45% below 991px, so every rem-based size shrinks
 * with it: a 1.6rem input, 16px on a desktop, renders at about 11.5px on a phone.
 * iOS zooms the whole page whenever a field below 16px takes focus, which is the
 * "the form jumps about" that gets reported as a layout bug.
 *
 * These floors are in PIXELS on purpose. They do not scale, which is the point:
 * a control a person types into or taps has a physical minimum that has nothing
 * to do with the page's typographic scale. Thin type is fine; small targets are not.
 * ------------------------------------------------------------------------ */
.af-inp, .af-sel, .af-ta, input, select, textarea { font-size: max(16px, 1.6rem); }
.af-inp, .af-sel { min-height: 44px; }
.af-ta { min-height: 88px; }
.aform .btn, .aform button[type="submit"] { min-height: 48px; font-size: max(15px, 1.5rem); }
.af-chk { min-height: 44px; }
.af-chk input[type="checkbox"] { width: 20px; height: 20px; }
.af-consent { display: flex; gap: 1rem; align-items: flex-start; }
.af-consent input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.af-consent span { font-size: max(14px, 1.4rem); line-height: 1.6; }
.af-file input[type="file"] { font-size: max(16px, 1.5rem); min-height: 44px; }

/* The floor has to out-specify the rules it is protecting against, not merely come
   after them: .vac-filters input beats a bare `input` selector whatever the order.
   Enumerated by measuring the rendered page, not by reading the stylesheet. */
.vac-filters input, .vac-filters select { font-size: max(16px, 1.5rem); min-height: 44px; }
.enq-form input, .enq-form select, .enq-form textarea { font-size: max(16px, 1.5rem); }

/* Tap targets. Same reasoning: a thing a finger lands on has a physical minimum.
   The burger at 23px and the footer links at 30px were the real offenders; the
   numbers come from the rendered page at 390px, not from reading the markup. */
.burger { min-width: 44px; min-height: 44px; }
header .logo { min-height: 44px; }
.ft-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* The Explore column's own rules went with the column. */
.btn, a.btn, button.btn { min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; }
.mobile-menu a { min-height: 44px; display: inline-flex; align-items: center;
  font-size: max(18px, 2.2rem); }
.af-hint { font-size: max(13px, 1.3rem); }

/* Internal access: present, plain, and not shouting. */
.ft-internal { opacity: .75; }
/* Social icons in the footer are links too: 30px of icon is a miss on a phone. */
.fo-social a { min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center; }
.svc-link { min-height: 44px; display: inline-flex; align-items: center; }
.lc-arrow { min-width: 44px; min-height: 44px; }
/* A phone number and an email address on the contacts page are the two things a
   visitor actually taps there. 32px of link is a miss. */
.co-links a, .c-social a.c-soc { min-height: 44px; display: inline-flex; align-items: center; }
.c-social a.c-soc { min-width: 44px; justify-content: center; }
/* 43.5px rounds to 44 in a report and still misses the floor. Clear it outright. */
.af-plist .af-chk { min-height: 46px; }
.other-jobs a { min-height: 46px; display: flex; align-items: center; }
/* The "you opened this one" note takes a full row of its own. Without flex-wrap on the
   label, a 100%-basis child squeezes its siblings instead of moving to a new line, and
   the position title collapsed to one character per line -- a 300px-tall cell. Caught by
   looking at a screenshot; every number in the sweep was green while this was on screen.
   Heights and font sizes cannot see a broken line-break. */
.af-plist .af-chk { flex-wrap: wrap; }
.af-plist .af-chk .af-chk-t { flex: 1 1 55%; min-width: 12ch; }
.af-chk-from { flex: 1 0 100%; margin-top: .2rem; font-size: max(12px, 1.2rem);
  color: var(--navy); letter-spacing: .04em; text-transform: uppercase; }
.af-plist .af-chk.is-on { order: -1; }
/* Right-to-work checkboxes: compact, still 44px tall to tap. */
.af-rights { display: flex; flex-direction: column; gap: .3rem; }

/* Right-to-work picker. Real checkboxes underneath; this is the layer over them.
   Without JS the list is simply open and long -- unusual, but submittable, tabbable and
   readable, which a control built out of divs would not have been. */
.af-ms { border: 1px solid var(--e-line, rgba(0,0,0,.14)); border-radius: 4px; }
.af-ms-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem .8rem 0; }
.af-ms-chip { display: inline-flex; align-items: center; gap: .5rem;
  background: var(--navy, #00215b); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: max(12px, 1.2rem); line-height: 1; padding: .5rem .9rem;
  min-height: 28px; cursor: pointer; }
.af-ms-chip:hover, .af-ms-chip:focus-visible { background: var(--gold, #ee9b00); color: var(--navy, #00215b); }
.af-ms-chip::after { content: '×'; font-size: 1.4em; line-height: 1; }
.af-ms-q { margin: .8rem; width: calc(100% - 1.6rem); }
/* The list scrolls inside itself: 242 countries must not push the rest of the form down. */
.af-ms-list { max-height: 26rem; overflow-y: auto; padding: .4rem .8rem .8rem; }
.af-ms-grp { font-family: var(--kanit); font-size: max(11px, 1.1rem); letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-mute, #6b7280); margin: 1rem 0 .4rem; }
.af-ms-none { margin-bottom: .4rem; }
.af-ms .af-chk[hidden] { display: none; }
/* A scroll that reaches its end must stop there, not hand the rest of the gesture to the
   page. With a four-row window a person scrolls inside this list constantly, and the page
   jumping out from under them at every end is the same leak we already closed under the
   open menu. Both lists, not only positions. */
.af-ms-list { overscroll-behavior: contain; }
/* What is chosen, said in words above the list — the one thing a four-row window cannot
   show for itself. */
.af-ms-count { margin: .8rem .8rem 0; font-size: max(13px, 1.4rem); font-weight: 600;
  color: var(--navy, #00215b); }
.af-ms-count.is-none { font-weight: 400; color: var(--e-mute, #6b7280); }

/* The picker's spoken part: what is in the way, and one click to swap. Styled as a notice
   rather than an error, because nothing is wrong -- the person simply cannot have both. */
.af-ms-say { margin: .8rem; padding: .8rem 1rem; border-radius: 4px;
  background: rgba(238,155,0,.10); border: 1px solid rgba(238,155,0,.45);
  font-size: max(13px, 1.4rem); line-height: 1.5; color: var(--navy, #00215b); }
.af-ms-swap { font: inherit; font-weight: 600; color: var(--navy, #00215b);
  background: none; border: 0; border-bottom: 1px solid currentColor;
  padding: 0; cursor: pointer; }
.af-ms-swap:hover, .af-ms-swap:focus-visible { color: var(--gold-d, #b87700); }
/* Positions stay open: fifteen roles are a shop window, not a reference book. The list
   still scrolls once it outgrows the box -- the cap is generous enough to show them all. */
/* Four rows and a sliver of the fifth. The exact height is measured from the rendered
   rows by site.js, because a position row is not a fixed height -- 107px at the top, 79px
   lower down, taller again at 390 where the titles wrap -- so any pixel value picked here
   would show four rows on one screen and three or five on another. This value is only the
   no-JS fallback, and it is deliberately generous: without the script the list simply
   shows more, which is the safe direction. */
.af-chk-sm { padding: .4rem .8rem; min-height: 44px; }
.af-chk-sm .af-chk-t { font-size: max(14px, 1.45rem); }


/* Два самых мелких уровня текста на 390 -- и ровно они -- на полтора.
 * Замерено обходом шести страниц сайта и десяти экранов панели при 390:
 * мельче всего 1.1rem (7.92px) и 1.15rem (8.28px), они и подняты до
 * 1.65rem (11.88px) и 1.725rem (12.42px). Третий уровень (1.2rem), основной
 * текст, заголовки, отступы и десктоп не тронуты. Правила с полом вида
 * max(11px, 1.1rem) сюда не входят: они и так рисуются крупнее 8.28. */
@media (max-width: 820px) {
  .offices-label { font-size: 1.65rem; }
  .hq-label { font-size: 1.65rem; }
  .strip-label { font-size: 1.65rem; }
  .svc-num { font-size: 1.65rem; }
  .co-label { font-size: 1.65rem; }
  .js-k { font-size: 1.65rem; }
  .vac-filters label { font-size: 1.65rem; }
  .grade-badge { font-size: 1.725rem; }
  .hero-2cta .btn small { font-size: 1.65rem; }
  .hero-counter .hc-l { font-size: 1.725rem; }
  .disc-card .dc-code { font-size: 1.65rem; }
}


/* Подписи прописными с разрядкой -- не ниже 14px на узком экране.
 * Такой набор читается мельче своего кегля: узкая гарнитура, разрядка, серый
 * тон, прописные без строчных -- всё это отнимает разборчивость, и 12px здесь
 * выглядят как 9. Поднимается ТОЛЬКО эта группа: правила, в которых стоят
 * одновременно text-transform: uppercase и letter-spacing. Основной текст,
 * заголовки, отступы и десктоп не затронуты. */
@media (max-width: 820px) {
  .lg-sub { font-size: max(14px, max(9px, 1.2rem)); }   /* было 9.0px */
  .hero-badge { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .offices-label { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .office-city { font-size: max(14px, 1.5rem); }   /* было 10.8px */
  .hkpi-l { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .stat-label { font-size: max(14px, 1.5rem); }   /* было 10.8px */
  .section-head .label { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .hq-label { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .cap-title { font-size: max(14px, 1.4rem); }   /* было 10.08px */
  .strip-label { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .svc-link { font-size: max(14px, 1.3rem); }   /* было 9.36px */
  .client-logo { font-size: max(14px, 1.5rem); }   /* было 10.8px */
  .wi-title { font-size: max(14px, 1.5rem); }   /* было 10.8px */
  .co-label { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .cf-lbl { font-size: max(14px, 1.76rem); }   /* было 12.67px */
  .ft-links a { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .page-hero .ph-label { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .breadcrumb { font-size: max(14px, 1.3rem); }   /* было 9.36px */
  .more-btn { font-size: max(14px, 1.4rem); }   /* было 10.08px */
  .js-k { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .af-lbl { font-size: max(14px, 1.35rem); }   /* было 9.72px */
  .vac-filters label { font-size: max(14px, 1.1rem); }   /* было 7.92px */
  .disc-group > h3 { font-size: max(14px, 1.3rem); }   /* было 9.36px */
  .hero-counter .hc-l { font-size: max(14px, 1.15rem); }   /* было 8.28px */
  .af-grp-h { font-size: max(14px, 1.25rem); }   /* было 9.0px */
  .af-chk-d { font-size: max(14px, 1.2rem); }   /* было 8.64px */
  .af-chk-from { font-size: max(14px, max(12px, 1.2rem)); }   /* было 12.0px */
  .af-ms-grp { font-size: max(14px, max(11px, 1.1rem)); }   /* было 11.0px */
}

/* Хвост той же группы: правила, где прописные и разрядка стоят не там же, где
 * размер, поэтому в общий проход они не попали. */
@media (max-width: 820px) {
  .af-hint { font-size: max(14px, 1.3rem); }   /* было 13px */
}


/* ЧЕТЫРЕ СТУПЕНИ ВМЕСТО ДВАДЦАТИ ДЕВЯТИ. Образец -- мессенджер: всё, что
 * человек ЧИТАЕТ, набрано одним размером; мельче только служебное, крупнее
 * только заглавие. На 390 у нас было 29 различных размеров и разброс 3.5
 * раза -- отсюда "заголовки большие, подписи угадываются".
 *   15px -- служебное: прописные с разрядкой (плашки, заголовки колонок,
 *           кнопки, подписи полей, крошки, подстрочник логотипа);
 *   17px -- содержание: абзацы, пункты, ячейки таблиц, значения полей;
 *   21px -- заголовки разделов;
 *   29px -- заглавие страницы.
 * Разброс ровно вдвое. Близкие значения СЛИТЫ в одну ступень, а не подтянуты
 * порознь. Только 560 и уже: планшет и десктоп не затронуты. */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .lg-name { font-size: 17px; }
  .lg-sub { font-size: 15px; }
  .hero-badge { font-size: 15px; }
  .hero-h1 { font-size: 17px; }
  .hero-sub { font-size: 17px; }
  .btn { font-size: 17px; }
  .offices-label { font-size: 15px; }
  .office-city { font-size: 15px; }
  .office-country { font-size: 17px; }
  .hkpi-n { font-size: 17px; }
  .hkpi-l { font-size: 15px; }
  .stat-num { font-size: 17px; }
  .stat-label { font-size: 15px; }
  .section-head .label { font-size: 15px; }
  .section-head h2 { font-size: 21px; }
  .about-desc h3 { font-size: 21px; }
  .about-desc p { font-size: 17px; }
  .hq-label { font-size: 15px; }
  .hq-name { font-size: 17px; }
  .hq-addr { font-size: 17px; }
  .cap-abbr { font-size: 17px; }
  .cap-title { font-size: 15px; }
  .cap-text { font-size: 17px; }
  .strip-label { font-size: 15px; }
  .strip-tag { font-size: 17px; }
  .svc-num { font-size: 17px; }
  .svc-title { font-size: 17px; }
  .svc-desc { font-size: 17px; }
  .svc-link { font-size: 15px; }
  .client-logo { font-size: 15px; }
  .why-l p, #why .why-inner > div > p { font-size: 17px; }
  .wi-n { font-size: 17px; }
  .wi-title { font-size: 15px; }
  .wi-text { font-size: 17px; }
  .co-label { font-size: 15px; }
  .co-name { font-size: 17px; }
  .co-addr { font-size: 17px; }
  .co-links a { font-size: 17px; }
  .cf-title { font-size: 15px; }
  .cf-lbl { font-size: 15px; }
  .cf-inp, .cf-sel, .cf-ta { font-size: 17px; }
  .msg-btn { font-size: 17px; }
  .cf-success { font-size: 17px; }
  .cf-error { font-size: 17px; }
  .ft-copy { font-size: 17px; }
  .ft-links a { font-size: 15px; }
  .mobile-menu a { font-size: 15px; }
  .ld-btn { font-size: 17px; }
  .ld-arrow { font-size: 17px; }
  .ld-menu button { font-size: 17px; }
  .page-hero .ph-label { font-size: 15px; }
  .page-hero h1 { font-size: 29px; }
  .page-hero p { font-size: 17px; }
  .breadcrumb { font-size: 15px; }
  .about-teaser p { font-size: 17px; }
  .cta-band h2 { font-size: 21px; }
  .cta-band p { font-size: 17px; }
  .intro-lead { font-size: 17px; }
  .intro-body p { font-size: 17px; }
  .more-btn { font-size: 15px; }
  .value-card .vc-n { font-size: 17px; }
  .value-card .vc-title { font-size: 17px; }
  .value-card .vc-text { font-size: 17px; }
  .acc-num { font-size: 17px; }
  .acc-title { font-size: 17px; }
  .acc-plus { font-size: 17px; }
  .acc-body-inner { font-size: 17px; }
  .job-title { font-size: 17px; }
  .job-meta { font-size: 17px; }
  .job-summary { font-size: 17px; }
  .reserve-box h3 { font-size: 21px; }
  .reserve-box p { font-size: 17px; }
  .job-block h3 { font-size: 21px; }
  .job-block li { font-size: 17px; }
  .js-k { font-size: 15px; }
  .js-v { font-size: 17px; }
  .af-lbl { font-size: 15px; }
  .af-inp, .af-sel, .af-ta { font-size: 17px; }
  .af-file input[type=file] { font-size: 17px; }
  .af-hint { font-size: 15px; }
  .af-consent { font-size: 17px; }
  .field-err { font-size: 17px; }
  .alert { font-size: 17px; }
  .success-box .sb-check { font-size: 17px; }
  .vac-filters label { font-size: 15px; }
  .vac-filters input, .vac-filters select { font-size: 17px; }
  .vac-count { font-size: 17px; }
  .vac-count a { font-size: 17px; }
  .disc-group > h3 { font-size: 15px; }
  .grade-badge { font-size: 17px; }
  .tag { font-size: 17px; }
  .empty-state h3 { font-size: 21px; }
  .empty-state p { font-size: 17px; }
  .ladder-step .ls-code { font-size: 17px; }
  .ladder-step .ls-name { font-size: 17px; }
  .other-jobs .oj-t { font-size: 17px; }
  .ref-num { font-size: 17px; }
  .hero-2cta .btn small { font-size: 17px; }
  .hero-counter .hc-n { font-size: 17px; }
  .hero-counter .hc-l { font-size: 15px; }
  .disc-card .dc-code { font-size: 17px; }
  .disc-card .dc-name { font-size: 17px; }
  .disc-card .dc-open { font-size: 17px; }
  .cl-step .cl-code { font-size: 17px; }
  .cl-step .cl-name { font-size: 17px; }
  .cl-step .cl-exp { font-size: 17px; }
  .cl-step .cl-desc { font-size: 17px; }
  .cl-track .cl-chip { font-size: 17px; }
  .prose h2 { font-size: 21px; }
  .prose h3 { font-size: 21px; }
  .prose p, .prose li { font-size: 17px; }
  .resq p { font-size: 17px; }
  .resq li { font-size: 17px; }
  .pc-cap { font-size: 17px; }
  .af-grp-h { font-size: 15px; }
  .af-chk-t { font-size: 17px; }
  .af-chk-g { font-size: 17px; }
  .af-none { font-size: 17px; }
  .sb-list li { font-size: 17px; }
  .af-chk-d { font-size: 15px; }
  .af-more > summary { font-size: 17px; }
  .af-more > summary::before { font-size: 17px; }
  .af-privacy a { font-size: 17px; }
  .af-inp, .af-sel, .af-ta, input, select, textarea { font-size: 17px; }
  .aform .btn, .aform button[type="submit"] { font-size: 17px; }
  .af-consent span { font-size: 17px; }
  .af-file input[type="file"] { font-size: 17px; }
  .enq-form input, .enq-form select, .enq-form textarea { font-size: 17px; }
  .af-chk-from { font-size: 15px; }
  .af-ms-chip { font-size: 17px; }
  .af-ms-grp { font-size: 15px; }
  .af-ms-count { font-size: 17px; }
  .af-ms-say { font-size: 17px; }
  .af-chk-sm .af-chk-t { font-size: 17px; }
}


/* Размеры, записанные ПРЯМО В РАЗМЕТКЕ. Их полсотни в видах, inline сильнее
 * любого правила, поэтому !important -- и только внутри мобильного блока.
 * Все они несут содержание (ячейки, значения, абзацы), значит идут в 17. */
@media (max-width: 560px) {
  [style*="font-size:1.05rem"], [style*="font-size: 1.05rem"] { font-size: 17px !important; }
  [style*="font-size:1.15rem"], [style*="font-size: 1.15rem"] { font-size: 17px !important; }
  [style*="font-size:1.2rem"], [style*="font-size: 1.2rem"] { font-size: 17px !important; }
  [style*="font-size:1.25rem"], [style*="font-size: 1.25rem"] { font-size: 17px !important; }
  [style*="font-size:1.3rem"], [style*="font-size: 1.3rem"] { font-size: 17px !important; }
  [style*="font-size:1.35rem"], [style*="font-size: 1.35rem"] { font-size: 17px !important; }
  [style*="font-size:1.4rem"], [style*="font-size: 1.4rem"] { font-size: 17px !important; }
  [style*="font-size:1.5rem"], [style*="font-size: 1.5rem"] { font-size: 17px !important; }
  [style*="font-size:1.55rem"], [style*="font-size: 1.55rem"] { font-size: 17px !important; }
  [style*="font-size:1.6rem"], [style*="font-size: 1.6rem"] { font-size: 17px !important; }
  [style*="font-size:1.7rem"], [style*="font-size: 1.7rem"] { font-size: 17px !important; }
  [style*="font-size:1.9rem"], [style*="font-size: 1.9rem"] { font-size: 17px !important; }
}

@media (max-width: 560px) {
  /* Логотип -- единый знак, а не текст страницы, поэтому он выходит из общей
     лестницы как исключение. Причина правки: подстрочник попал в служебную ступень
     15px и оказался почти вровень с именем (17px), а набран он прописными с разрядкой
     во всю ширину экрана -- 291px против 390. Подпись зрительно перевешивала имя, и
     знак читался мелким, будучи формально крупнее. Имя +25%, подпись опущена, чтобы
     соотношение читалось однозначно: 21 против 13 -- это 1.6 раза. */
  .logo .lg-name { font-size: 21px; }
  .logo .lg-sub  { font-size: 11px; }
  /* ИСКЛЮЧЕНИЕ, ЗАФИКСИРОВАННОЕ НАМЕРЕННО: подстрочник знака не входит в служебную
     ступень 15px и не должен туда возвращаться при следующей правке шкалы. Он часть
     логотипа, а не текст страницы: имя обязано доминировать однозначно, подпись --
     читаемая мелочь под ним, а не вторая строка заголовка. 21 против 11 -- почти
     вдвое. Проверка «самый мелкий текст не ниже 15» его не считает: в mobile_type.py
     .lg-sub и .b-sub исключены явно, с той же оговоркой. */
}

/* The CV row's type is a fact, not a choice: it sits in the column where the other rows
   keep their dropdown so the rows line up, but there is nothing to pick. */
.af-doc .af-doc-kind-fixed { display: flex; align-items: center; justify-content: center;
  background: transparent; cursor: default; font-weight: 600; white-space: nowrap; }

/* Closing a line that was opened by mistake. Built by script, so with JavaScript off
   there is no control offering something the page cannot actually do. 44px so it is
   hittable with a thumb, like every other control in this form. */
.af-repeat-del { flex: 0 0 auto; align-self: center;
  width: max(4.4rem, 44px); height: max(4.4rem, 44px);
  background: none; border: 0; padding: 0; line-height: 1; font: inherit;
  font-size: max(2rem, 20px); color: var(--navy); opacity: .55; cursor: pointer;
  border-radius: 50%; }
.af-repeat-del:hover, .af-repeat-del:focus-visible { opacity: 1; color: var(--gold); }

/* A multi-select that starts closed: one line naming what is chosen, click to open.
   Both the toggle and the panel are built by script, so with JavaScript off there is no
   control promising something the page cannot do -- the full list is simply there. */
.af-ms-collapsed { border: 0; }
.af-ms-toggle { display: block; width: 100%; text-align: left; cursor: pointer;
  min-height: 44px; font: inherit; }
.af-ms-toggle.is-empty { color: var(--e-mute, #6b7280); }
.af-ms-toggle::after { content: '\25BE'; float: right; margin-left: 1rem; }
.af-ms-toggle[aria-expanded="true"]::after { content: '\25B4'; }
.af-ms-panel { margin-top: .4rem; border: 1px solid var(--e-line, rgba(0,0,0,.14));
  border-radius: 4px; }
/* Only the title is listed now. The discipline and the grade stay in the MARKUP as data
   attributes, because the "one level per discipline" rule reads them to say which choice
   is in the way; hiding the text does not take that away. */
.af-plist .af-chk-d, .af-plist .af-chk-g { display: none; }
/* On a phone this link scrolls 245px -- a third of a screen -- to a form that is already
   on its way into view. It earns its place on a wide screen, where it saves almost two
   screens of scrolling, and nowhere else. */
@media (max-width: 767px) { .btn[href="#apply"] { display: none; } }