/* ===== Department page — shared tokens =====
   Reuses site design tokens from /public/home2/css/styles.css
   (--font-primary, --color-green, --radius-pill, etc.) — this file only
   adds tokens/rules specific to the department-page template.

   Desktop and mobile use structurally different markup (per the Figma
   "Template — Department" / "M RD Department Template" frames), not a
   single fluid layout — so each section renders twice (.dept-only-desktop /
   .dept-only-mobile) and CSS toggles which one is visible.

   Tablets (768–1023px) intentionally show the DESKTOP markup, proportionally
   scaled down (see "TABLET PROPORTIONAL DESKTOP SCALE" below) — only real
   phones (≤767px) get the .dept-only-mobile markup. This mirrors the
   home2/homepage's own "home2-tablet-proportional" zoom trick. */

.dept-only-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .dept-only-desktop {
    display: none !important;
  }

  .dept-only-mobile {
    display: block !important;
  }
}

/* home2/css/styles.css sets `body:not(.services-page) { overflow-x: hidden }`
   across the whole 601–1199px tablet/small-desktop span, which now fully
   overlaps our desktop grid range (≥768px, since tablets show desktop
   markup too). Any ancestor with a non-visible overflow breaks
   position: sticky for its descendants, which was silently cutting the
   sticky consult card loose early. services-page already carries its own
   exclusion for the same reason — dept-page needs it too. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.dept-page {
    overflow-x: visible !important;
  }
}

/* ===== TABLET PROPORTIONAL DESKTOP SCALE =====
   768–1023px used to show the mobile (.dept-only-mobile) markup. Per
   request, tablets should show the desktop grid instead — but the desktop
   markup was originally calibrated for the ~1440px design width, so it can't
   just reflow at tablet widths without breaking. Instead, render `.main-content`
   at (close to) full desktop width and scale the whole thing down.

   This uses `transform: scale()` rather than the CSS `zoom` property (even
   though `zoom` is what the homepage's own tablet-proportional trick uses,
   home2/css/styles.css "HOME2 TABLET PROPORTIONAL DESKTOP SCALE") because
   `zoom` here triggers a reproducible Chromium compositing bug: a
   translucent "haze" gets painted over a band of content right below the
   hero (confirmed by pixel-sampling the rendered page — plain white
   background pixels came out light-blue-tinted — and by the fact that
   swapping `zoom` for `transform: scale()` makes it vanish, independent
   of any other change). `transform` doesn't shrink the element's
   contribution to page flow like `zoom` does, so a small script
   (deptPageTemplate.html, right after `.dept-tablet-scale-wrap`) measures
   `.main-content`'s true height and locks the wrapper to the equivalent
   *scaled* height so later sections don't end up sitting in a big gap.

   0.5333 = 768 / 1440 — so the narrowest tablet (768px) maps to exactly the
   1440px design canvas; wider tablets just get a bit more breathing room
   before real desktop (≥1024px) takes over unscaled. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.dept-page .main-content {
    width: calc(100vw / 0.5333) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: scale(0.5333) !important;
    transform-origin: top left !important;
  }

  body.dept-page .main-content > * {
    width: 100% !important;
  }

  /* The fixed site header lives OUTSIDE `.main-content` so it renders at
     real (unscaled) size, but `.dept-hero`'s 140px clearance padding is
     INSIDE the scaled subtree and shrinks to ~75px on screen — leaving no
     visible gap under the header. Override with a logical value that,
     after the 0.5333 scale, reproduces a real ~115px gap below the
     (shorter, top:16px) tablet header. */
  .dept-hero {
    padding-top: 220px !important;
  }

  /* `transform` on an ancestor (`.main-content` above) redefines the
     containing block used by descendants, which breaks `position: sticky`
     in every browser — the consult card would just scroll away normally
     instead of pinning. There's no CSS-only way to keep both the scale
     trick and sticky here, so on tablet the card simply sits in the
     normal flow next to the roles list instead of following the scroll;
     it's still fully visible and usable, just not sticky. Real desktop
     (≥1024px, no scaling) is unaffected and keeps the sticky behavior. */
  .dept-roles__consult {
    position: static !important;
  }
}

