. */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body.berecruit{background:#FAF8F5;-webkit-font-smoothing:antialiased} body.berecruit main a{color:#0B4FC8;text-decoration:underline} body.berecruit main a:hover{color:#08398F} body.berecruit main summary::-webkit-details-marker{display:none} body.berecruit main ::selection{background:#A8C8F0} /* ---- BeRecruit under the CBD chrome -------------------------------------- The same three debts as BeHR (see behr.css). The fixed nav's height goes on so none of the design's section padding changes. styles.css gives body an inherited line-height and text-rendering the design leaves at their defaults, and h3 a line-height and tracking; all are put back inside

only, so the site's header and footer still match every other page. Anchored sections land flush under the viewport top, the way the design's sticky header had them: the site's floating nav sits over their padding. */ body.berecruit{padding-top:var(--nav-h,0px)} body.berecruit main{line-height:normal;text-rendering:auto} body.berecruit main h3{line-height:normal;letter-spacing:normal} body.berecruit main section[id]{scroll-margin-top:0} /* The closing band is section#contact, an id styles.css also dresses on the home page: white text and two drifting glows, one of them CBD red. Neither belongs on this navy band; the design gives it no pseudo-elements and lets its containers inherit the page's ink. */ body.berecruit section#contact{color:inherit} body.berecruit section#contact::before,body.berecruit section#contact::after{content:none} /* Hover states, from style-hover in the design source. */ .brs1:hover{background:#08398F!important;color:#FFFFFF!important} .brs2:hover{border-color:#0B4FC8!important;color:#08398F!important} .brs3:hover{color:#0B4FC8!important} .brs4:hover{background:#F3EFE9!important} .brs5:hover{background:#08398F!important} .brs6:hover{background:#FFFFFF!important;color:#0C1D33!important} .brs7:hover{border-color:#A8C8F0!important;color:#FFFFFF!important} /* ---- Narrow screens and long words --------------------------------------- Nothing here changes the page at the widths the design was drawn for; each rule is the smallest thing that stops text running out of its box. The handoff says every multi-column block collapses on mobile, but two grids are fixed: the method rows keep three columns, which below ~720px squeezes each title into a column narrower than its longest word, so there the title and body stack beside the number. The bias tables hold at 375px in English and are allowed to hyphenate below that. The translations run longer than the English — German and Russian compounds are wider than a hero column or a step in the seven-step row — so every language but English hyphenates, by the page's own lang — only words of ten letters or more, so body copy is not peppered with hyphens. A word that still cannot fit breaks rather than overflows. The lockup's mark may shrink before its label runs off-screen. */ body.berecruit main{overflow-wrap:break-word} html:not([lang="en"]) body.berecruit main{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4} .br-lockup svg{min-width:0} @media (max-width:720px){ .br-method{grid-template-columns:64px minmax(0,1fr)!important} .br-method>p{grid-column:2} } @media (max-width:420px){.br-bias{-webkit-hyphens:auto;hyphens:auto}} /* ---- Symmetry ------------------------------------------------------------- Asked for by the user on 2026-09-26, after launch: "make it more symmetric". Layout only — every colour, size, typeface and word is still the design's. The page's two-column sections all split 50/50 with a 64px gutter, so that line is the axis everything below is squared to. */ /* The 01–08 numerals set on one width (Space Grotesk's tabular figures), so the titles beside them start on one line instead of wandering with the digit — a "1" is two-thirds the width of a "0". */ body.berecruit main .br-mono{font-variant-numeric:tabular-nums} /* Section band: the links hold the leading edge of the column and "Talk to us" the trailing one, the way the design's header set its nav against the lockup. On a phone the band wraps, and a centred wrap is the even one. */ .br-band>a:last-child{margin-inline-start:auto} @media (max-width:720px){.br-band{justify-content:center}.br-band>a:last-child{margin-inline-start:0}} /* The equation: two equal terms either side of the "+", centred — as BeHR's hero diagram sets its two inputs — instead of one term and a dangling "+" on the first line and the other alone on the second. Stacked on a phone, where two boxes side by side would split "Recruitment" mid-word. */ .br-eq{flex-wrap:nowrap!important;align-items:stretch!important} .br-eq>.br-eq-term{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center} .br-eq>span:not(.br-eq-term){align-self:center} @media (max-width:479px){.br-eq{flex-direction:column}.br-eq>.br-eq-term{flex:none}} /* The two bias tables stand the same height; the shorter one's five rows share out the difference rather than leaving a gap under the card. */ .br-bias-pair{align-items:stretch!important} .br-bias-pair>div{display:flex;flex-direction:column} .br-bias-pair .br-bias{flex:1} /* The method rows put their body text on the section's 50/50 line, directly under the intro paragraph above them, with number and title in the left half. The design's 0.8fr/1.6fr split started the bodies 70px short of it. */ @media (min-width:721px){.br-method{grid-template-columns:64px minmax(0,1fr) calc(50% - 32px)!important}} /* Areas of expertise: heading and intro share a row like every other section head, and the eight areas run in two columns of four beneath them — the handoff's own "8 numbered rows in two columns" — instead of one column of eight beside a short intro and an empty half. */ @media (min-width:721px){ .br-areas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:end} .br-areas>div:first-child{display:contents!important} .br-area-list{grid-column:1/-1!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:64px!important;grid-auto-flow:column;grid-template-rows:repeat(4,auto)} } /* The comparison: the typical recruiter and BeRecruit get equal columns. */ .br-compare{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr)!important} /* Who we serve and the outcomes end on one line: the audience list takes the column's full height, its five rows sharing the space evenly. */ .br-serve-pair>div:first-child>div:last-child{flex:1} .br-serve-pair>div:first-child>div:last-child>div{flex:1} /* FAQ: the heading stays beside the questions while they are read, rather than sitting at the top of an otherwise empty half. Only while the section is two columns — stacked, it would slide over the answers. */ @media (min-width:800px){.br-faq>div:first-child{position:sticky;top:calc(var(--nav-h,76px) + 32px)}} /* Grids that auto-fill would wrap to an orphan at in-between widths (seven steps as 6 + 1, eight cards as 3 + 3 + 2, three cells as 2 + 1) snap to counts that divide evenly instead. */ @media (min-width:1200px){.br-steps{grid-template-columns:repeat(7,minmax(0,1fr))!important}} @media (min-width:721px) and (max-width:1199px){.br-steps{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:12px!important}} @media (max-width:720px){.br-steps{grid-template-columns:minmax(0,1fr)!important}} @media (min-width:1100px){.br-quad{grid-template-columns:repeat(4,minmax(0,1fr))!important}} @media (min-width:560px) and (max-width:1099px){.br-quad{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:559px){.br-quad{grid-template-columns:minmax(0,1fr)!important}} @media (min-width:900px){.br-trio{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media (max-width:899px){.br-trio{grid-template-columns:minmax(0,1fr)!important}} /* ---- Arabic --------------------------------------------------------------- Each rule is the design's own declaration read right to left; none invents a value. The fonts follow the site's RTL rule — Noto Sans Arabic first, the design's family behind it for the Latin runs (BeRecruit, BeHR, CBD, CV) — and uppercase tracking goes, since spacing letters breaks Arabic joins. */ [dir="rtl"] .br-sans{font-family:"Noto Sans Arabic","Inter",sans-serif!important} [dir="rtl"] .br-serif{font-family:"Noto Sans Arabic","Fraunces",Georgia,serif!important} [dir="rtl"] .br-mono{font-family:"Noto Sans Arabic","Space Grotesk",sans-serif!important;letter-spacing:0!important} [dir="rtl"] .br-quote{border-left:0!important;padding-left:0!important;border-right:3px solid #A8C8F0!important;padding-right:24px!important} [dir="rtl"] .br-cell{padding:14px 0 14px 24px!important} [dir="rtl"] .br-answer{padding:0 0 24px 40px!important} [dir="rtl"] .br-step{padding:22px 0 22px 18px!important}