.dept-hero {
  padding: 140px 0 0;
}

/* ===== Estimate ("Пример расчёта") ===== */

.dept-estimate {
  padding: 40px 0 0;
}

.dept-estimate__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 72px;
}

.dept-estimate__divider {
  height: 1px;
  background: #edf2ed;
  margin-bottom: 40px;
}

.dept-estimate__label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-green, #00af57);
}

.dept-estimate__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: #222522;
}

.dept-estimate__heading-arrow {
  font-weight: 400;
  font-size: 32px;
  color: #6b706b;
}

.dept-estimate__heading-part--accent {
  color: var(--color-green, #00af57);
}

.dept-estimate__subtext {
  margin: 0 0 28px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 18px;
  color: #6b706b;
}

.dept-estimate__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 100px;
  background: #f4f7f4;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 15px;
  color: #6b706b;
}

.dept-estimate__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.dept-estimate__cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 22px 40px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dept-estimate__cta--primary {
  background: var(--color-green, #00af57);
  color: #fff;
}

.dept-estimate__cta--primary:hover {
  background: var(--color-green-dark, #169258);
  transform: translateY(-1px);
}

.dept-estimate__cta--secondary {
  background: #fff;
  color: #2f3430;
  border: 1px solid #d9e0db;
}

.dept-estimate__cta--secondary:hover {
  border-color: var(--color-green, #00af57);
  color: var(--color-green, #00af57);
}

.dept-estimate__cta svg {
  flex-shrink: 0;
}

.dept-hero__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.dept-hero__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 330px;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  border-radius: 32px;
  border: 1px solid #edf2ed;
  background: linear-gradient(90deg, #fcfaf5 0%, #fcfcfa 55%, #dbf2e5 100%);
  padding: 32px 0 0 61px;
  overflow: hidden;
}

/* ---- chips row ---- */
.dept-hero__chips {
  grid-column: 1 / 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 40px 40px 0;
}

.dept-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--color-white, #fff);
  border: 1px solid #d1d9d4;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
  font-size: 16px;
  line-height: 1.2;
  color: #2b2b2b;
  white-space: nowrap;
}

.dept-hero__chip-icon {
  flex-shrink: 0;
}

/* ---- body (title / duration / lead / cta) ---- */
.dept-hero__body {
  grid-column: 1 / 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding: 0 40px 40px 0;
}

.dept-hero__title-wrap {
  position: relative;
  /* "Подбор IT‑специалистов" alone is ~711px at 64px Golos — keep the wrap
     wide enough that the first title line doesn't orphan "Подбор". */
  max-width: 920px;
  margin-bottom: 24px;
}

.dept-hero__title {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.2;
  color: #222522;
}

/* Inline after the last title line (same idea as KA landing `.hero__badge`
   inside the H1). Stays glued to "по всей России" regardless of how many
   lines a particular department title wraps to. */
.dept-hero__duration {
  display: inline-block;
  vertical-align: middle;
  transform: rotate(-2.47deg);
  z-index: 2;
}

.dept-hero__duration span {
  display: block;
  position: relative;
  padding: 12px 22px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(28, 36, 31, 0.55);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(255, 255, 255, 0.18);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  white-space: nowrap;
}

.dept-hero__subtitle {
  max-width: 760px;
  margin: 0 0 32px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 18px;
  line-height: 1.5;
  color: #414742;
}

.dept-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
}

.dept-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 19px 34px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dept-hero__btn--primary {
  background: var(--color-green, #00af57);
  color: #fff;
  box-shadow: 0px 10px 20px rgba(0, 175, 87, 0.22);
}

.dept-hero__btn--primary:hover {
  background: var(--color-green-dark, #169258);
}

.dept-hero__btn--secondary {
  background: #fff;
  color: #2f3430;
  border: 1px solid #d9e0db;
}

.dept-hero__btn--secondary:hover {
  border-color: var(--color-green, #00af57);
  color: var(--color-green, #00af57);
}

/* ---- photo ---- */
.dept-hero__photo {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 80px;
}

.dept-hero__photo img {
  flex-shrink: 0;
  max-width: 290px;
  max-height: 558px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* ===== Hero (mobile tab) =====
   Matches Figma "M Hero Card" (node 192:1066) — a full-bleed rounded-top
   "tab" card, distinct markup from the desktop hero (see .dept-only-mobile
   block in deptHero.chunk.html). */

.dept-hero-m {
  position: relative;
  /* Header clearance on mobile is already handled globally by
     `body:not(.services-page) .main-content { padding-top: 92px }`
     (home2/css/styles.css, ≤600px) — this used to ALSO add its own
     large margin-top on top of that, doubling the gap under the header. */
  margin-top: 0;
  background: #e0ece5;
  border-radius: 44px 44px 0 0;
  padding: 20px 36px 40px;
  overflow: visible;
}

.dept-hero-m__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.dept-hero-m__chip {
  display: inline-flex;
  padding: 9px 14px;
  background: #fff;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: #222522;
}

.dept-hero-m__title {
  margin: 0 0 20px;
  max-width: 303px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.12;
  color: #222522;
}

.dept-hero-m__duration {
  display: block;
  margin-bottom: 24px;
}

.dept-hero-m__duration span {
  display: inline-block;
  padding: 16px 28px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(75, 81, 77, 0.85);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(255, 255, 255, 0.18);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 26px;
  color: #fff;
  white-space: nowrap;
}

.dept-hero-m__subtitle {
  margin: 0 0 32px;
  max-width: 303px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #414742;
}

.dept-hero-m__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.dept-hero-m__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.dept-hero-m__btn--primary {
  background: var(--color-green, #00af57);
  color: #fff;
}

.dept-hero-m__btn--secondary {
  background: #fff;
  border: 1px solid #d9e0db;
  color: #222522;
}

.dept-hero-m__photo {
  position: relative;
  /* NOTE: intentionally no z-index here (stays "auto"), so the white
     .dept-estimate-m tab below (which has its own z-index: 1 and slides
     up 24px) paints ON TOP of the photo — its rounded top corners cut
     cleanly across her lower body, and only her feet/ankles disappear
     behind the card, instead of her flat image edge covering the tab's
     rounded corner or her body drawing over its text. */
  display: flex;
  justify-content: center;
  margin-bottom: -98px;
}

.dept-hero-m__photo picture {
  /* The sizing (width/max-width) has to live on <picture>, not the <img>
     inside it: <picture> is the actual flex item here (it wraps the img to
     avoid double-downloading both hero photos, see the HTML comment), and
     it has no size of its own by default, so the flex algorithm falls back
     to shrink-to-fit sizing using the img's plain `width: 260px` while
     IGNORING the img's percentage `max-width` (percentages can't be
     resolved against a box whose own size isn't determined yet). That
     produces a <picture> that's exactly 260px wide, and if `max-width: 74%`
     were then put on the img too, it'd resolve against that 260px — not
     against the real ~318px card content width — shrinking the photo to a
     visibly smaller ~192px instead of the intended ~235px. Putting the
     sizing on <picture> instead resolves the percentage against the actual
     flex container (the card), and the img below just fills it 100%. */
  display: block;
  width: 260px;
  max-width: 74%;
}

.dept-hero-m__photo picture img {
  /* hero-photo-mobile.png is a transparent cutout (no background plate) —
     same treatment as the desktop version (.dept-hero__photo img):
     natural aspect ratio via object-fit: contain, no border-radius/shadow,
     so she just stands across the mint/white seam instead of looking like
     a separate rounded photo card floating on top. */
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ===== Estimate (mobile tab) =====
   Matches Figma "M Estimate Tab" (node 192:1083) — continues the rounded
   "tab" visual straight from the hero's mint background into white. */

.dept-estimate-m {
  background: #fff;
  border-radius: 44px 44px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 1;
  padding: 40px 32px 32px;
}

.dept-estimate-m__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-green, #00af57);
}

.dept-estimate-m__heading {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  color: #222522;
}

.dept-estimate-m__line--accent {
  color: var(--color-green, #00af57);
}

.dept-estimate-m__arrow {
  color: #6b706b;
  font-weight: 400;
}

.dept-estimate-m__subtext {
  margin: 0 0 20px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 14px;
  color: #6b706b;
}

.dept-estimate-m__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-pill, 999px);
  background: #f4f7f4;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 13px;
  color: #6b706b;
}

.dept-estimate-m__badge svg {
  flex-shrink: 0;
}

.dept-estimate-m__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dept-estimate-m__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 0 16px;
}

.dept-estimate-m__cta--primary {
  background: var(--color-green, #00af57);
  color: #fff;
}

.dept-estimate-m__cta--secondary {
  background: #fff;
  color: #2f3430;
  border: 1px solid #d9e0db;
}

/* ===== SEO text block =====
   Matches Figma "RD SEO Text Block" (node 192:900) / "M SEO Text Block"
   (node 192:1097) — plain paragraph copy. Lives inside .dept-roles__main /
   .dept-roles-m (see deptRoles.chunk.html) rather than as its own top-level
   section, so on desktop it shares the roles grid row with the sidebar
   (the .dept-roles__container / .dept-roles-m ancestor already supplies the
   page gutter, so this block adds no side padding of its own). */

.dept-roles__seo-text {
  padding: 96px 0 0;
}

.dept-roles__seo-text p {
  max-width: 915px;
  margin: 0 0 20px;
  padding-left: 61px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: #525954;
}

.dept-roles__seo-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .dept-roles__seo-text {
    padding-top: 48px;
  }

  .dept-roles__seo-text p {
    max-width: none;
    padding-left: 0;
    font-size: 15px;
  }
}

/* ===== Process ("Как мы подбираем специалистов") =====
   Figma Template — Department (3:1007): card + steps share one top edge;
   heading sits in row 1 / col 2; avatar overlaps above the card. */

.dept-process {
  padding: 96px 0 96px;
}

.dept-process__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.dept-process__grid {
  display: grid;
  grid-template-columns: 309px 642px;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 30px;
  align-items: start;
  max-width: 976px;
}

.dept-process__header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 48px;
}

.dept-process__testimonial {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 309px;
  min-height: 424px;
  padding: 103px 17px 24px 30px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(20, 26, 31, 0.04);
}

.dept-process__avatar {
  position: absolute;
  top: -121px;
  left: 57px;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

.dept-process__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.dept-process__name {
  margin: 0 0 2px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #5c5c5c;
}

.dept-process__role {
  margin: 0 0 14px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: #2b2b2b;
}

.dept-process__quote {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.375;
  color: #222522;
}

.dept-process__quote-accent {
  color: var(--color-green, #00af57);
}

.dept-process__quote-mark {
  position: absolute;
  right: 20px;
  bottom: 24px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 700;
  font-size: 90px;
  line-height: 0.7;
  color: rgba(0, 175, 87, 0.22);
  pointer-events: none;
}

.dept-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-green, #00af57);
}

.dept-process__heading {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: #2b2b2b;
}

.dept-process__steps {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: 309px 309px;
  gap: 24px;
}

.dept-process__arrow {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.dept-process__arrow--1 {
  top: -16px;
  left: calc(50% - 45px);
}

.dept-process__arrow--2 {
  top: calc(50% - 45px);
  right: -46px;
}

.dept-process__arrow--3 {
  bottom: -16px;
  left: calc(50% - 45px);
}

.dept-process__step {
  box-sizing: border-box;
  width: 309px;
  min-height: 200px;
  padding: 85px 30px 24px;
  border-radius: 28px;
}

.dept-process__step--white {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #fff;
}

.dept-process__step--green {
  background: var(--color-green, #00af57);
  color: #fff;
}

.dept-process__step--dark {
  background: #003527;
  color: #fff;
}

.dept-process__step-title {
  margin: 0 0 6px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  color: inherit;
}

.dept-process__step--white .dept-process__step-title {
  color: #2b2b2b;
}

.dept-process__step-text {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}

.dept-process__step--white .dept-process__step-text {
  color: #59615c;
}

.dept-process__step--dark .dept-process__step-text {
  color: #c7d9cf;
}

@media (max-width: 767px) {
  .dept-process {
    padding: 48px 0 48px;
  }

  .dept-process__container {
    padding: 0 20px;
  }

  .dept-process__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: none;
  }

  .dept-process__header {
    order: 1;
  }

  .dept-process__testimonial {
    order: 2;
    width: 100%;
    min-height: 0;
    padding: 24px;
    border-radius: 26px;
  }

  .dept-process__avatar {
    position: static;
    width: 84px;
    height: 84px;
    margin: 0 16px 0 0;
    float: left;
  }

  .dept-process__name {
    margin-bottom: 2px;
    font-size: 17px;
    font-weight: 600;
    color: #212522;
  }

  .dept-process__role {
    margin-bottom: 0;
    font-size: 13px;
    color: #8c948f;
  }

  .dept-process__quote {
    clear: both;
    margin-top: 16px;
    font-size: 16px;
  }

  .dept-process__quote-mark {
    position: static;
    align-self: flex-end;
    margin-top: 8px;
    font-size: 69px;
  }

  .dept-process__heading {
    font-size: 23px;
  }

  .dept-process__steps {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .dept-process__arrow {
    display: none;
  }

  .dept-process__step {
    width: auto;
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  .dept-process__step--white {
    flex: 1 0 100%;
  }

  .dept-process__step--green,
  .dept-process__step--dark {
    flex: 1 0 calc(50% - 6px);
    min-width: 0;
  }
}

/* ===== FAQ ("Частые вопросы") =====
   Figma RD FAQ Section (108:655) — same structure as production svc-faq:
   max-width 976px content column, accordion cards, first item open. */

.dept-faq {
  padding: 96px 0 96px;
}

.dept-faq__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.dept-faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 36px;
  max-width: 976px;
}

.dept-faq__title {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dept-faq__contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: #16a560;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}

.dept-faq__contact:hover {
  color: var(--color-green-dark, #169258);
}

.dept-faq__contact-arrow {
  display: inline-block;
  transform: translateY(-1px);
}

.dept-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 976px;
}

.dept-faq__item {
  min-height: 80px;
  padding: 22px 24px 22px 28px;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(20, 26, 31, 0.03);
}

.dept-faq__heading {
  margin: 0;
}

.dept-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.dept-faq__question-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.dept-faq__question-text--open {
  font-weight: 600;
}

.dept-faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #f5f7fa;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.dept-faq__toggle img {
  display: block;
  width: 14px;
  height: 14px;
}

.dept-faq__toggle--open {
  background: #16a560;
}

.dept-faq__question:hover .dept-faq__toggle {
  transform: scale(1.04);
}

.dept-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.dept-faq__item--open .dept-faq__answer {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
}

.dept-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.dept-faq__answer-copy {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #576375;
}

@media (max-width: 767px) {
  .dept-faq {
    padding: 48px 0 48px;
  }

  .dept-faq__container {
    padding: 0 20px;
  }

  .dept-faq__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    max-width: none;
  }

  .dept-faq__title {
    font-size: 28px;
  }

  .dept-faq__contact {
    white-space: normal;
  }

  .dept-faq__list {
    max-width: none;
  }

  .dept-faq__item {
    padding: 18px 18px 18px 20px;
  }

  .dept-faq__question-text {
    font-size: 16px;
  }

  .dept-faq__answer-copy {
    font-size: 14px;
  }
}

/* ===== Final CTA =====
   Reuses production .city-open-lead (home2 styles + Bitrix24 form).
   Only spacing overrides for the department page rhythm. */

.dept-final-cta.city-open-lead {
  margin: 0 auto 96px;
  width: min(100%, 1360px);
}

@media (max-width: 767px) {
  .dept-final-cta.city-open-lead {
    margin: 0 20px 48px;
    width: auto;
  }
}

/* ===== Roles ("Кого подбираем") ===== */

.dept-roles {
  padding: 96px 0 0;
}

.dept-roles__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.dept-roles__heading {
  margin: 0 0 12px;
  padding-left: 32px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 36px;
  color: #222522;
}

.dept-roles__subtext {
  margin: 0 0 32px;
  padding-left: 32px;
  max-width: 720px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 18px;
  color: #6b706b;
}

.dept-roles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  /* stretch (not start): the sidebar column matches the row height so the
     sticky consult card (last child) has room below it to stay pinned while
     the taller main column scrolls past — and releases exactly at the
     bottom of this section, never floating over the full-width sections
     below it (which reserve no sidebar gutter of their own). */
  align-items: stretch;
}

.dept-roles__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ---- Roles card / list ---- */

.dept-roles__card {
  background: #fff;
  border: 1px solid #e8ede8;
  border-radius: 20px;
  overflow: hidden;
}

.dept-roles__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid #e8ede8;
}

.dept-roles__card-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dept-roles__card-title {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 20px;
  color: #222522;
}

.dept-roles__card-count {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  background: #edf7f1;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-green, #00af57);
}

.dept-roles__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  background: #f6f6f5;
  width: 260px;
  max-width: 100%;
}

.dept-roles__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 15px;
  color: #222522;
}

.dept-roles__search-input::placeholder {
  color: #999e99;
}

.dept-roles__rows {
  display: flex;
  flex-direction: column;
}

.dept-roles__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid #edf0ed;
}

.dept-roles__row:last-child {
  border-bottom: none;
}

.dept-roles__row-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.dept-roles__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #edf7f1;
  overflow: hidden;
}

.dept-roles__row-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.dept-roles__row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dept-roles__row-title {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 17px;
  color: #222522;
}

.dept-roles__row-subtitle {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 14px;
  color: #737873;
}

.dept-roles__row-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.dept-roles__row-btn {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-green, #00af57);
  background: #fff;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-green, #00af57);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dept-roles__row-btn:hover {
  background: var(--color-green, #00af57);
  color: #fff;
}

.dept-roles__row-chevron {
  flex-shrink: 0;
}

.dept-roles__empty {
  margin: 0;
  padding: 32px;
  text-align: center;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 15px;
  color: #999e99;
}

/* ---- Not-found CTA plate ---- */

.dept-roles__notfound {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40px 48px;
  border-radius: 24px;
  background: #f1f7f2;
  overflow: hidden;
}

.dept-roles__notfound-bg {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 228px;
  height: 110px;
  background-image: url('/public/dept-page/img/roles/notfound-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

.dept-roles__notfound-fade {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 228px;
  height: 110px;
  background: linear-gradient(90deg, #f1f7f2 0%, rgba(241, 247, 242, 0.35) 55%, rgba(241, 247, 242, 0) 100%);
}

.dept-roles__notfound-text {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.dept-roles__notfound-text h3 {
  margin: 0 0 8px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 24px;
  color: #222522;
}

.dept-roles__notfound-text p {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 16px;
  color: #6b706b;
}

.dept-roles__notfound-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  background: var(--color-green, #00af57);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dept-roles__notfound-btn:hover {
  background: var(--color-green-dark, #169258);
}

/* ---- Sidebar ---- */

.dept-roles__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Belt-and-suspenders alongside align-items: stretch on .dept-roles__grid:
     forces the flex container itself to actually fill the stretched grid
     row height (some engines are inconsistent about grid stretch sizing a
     flex-formatting-context child), giving the sticky consult card (last
     child) room below it to travel the full column height.

     `-96px`: the sticky card's travel range is bounded by this container's
     own height, but .dept-roles__main's last child (.dept-faq) carries a
     96px bottom padding purely for breathing room before the next
     (full-width, no sidebar gutter) CTA section — without this trim, that
     padding counts toward the sticky bound too, so the card keeps pinning
     ~96px past the last FAQ question, all the way down to where the CTA
     section starts, instead of releasing right at the FAQ answer's edge. */
  align-self: stretch;
  height: calc(100% - 96px);
}

.dept-roles__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.dept-roles__sidebar-card {
  border-radius: 20px;
  padding: 20px 24px;
}

.dept-roles__sidebar-card--clients {
  background: #fbfbf9;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dept-roles__sidebar-card--ratings {
  background: #fff;
  border: 1px solid #ebedf2;
  padding: 18px 20px;
}

.dept-roles__sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #6b788c;
}

.dept-roles__sidebar-title {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #0f172a;
}

.dept-roles__sidebar-meta {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 13px;
  color: #6b788c;
}

.dept-roles__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.dept-roles__logo img {
  display: block;
  height: 33px;
  width: auto;
  max-width: 89px;
  object-fit: contain;
  opacity: 0.6;
}

.dept-roles__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e8ede8;
}

.dept-roles__rating:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dept-roles__rating:first-child {
  padding-top: 0;
}

.dept-roles__rating-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dept-roles__rating-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}

.dept-roles__rating-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dept-roles__rating-source {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}

.dept-roles__rating-meta {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 12px;
  color: #6b788c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dept-roles__rating-score {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: #0f172a;
}

.dept-roles__accredited {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px;
  border-radius: 22px;
  background: rgba(28, 36, 31, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dept-roles__accredited-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.dept-roles__accredited-title {
  margin: 0 0 4px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

.dept-roles__accredited-subtitle {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 13px;
  color: #d4dbd6;
}

/* The site header hides itself on scroll-down and reappears on scroll-up
   (see home2/js/main.js toggling .header--hidden) — so the sticky card's
   top offset shrinks to match: a big gap while the header is visible, a
   small one once it's gone, instead of leaving a dead gap above the card. */
body.dept-page .main-content {
  --dept-sidebar-sticky-top: 140px;
}

/* `.main-content` is wrapped in `.dept-tablet-scale-wrap` (needed for the
   tablet scale-height fix below), so it's no longer a direct sibling of
   `.header` — `~ .main-content` stopped matching and this got stuck at
   140px even once the header hid itself. Re-target through the wrapper
   (a sibling of `.header`) down to `.main-content` itself — inheritance
   alone isn't enough here since `.main-content` has its own `140px`
   declared directly on it above, which always wins over an inherited
   value from a parent, no matter the parent's specificity. */
.header.header--hidden ~ .dept-tablet-scale-wrap .main-content {
  --dept-sidebar-sticky-top: 40px;
}

.dept-roles__consult {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e5ebe5;
  box-shadow: 0 4px 14px rgba(20, 26, 31, 0.04);
  position: sticky;
  top: var(--dept-sidebar-sticky-top, 110px);
  z-index: 3;
  transition: top 0.22s ease;
}

.dept-roles__consult-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dept-roles__consult-avatars {
  display: flex;
  align-items: center;
}

.dept-roles__consult-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -10px;
}

.dept-roles__consult-avatar:first-child {
  margin-left: 0;
}

.dept-roles__consult-avatar--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f5f2;
  border: 3px solid #fff;
  box-sizing: border-box;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 11px;
  color: #222522;
}

.dept-roles__consult-title {
  margin: 0 0 2px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: #222522;
}

.dept-roles__consult-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 12px;
  color: var(--color-green, #00af57);
}

.dept-roles__consult-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-green, #00af57);
}

.dept-roles__consult-text {
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 14px;
  line-height: 1.35;
  color: #6b706b;
}

.dept-roles__consult-text strong {
  color: #222522;
  font-weight: 600;
}

.dept-roles__consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--color-green, #00af57);
  box-shadow: 0 4px 14px rgba(0, 175, 87, 0.15);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dept-roles__consult-btn:hover {
  background: var(--color-green-dark, #169258);
}

.dept-roles__consult-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 12px;
  color: #adbdb2;
}

/* ---- "Также подбираем" chips (shared markup, desktop + mobile) ---- */

.dept-roles__also {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dept-roles__also-label {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #222522;
}

.dept-roles__also-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dept-roles__also-chip {
  display: inline-flex;
  padding: 11px 18px;
  border-radius: var(--radius-pill, 999px);
  background: #f5f7f6;
  border: 1px solid #ebf0ed;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: #212522;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dept-roles__also-chip:hover {
  border-color: var(--color-green, #00af57);
  color: var(--color-green, #00af57);
}

@media (max-width: 767px) {
  .dept-roles {
    padding-top: 0;
  }

  .dept-roles__container {
    padding: 0 20px;
  }

  .dept-roles__heading {
    padding-left: 0;
    font-size: 28px;
  }

  .dept-roles__subtext {
    padding-left: 0;
    font-size: 16px;
  }

  .dept-roles__also-chip {
    padding: 8px 12px;
    font-size: 12.5px;
  }
}

/* ===== Roles (mobile) =====
   Matches Figma "RD Mobile Positions" (node 192:1186) — plain rounded card,
   no header/search/sidebar; rows use a circular arrow button instead of the
   desktop pill + chevron. */

.dept-roles-m {
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 767px) {
  /* .dept-only-mobile's own media-query rule forces `display: block
     !important` here (to show the mobile section) — must win that tie
     with !important of our own (same specificity, later in source
     order) so `gap` below actually creates spacing between the row
     card / "also" chips / not-found plate, instead of collapsing them
     flush together. Scoped to this media query (unlike an earlier,
     unconditional version of this rule) so it doesn't also force this
     section to render on desktop, where `.dept-only-mobile`'s base
     `display: none !important` must still win untouched. */
  .dept-roles-m {
    display: flex !important;
  }
}

.dept-roles-m__card {
  background: #fff;
  border: 1px solid #edf2ed;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(20, 26, 31, 0.03);
  overflow: hidden;
}

.dept-roles-m__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #edf2f0;
}

.dept-roles-m__row:last-child {
  border-bottom: none;
}

.dept-roles-m__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #edf7f1;
  overflow: hidden;
}

.dept-roles-m__row-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.dept-roles-m__row-text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dept-roles-m__row-title {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: #212522;
}

.dept-roles-m__row-subtitle {
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-green, #00af57);
}

.dept-roles-m__row-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8f7ed;
  text-decoration: none;
}

/* ---- Not-found CTA (mobile) ---- */

.dept-roles-m__notfound {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: #f1f7f2;
  overflow: hidden;
}

.dept-roles-m__notfound-bg {
  position: absolute;
  right: -6px;
  top: 19px;
  width: 89px;
  height: 43px;
  background-image: url('/public/dept-page/img/roles/notfound-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

.dept-roles-m__notfound-fade {
  position: absolute;
  right: -6px;
  top: 19px;
  width: 89px;
  height: 43px;
  background: linear-gradient(90deg, #f1f7f2 0%, rgba(241, 247, 242, 0.5) 50%, rgba(241, 247, 242, 0) 100%);
}

.dept-roles-m__notfound-title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  max-width: 235px;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: #222522;
}

.dept-roles-m__notfound-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: #6b706b;
}

.dept-roles-m__notfound-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-green, #00af57);
  font-family: var(--font-primary, 'Golos Text', sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

/* ===== Calculator popup =====
   Wraps the shared `calculatorBlock` chunk (a full-width section on
   /kadrovoe-agentstvo/) in a modal opened by the "Рассчитать стоимость"
   button. The chunk brings its own scoped styles (/assets/calculator/
   calculator.css — every rule sits under .calc-wrapper or .overlay), so only
   the shell is styled here. */

.dept-calc-popup {
  /* Above the site header (position: fixed; z-index: 1000). The calculator's
     own confirmation overlay is z-index 1000 but nested inside this element,
     so it still paints above the popup within this stacking context. */
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dept-calc-popup.is-open {
  display: flex;
}

.dept-calc-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 18, 0.55);
  backdrop-filter: blur(3px);
}

.dept-calc-popup__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 26, 18, 0.28);
  animation: dept-calc-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dept-calc-pop {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dept-calc-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 26, 18, 0.06);
  color: #4a524b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.dept-calc-popup__close:hover {
  background: rgba(15, 26, 18, 0.12);
  color: #222522;
}

.dept-calc-popup__body {
  padding: 28px 24px 24px;
}

/* The chunk's wrapper is styled for a standalone page section — flatten its
   own card treatment so it doesn't look like a card inside the modal card. */
.dept-calc-popup__body .calc-wrapper {
  margin: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .dept-calc-popup {
    padding: 12px;
  }

  .dept-calc-popup__dialog {
    border-radius: 18px;
  }

  .dept-calc-popup__body {
    padding: 24px 14px 18px;
  }

  .dept-calc-popup__close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }
}