/* ==========================================================================
ALB Global Workforce Solutions - Global Styles

Ported from the meatstaff.com template (same base: lity + owl.carousel).
The one structural change is this token block: the brand palette is defined
once here and referenced as var(--...) throughout, so a rebrand is an edit
to this block rather than a sweep across 36KB.

Brand colours come from images/logo-alb.svg - #216FBF (deep blue) and
#11B1EA (cyan) are the logo's own two colours, used as the gradient pair
wherever the meatstaff template used its red-to-orange gradient.
========================================================================== */
:root {
  /* Brand */
  --brand: #216FBF;
  --brand-grad-start: #216FBF;
  --brand-grad-end: #11B1EA;
  --brand-dark: #204484;
  --brand-accent: #11B1EA;
  /* The old site's primary button colour. Kept as the green end of the
     animated headline so the motion stays inside ALB's own palette. */
  --brand-teal: #54C7CB;
  --brand-gradient: linear-gradient(81.5deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 91.05%);

  /* Neutral text scale - inherited from the base template */
  --ink: #313131;
  --ink-soft: #717171;
  --ink-faint: #888;

  /* Reading measure for long-form body copy on internal pages. */
  --measure: 760px;
  /* Components share the text column. Kept as a separate token so a single
     deliberate breakout can be reintroduced without hunting through rules. */
  --measure-wide: 1060px;
}

html,
body,
div,
form,
fieldset,
legend,
label {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  text-align: left;
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
caption {
  font-weight: normal;
  font-family: 'Poppins', sans-serif;
}
img {
  border: 0;
}
a {
  text-decoration: none;
}
.visually-hidden {
  clip: rect(1px 1px 1px 1px);
  /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  /* added line */
  width: 1px;
}
.visually-hidden:focus {
  position: relative;
  clip: auto;
  width: auto;
  height: auto;
  overflow: auto;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
body {
  font-family: 'Roboto', sans-serif;
  background-color: #fdfdfd;
}
body.overlay {
  overflow-y: hidden;
}
.container {
  max-width: 1170px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
  box-sizing: border-box;
}
.button.primary {
  font-size: 16px;
  color: white;
  padding: 13px 25px;
  text-align: center;
  display: block;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  background-color: var(--brand);
  background: var(--brand-gradient);
  border-radius: 6px;
  position: relative;
  top: 0;
  cursor: pointer;
}
.button.primary:hover {
  transition: 0.2s all ease;
  opacity: 0.85;
}
.button.secondary {
  font-size: 16px;
  color: var(--ink);
  padding: 13px;
  text-align: center;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  background-color: white;
  border: 2px solid #eee;
  border-radius: 6px;
  position: relative;
}
.button.secondary:hover {
  transition: 0.2s all ease;
  background-color: var(--brand);
  background: var(--brand-gradient);
  color: white;
  border-color: transparent;
}
header {
  clear: both;
  padding: 30px 0;
}
header .left {
  float: left;
}
header .right {
  float: right;
}
header .menu .burger-menu {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 20px;
  background: url("../images/menu.svg") no-repeat center;
  display: block;
  position: relative;
  z-index: 10;
}
header .menu .burger-menu.open {
  background: url("../images/close.svg") no-repeat center;
}
header nav {
  display: none;
}
header nav a {
  font-size: 16px;
  color: var(--ink-soft);
  font-family: 'Poppins', sans-serif;
  display: block;
  font-weight: 500;
  float: left;
  margin-right: 20px;
  padding: 13px;
}
header nav a:hover {
  color: var(--brand);
  transition: 0.3s all ease;
}
header nav a.primary {
  margin-right: 0;
}
header nav a.active {
  color: var(--brand);
}
header nav.mobile {
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 100%;
  background: var(--brand);
  background: var(--brand-gradient);
  display: block;
  left: 0;
  top: 0;
  overflow-y: hidden;
}
header nav.mobile a {
  color: white;
  font-size: 30px;
  font-weight: 300;
  float: none;
  width: 100%;
  text-align: right;
  padding: 20px;
  box-sizing: border-box;
  padding-right: 30px;
}
header nav.mobile a:first-child {
  margin-top: 95px;
}
header nav.mobile a.button {
  border: 2px solid white;
  background: transparent;
  font-size: 22px;
  width: 90%;
  margin: 25px auto 0;
  padding: 20px;
}
section {
  clear: both;
  overflow: hidden;
}
.award-banner {
  border: 1px solid #d8d8d8;
  border-radius: 15px;
  box-shadow: 0 10px 20px #0000000d;
}
.intro {
  margin-top: 80px;
}
/* The headline's gradient drifts slowly between the logo's blue and cyan and
   the legacy teal. The stops run out and back so the loop has no seam, the
   sweep is driven by background-position over an oversized background (the
   only property that animates cleanly through background-clip: text), and 18s
   with ease-in-out keeps it at the edge of noticeable rather than busy. */
.intro h1 {
  background: linear-gradient(
    81.5deg,
    var(--brand-grad-start) 0%,
    var(--brand-grad-end) 25%,
    var(--brand-teal) 50%,
    var(--brand-grad-end) 75%,
    var(--brand-grad-start) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-drift 18s ease-in-out infinite;
  color: var(--brand);
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  margin: 30px auto;
  max-width: 700px;
  line-height: 120%;
}
.intro p {
  margin-top: 50px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.intro form {
  margin: 0px auto 0;
  display: table;
}
.intro input {
  font-size: 16px;
}
.intro input[type="email"] {
  border: 2px solid #eee;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  min-width: auto;
}
.intro input[type="email"]:hover {
  transition: 0.2s ease all;
  border-color: var(--brand);
}
.intro input[type="submit"] {
  max-width: 80px;
  border: none;
  display: inline;
  margin-left: 15px;
  padding: 18px 26px;
  float: right;
}
.intro #HireHive_app {
  border-radius: 16px;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 10px 0px #d5d5d5;
  border: 2px solid #eee;
}
.intro #HireHive_app .job-opening a {
  font-size: 1rem;
  color: var(--ink);
}
.info-1 {
  margin-top: 50px;
}
.info-1 .left,
.info-1 .right {
  width: 100%;
  float: none;
  margin-bottom: 40px;
}
.info-1 .right h2 {
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 600;
}
.info-1 .block {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  align-items: center;
}
.info-1 .block .image {
  margin-right: 30px;
  min-width: 120px;
}
.info-1 .block .image img {
  border-radius: 50%;
  overflow: hidden;
}
.info-1 .block h2 {
  font-size: 27px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.info-1 .block p {
  margin-top: 0px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 150%;
}
.info-1 ul {
  margin: 0;
  padding: 0;
}
.info-1 ul li {
  list-style: none;
}
.info-1 ul li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  margin-bottom: 15px;
}
.info-1 ul li a img {
  margin-right: 15px;
  max-width: 32px;
}
.info-1 ul li a h3 {
  margin: 0;
  font-size: 16px;
}
.info-1 ul li .more {
  text-align: center;
  color: var(--ink-soft);
  display: block;
}
.info-2 {
  margin-top: 20px;
}
.info-2 h2 {
  color: var(--ink);
  font-size: 37px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 120%;
}
.info-2 p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 170%;
}
.info-2 p strong {
  color: var(--brand);
}
.info-2 a.button {
  display: table;
  margin: 30px auto 0;
}
.info-2 img {
  margin: 0 auto;
  display: block;
}
.info-2 .left,
.info-2 .right {
  width: 100%;
  float: none;
  margin-bottom: 40px;
  text-align: center;
}
.internal h1 {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);
  font-size: 42px;
  font-weight: bold;
  text-align: left;
  margin: 30px auto 20px;
  font-weight: 600;
  line-height: 120%;
}
.internal h2 {
  color: var(--ink);
  font-size: 24px;
  margin-bottom: 5px;
  font-weight: 600;
}
.internal h3 {
  color: var(--ink);
  font-size: 22px;
  margin-bottom: 5px;
  font-weight: 600;
}
.internal p {
  margin-top: 5px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 150%;
}
.internal ul li {
  color: var(--ink-soft);
}
.internal .stats {
  display: block;
  margin-bottom: 70px;
  overflow: hidden;
}
.internal .stats .block {
  float: none;
  width: 100%;
  margin-bottom: 30px;
}
.internal .stats .block strong {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);
  font-size: 60px;
  font-weight: bold;
  text-align: left;
  margin: 30px auto 10px;
  font-weight: 600;
  line-height: 120%;
}
.internal .stats .block p {
  margin: 0;
  font-size: 20px;
  color: var(--ink);
}
.internal .reviews {
  text-align: center;
  padding: 80px 0;
}
.internal .reviews h2 {
  margin-bottom: 30px;
}
.internal .reviews img {
  width: auto;
  margin: 10px auto;
}
.internal .reviews blockquote {
  color: var(--ink-soft);
  font-size: 25px;
  max-width: none;
  margin: 0 auto;
  font-weight: 300;
}
.internal .reviews blockquote cite {
  font-size: 18px;
  color: var(--ink);
  display: block;
  font-style: normal;
  margin-top: 10px;
}
.internal .reviews .owl-dots {
  margin-top: 20px;
}
.internal .reviews .owl-dots button {
  background: var(--ink-soft);
  border-radius: 50%;
  margin: 0px 10px;
  width: 15px;
  height: 15px;
}
.internal .reviews .owl-dots button.active {
  background-color: var(--brand);
}
.about-us-page .about-us {
  margin: 20px auto;
}
.about-us-page .about-us .left,
.about-us-page .about-us .right {
  float: none;
  width: 100%;
}
.about-us-page .about-us p {
  margin-top: 5px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 150%;
}
.about-us-page .about-us img {
  border-radius: 6px;
}
.about-us-page .links {
  margin-bottom: 70px;
}
.about-us-page .links .left,
.about-us-page .links .right {
  width: 100%;
  float: none;
}
.about-us-page .links .left {
  background-color: #f7f7f7;
  padding: 25px;
  box-sizing: border-box;
  border-radius: 6px;
  margin-bottom: 30px;
}
.about-us-page .links .left a {
  display: table;
  margin-top: 20px;
}
.about-us-page .links .left img {
  max-width: 130px;
}
.about-us-page .links .right {
  border: 2px solid #eee;
  border-radius: 6px;
  padding: 25px;
  overflow: hidden;
  box-sizing: border-box;
}
.about-us-page .links .right img {
  float: left;
  width: 30%;
  box-sizing: border-box;
  display: none;
}
.about-us-page .links .right .info {
  float: right;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0px;
}
.about-us-page .links .right .info h2 {
  margin-top: 0px;
  font-size: 28px;
  line-height: 130%;
}
.about-us-page .links .right .info p {
  font-size: 17px;
  line-height: 130%;
  color: var(--ink-soft);
  margin: 5px 0 15px;
}
.about-us-page .links .right .info a {
  display: table;
}
.about-us-page .values {
  display: block;
}
.about-us-page .values h2 {
  margin-bottom: 0px;
}
.about-us-page .values .clear {
  clear: both;
}
.about-us-page .values .block {
  width: 50%;
  float: left;
  padding-right: 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.about-us-page .values .block.right {
  padding-left: 20px;
  padding-right: 0px;
}
.about-us-page .values .block h3 {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
}
.about-us-page .values .block p {
  margin-top: 5px;
  font-size: 17px;
  color: var(--ink-soft);
}
.about-us-page .values .block .left {
  float: left;
  padding-right: 25px;
  box-sizing: border-box;
  width: 25%;
}
.about-us-page .values .block .right {
  float: left;
  box-sizing: border-box;
  width: 100%;
}
.about-us-page .values .block img {
  border-radius: 50%;
  display: none;
}
.services-page .intro-employers {
  margin: 40px auto;
}
.services-page .intro-employers h1 {
  margin: 15px 0 10px;
}
.services-page .intro-employers h2 {
  margin-bottom: 10px;
}
.services-page .intro-employers .left {
  width: 100%;
  display: none;
}
.services-page .intro-employers .right {
  width: 100%;
}
.services-page .intro-employers .right ul {
  margin: 0;
  padding: 0;
}
.services-page .intro-employers .right ul li {
  box-sizing: border-box;
  list-style: none;
  width: 100%;
}
.services-page .intro-employers .right ul li div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  margin-bottom: 15px;
}
.services-page .intro-employers .right ul li div img {
  margin-right: 15px;
  min-width: 33px;
  max-height: 33px;
}
.services-page .intro-employers .right ul li div h3 {
  margin: 0;
  text-align: left;
  font-size: 16px;
  font-weight: normal;
}
.services-page .intro-employers .right ul li div:hover {
  cursor: inherit;
  color: inherit;
  background: #fafafa;
  border: 2px solid #eee;
}
.services-page .intro-employers .right ul li .more {
  text-align: center;
  color: var(--ink-soft);
  display: block;
}
.services-page .intro-employers img {
  border-radius: 6px;
}
.services-page .services .row {
  display: block;
}
.services-page .services .block {
  margin-bottom: 40px;
}
.services-page .services .block img {
  border-radius: 6px;
}
.services-page .services .block .left {
  width: 100%;
}
.services-page .services .block .right {
  width: 100%;
}
.services-page .services .wide {
  float: none;
  width: 100%;
  max-width: none;
  clear: both;
  overflow: hidden;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column-reverse;
}
.services-page .services .wide h3 {
  margin-top: 30px;
}
.services-page .services .wide strong {
  color: var(--ink);
  font-size: 18px;
  padding-bottom: 20px;
  margin-top: 30px;
  display: block;
}
.services-page .services .wide img {
  float: right;
}
.services-page .services .wide ul {
  margin: 0;
  padding: 0;
}
.services-page .services .wide ul li {
  list-style: none;
  width: 100%;
  float: left;
  list-style-image: url("../images/tick.svg");
  list-style-position: inside;
  margin-bottom: 15px;
}
.services-page .services .wide ul li p {
  display: inline;
  line-height: 184%;
  vertical-align: bottom;
}
.services-page .stats {
  clear: both;
  margin: 40px 0 50px;
}
.services-page .videos {
  margin-bottom: 70px;
}
.services-page .videos .container {
  padding: 0;
}
.services-page .videos h2 {
  margin-left: 20px;
}
.services-page .videos .owl-carousel {
  margin-left: 20px;
}
.services-page .videos .video {
  height: 100%;
  width: auto;
  border-radius: 6px;
  background-color: #eee;
  display: block;
  overflow: hidden;
  position: relative;
}
.services-page .videos .video:hover img {
  transition: 0.3s ease all;
  transform: scale(1.03);
}
.services-page .videos .video:hover span {
  transform: scale(1.1);
  transition: 0.3s ease all;
  opacity: 1;
}
.services-page .videos .video span {
  background: url("../images/play.svg") no-repeat center;
  margin: -30px 0 0 -30px;
  display: block;
  width: 61px;
  height: 61px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0.8;
}
.services-page .videos .video img {
  object-fit: cover;
}
.services-page .trust {
  display: block;
  margin-bottom: 100px;
}
.services-page .trust .block {
  width: 100%;
  margin-bottom: 30px;
  float: left;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  box-sizing: border-box;
}
.services-page .trust .block .image {
  width: 100%;
  margin-bottom: 10px;
}
.services-page .trust .block .text {
  width: 100%;
}
.services-page .trust .block .text h3 {
  margin-top: 0;
}
.services-page .trust .block .text p {
  margin-bottom: 0;
  font-size: 16px;
}
.services-page .contact {
  text-align: center;
  margin-bottom: 100px;
}
.services-page .contact h2 {
  font-size: 38px;
  max-width: 600px;
  margin: auto;
  line-height: 120%;
}
.services-page .contact .action {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 30px 0;
}
.services-page .contact a {
  max-width: 250px;
}
.services-page .contact p {
  margin: 20px;
  font-size: 18px;
}
.for-candidates-page .intro-candidates {
  margin: 20px auto;
  display: flex;
  flex-direction: column-reverse;
}
.for-candidates-page .intro-candidates .left,
.for-candidates-page .intro-candidates .right {
  float: none;
  width: 100%;
}
.for-candidates-page .intro-candidates h1,
.for-candidates-page .intro-candidates h2 {
  margin: 15px 0 0;
}
.for-candidates-page .intro-candidates h2 {
  margin-top: 10px;
}
.for-candidates-page .intro-candidates .languages {
  padding: 9px 0;
  padding-right: 30px;
  display: table;
  color: var(--ink-soft);
  font-size: 15px;
}
.for-candidates-page .intro-candidates .languages:hover {
  color: var(--brand);
  text-decoration: underline;
}
.for-candidates-page .intro-candidates p {
  margin-top: 5px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 150%;
}
.for-candidates-page .intro-candidates img {
  border-radius: 6px;
  margin-bottom: 30px;
}
.for-candidates-page .reviews {
  padding: 40px 0;
}
.for-candidates-page .three-blocks {
  margin: 40px auto;
  display: block;
}
.for-candidates-page .three-blocks .block {
  margin-bottom: 40px;
}
.for-candidates-page .three-blocks .block img {
  border-radius: 6px;
}
.for-candidates-page .register {
  margin: 140px auto 180px;
  text-align: center;
}
.for-candidates-page .register h2 {
  font-size: 36px;
  max-width: 600px;
  margin: auto;
  line-height: 130%;
  margin-bottom: 30px;
}
.for-candidates-page .register a {
  margin: auto;
  max-width: 250px;
}
.candidate {
  background-color: #fafafa;
  padding: 15px 0;
  width: 100%;
}
.candidate .container {
  flex-direction: row;
}
.candidate .left {
  overflow: hidden;
}
.candidate .left h3 {
  max-width: none;
  float: none;
  text-align: center;
  margin: 0;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 140%;
}
.candidate .left a {
  float: none;
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0;
  text-align: center;
  display: block;
  padding: 13px;
  clear: both;
}
.candidate .left,
.candidate .right {
  float: none;
  width: 100%;
}
footer {
  background-color: #161616;
  padding: 65px 0 0;
  width: 100%;
  color: var(--ink-faint);
}
footer .container {
  display: block;
}
footer .block {
  margin-bottom: 35px;
}
footer .block img.logo {
  /* ALB's SVGs carry a viewBox but no width/height, so without an explicit
     size the logo stretches to fill the footer column. Same trap as the
     header mark. */
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}
footer .block ul {
  margin: 0px;
}
footer .block ul li {
  list-style: none;
  float: left;
}
footer .block h4 {
  color: white;
  font-size: 17px;
  margin: 0 0 15px;
}
footer .block nav a {
  color: var(--ink-faint);
  display: block;
  padding: 5px 0;
}
footer .block nav a:hover {
  color: var(--brand);
  text-decoration: underline;
}
footer .block address {
  font-style: normal;
  margin-top: 2px;
}
footer .block address img {
  margin: 0px 7px -2px 2px;
}
footer .block #mc_embed_signup input {
  box-sizing: border-box;
}
footer .block #mc_embed_signup input[type="email"] {
  padding: 16px;
  border: none;
  font-size: 16px;
  color: var(--ink-soft);
  border-radius: 6px;
  margin-right: 10px;
  width: 70%;
}
footer .block #mc_embed_signup input[type="submit"] {
  float: right;
  border: none;
  width: 25%;
}
footer .block .info {
  color: var(--ink-faint);
}
footer .block .info a {
  color: var(--ink-faint);
  display: block;
  padding: 3px;
}
footer .block .info a:hover {
  color: var(--brand);
  text-decoration: underline;
}
footer .block.newsletter p {
  margin-bottom: 10px;
}
footer .block.social {
  margin-bottom: 0;
}
footer .block.social ul {
  padding: 0;
  overflow: hidden;
}
footer .block.social ul li a {
  display: block;
  width: 47px;
  height: 47px;
  margin-right: 15px;
}
footer .block.social ul li a:hover {
  opacity: 0.9;
}
footer .block.social ul li.facebook a {
  background: url("../images/facebook.svg") no-repeat center;
}
footer .block.social ul li.linkedin a {
  background: url("../images/linkedin.svg") no-repeat center;
}
footer .block.social ul li.instagram a {
  background: url("../images/instagram.png") no-repeat center;
  background-size: contain;
}
footer .copyright {
  background-color: #0D0D0D;
  margin-top: 65px;
  text-align: center;
}
footer .copyright ul {
  padding: 0;
  overflow: hidden;
}
footer .copyright ul li {
  list-style: none;
  float: none;
}
footer .copyright ul li a {
  display: table;
  margin: auto;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: white;
  opacity: 0.4;
}
footer .copyright ul li a:hover {
  text-decoration: underline;
}
footer .copyright p {
  font-size: 14px;
  color: white;
  opacity: 0.4;
  margin: 15px 0 0;
}
@media (min-width: 768px) {
  header .menu .burger-menu {
    display: none;
  }
  header .menu nav {
    display: block;
  }
  .intro h1 {
    font-size: 52px;
  }
  .intro input[type="email"] {
    min-width: 350px;
  }
  .info-1 {
    margin-top: 160px;
  }
  .info-1 .left {
    width: 65%;
    float: left;
    padding-right: 30px;
    box-sizing: border-box;
    margin-bottom: 0px;
  }
  .info-1 .right {
    width: 30%;
    float: right;
    margin-bottom: 0px;
  }
  .info-1 .block {
    margin-bottom: 40px;
  }
  .info-1 .block .image {
    min-width: 135px;
  }
  .info-1 .block p {
    font-size: 18px;
  }
  .info-2 {
    margin: 100px 0;
  }
  .info-2 h2 {
    margin-top: 0;
  }
  .info-2 .left {
    width: 60%;
    float: none;
    margin: 0 auto;
    padding-right: 0;
    box-sizing: border-box;
    margin-bottom: 0px;
    text-align: center;
  }
  .info-2 a.button {
    margin: 30px auto 0;
  }
  .candidate .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .candidate .container .left h3 {
    max-width: 250px;
    float: left;
    text-align: left;
    margin-bottom: 0px;
    margin-top: 8px;
  }
  .candidate .container .left a {
    float: left;
    max-width: 250px;
    clear: none;
  }
  .candidate .container .right {
    float: right;
  }
  .candidate .container .right img {
    float: right;
  }
  footer .block {
    margin-bottom: 0px;
  }
  footer .container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  footer .copyright ul li {
    float: left;
  }
  footer .copyright ul li a {
    display: table;
    margin: auto;
    margin-right: 20px;
    width: 100%;
    text-align: left;
  }
  .internal .stats {
    display: flex;
    justify-content: space-between;
  }
  .internal .stats .block {
    width: 18%;
    float: left;
  }
  .internal .reviews blockquote {
    font-size: 32px;
  }
  .about-us-page .about-us {
    margin: 70px auto;
  }
  .about-us-page .about-us .left {
    float: left;
    width: 40%;
  }
  .about-us-page .about-us .right {
    float: right;
    width: 55%;
  }
  .about-us-page .values h2 {
    margin-bottom: 30px;
  }
  .about-us-page .values .block img {
    display: block;
  }
  .about-us-page .values .block .right {
    width: 75%;
  }
  .about-us-page .links .left {
    float: left;
    width: 40%;
  }
  .about-us-page .links .right {
    float: right;
    width: 55%;
    padding: 0px 20px 0 20px;
  }
  .about-us-page .links .right img {
    display: block;
  }
  .about-us-page .links .right .info {
    width: 70%;
    padding-left: 25px;
  }
  .about-us-page .links .right .info h2 {
    margin-top: 25px;
  }
  .services-page .intro-employers {
    margin: 70px auto;
  }
  .services-page .intro-employers .left {
    float: left;
    width: 40%;
    margin-right: 5%;
    display: block;
  }
  .services-page .intro-employers .right {
    float: left;
    width: 55%;
  }
  .services-page .intro-employers .right ul li {
    width: 50%;
    float: left;
    padding-right: 10px;
    padding-left: 0;
  }
  .services-page .intro-employers .right ul li:nth-child(2n) {
    padding-left: 10px;
    padding-right: 0px;
  }
  .services-page .services .row {
    display: flex;
    justify-content: space-between;
  }
  .services-page .services .block {
    max-width: 30%;
    margin-bottom: 0;
  }
  .services-page .services .block img {
    border-radius: 6px;
  }
  .services-page .services .block .left {
    width: 40%;
    float: left;
  }
  .services-page .services .block .right {
    width: 55%;
    float: left;
    margin-left: 5%;
  }
  .services-page .services .wide {
    max-width: none;
    display: block;
    margin-bottom: 50px;
  }
  .services-page .services .wide ul li {
    width: 50%;
    float: left;
  }
  .services-page .stats {
    margin: 60px 0 70px;
  }
  .services-page .stats .block {
    margin-bottom: 0px;
  }
  .services-page .videos {
    margin-bottom: 70px;
  }
  .services-page .videos .owl-carousel {
    margin-left: 0px;
  }
  .services-page .videos h2 {
    margin-left: 0px;
  }
  .services-page .trust {
    display: flex;
    justify-content: space-between;
  }
  .services-page .trust .block {
    width: 47.5%;
    margin-bottom: 0px;
  }
  .services-page .trust .block .image {
    float: left;
    width: 16%;
    margin-bottom: 0px;
  }
  .services-page .trust .block .text {
    float: left;
    width: 84%;
  }
  .services-page .contact .action {
    flex-direction: row;
  }
  .services-page .contact p {
    margin: 0 20px;
  }
  .for-candidates-page .intro-candidates {
    margin: 70px auto;
    display: block;
  }
  .for-candidates-page .intro-candidates .left {
    float: left;
    width: 40%;
  }
  .for-candidates-page .intro-candidates .left a {
    max-width: 200px;
  }
  .for-candidates-page .intro-candidates .right {
    float: right;
    width: 55%;
  }
  .for-candidates-page .three-blocks {
    display: flex;
    justify-content: space-between;
    margin: 70px auto;
  }
  .for-candidates-page .three-blocks .block {
    max-width: 30%;
  }
  .general {
    padding-bottom: 70px;
  }
}

/* Header language switcher (replaces inline style on the EN/PT link) */
header nav a.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* The nav is a float layout, so align-self does nothing here. Both the
     switcher and the CTA float from the same top edge; matching the button's
     rendered height (51px = 16px Poppins + 13px padding) is what actually
     centres the two against each other. */
  min-height: 51px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ==============================
   Professionals Carousel
   ============================== */

/* ── Hire Modal ───────────────────────────────────────────────────────────── */
.hire-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.hire-modal-overlay.is-open {
  display: flex;
}
.hire-modal {
  position: relative;
  background: rgba(255,255,255,0.97);
  border-radius: 20px;
  max-width: 580px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  margin: auto;
}
.hire-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
}
.hire-modal__close:hover { color: var(--ink); }
.hire-modal__hero {
  width: 100%;
  height: 302px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}
.hire-modal__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hire-modal__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.hire-modal__text {
  text-align: center;
}
.hire-modal__subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 13px;
  line-height: 1.4;
}
.hire-modal__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.2;
  background: linear-gradient(23.97deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 91.05%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.hire-modal__features {
  display: flex;
  width: 100%;
  gap: 0;
}
.hire-modal__list {
  flex: 1;
  list-style: none;
  padding: 0 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hire-modal__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #353535;
  padding: 4px 0;
}
.hire-modal__list li img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.hire-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 8px;
}
.hire-modal__book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(47.06deg, var(--brand-grad-start) 5.95%, var(--brand-grad-end) 124.81%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 6px;
  padding: 14px 48px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.hire-modal__book-btn img { width: 24px; height: 24px; }
.hire-modal__book-btn:hover { opacity: 0.88; color: #fff; }
.hire-modal__email-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #353535;
  text-decoration: none;
}
.hire-modal__email-link:hover { text-decoration: underline; color: #353535; }
body.modal-open { overflow: hidden; }


@media (max-width: 600px) {
  .hire-modal__title { font-size: 26px; }
  .hire-modal__features { flex-direction: column; }
  .hire-modal__hero { height: 180px; }
  .hire-modal__list { padding: 0 8px; }
}

/* ── Reviews section on EN homepage ─────────────────────────────────────── */
.home-en-page .reviews {
  text-align: center;
  padding: 80px 0;
}
.home-en-page .reviews h2 {
  margin-bottom: 30px;
}
.home-en-page .reviews img {
  width: auto;
  margin: 10px auto;
}
.home-en-page .reviews blockquote {
  color: var(--ink-soft);
  font-size: 25px;
  max-width: none;
  margin: 0 auto;
  font-weight: 300;
}
.home-en-page .reviews blockquote cite {
  font-size: 18px;
  color: var(--ink);
  display: block;
  font-style: normal;
  margin-top: 10px;
}
.home-en-page .reviews .owl-dots {
  margin-top: 20px;
}
.home-en-page .reviews .owl-dots button {
  background: var(--ink-soft);
  border-radius: 50%;
  margin: 0 10px;
  width: 15px;
  height: 15px;
}
.home-en-page .reviews .owl-dots button.active {
  background-color: var(--brand);
}

/* ==========================================================================
ALB additions

Everything above this line is the shared template, ported from meatstaff.com.
Everything below is specific to ALB's page set: the landing-page stats band,
the hero lead/actions, and the licence marks. Kept in one block at the end so
the shared part stays diffable against the sibling repo.
========================================================================== */

@keyframes brand-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Anyone who has asked their system to stop animations gets the headline held
   at its starting blue rather than a frozen mid-sweep colour. */
@media (prefers-reduced-motion: reduce) {
  .intro h1 {
    animation: none;
    background-position: 0% 50%;
  }
}

/* Landing hero */
.intro-lead {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  color: var(--ink-soft);
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.intro-actions .button {
  display: inline-block;
}

/* Outline counterpart to .button.primary, for a secondary hero action. */
.button.secondary-outline {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--brand);
  background: transparent;
  border: 2px solid var(--brand);
  /* 6px, matching every other button on the site. The 2px border plus 11/23
     padding adds up to .button.primary's 13/25 box, so the pair sits at
     identical height rather than the outline reading a couple of pixels
     taller. */
  border-radius: 6px;
  padding: 11px 23px;
  text-align: center;
}
.button.secondary-outline:hover {
  background: var(--brand);
  color: #fff;
}

/* Stats band. The template only styles .stats under body.internal; the landing
   page needs the same treatment without inheriting the rest of .internal. */
.stats {
  display: block;
  margin: 60px 0;
  overflow: hidden;
  text-align: center;
}
.stats .block {
  width: 100%;
  margin-bottom: 26px;
}
.stats .block strong {
  display: block;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);
  font-family: 'Poppins', sans-serif;
  font-size: 46px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 6px;
}
.stats .block p {
  margin: 0;
  font-size: 16px;
  line-height: 150%;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .stats {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .stats .block {
    flex: 1;
    margin-bottom: 0;
  }
}

/* Licence marks — the For Employers copy makes an explicit licensing claim, so
   the licence number is shown rather than merely implied. */
.licence-badge {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 160%;
  color: var(--ink-soft);
  text-align: right;
}
.licence-badge strong {
  color: var(--ink);
  font-weight: 700;
}
footer .info .licence {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 150%;
  opacity: 0.75;
}

/* Reciprocal cross-link to the Meat Staff division, sitting with the socials. */
footer .meatstaff-mark {
  display: inline-block;
  margin-top: 18px;
  opacity: 0.8;
}
footer .meatstaff-mark:hover {
  opacity: 1;
}
footer .meatstaff-mark img {
  height: 26px;
  width: auto;
  display: block;
}

/* Internal pages use the same stats band as the landing page. The template
   styled these differently (60px, left-aligned); unified here so a visitor
   moving between Home and For Employers sees one treatment. */
.internal .stats .block strong {
  font-size: 46px;
  text-align: center;
  margin: 0 0 6px;
}
.internal .stats .block p {
  font-size: 16px;
  color: var(--ink-soft);
}
.internal .stats {
  text-align: center;
  margin-bottom: 60px;
}

/* Long-form content sections (About, integrity statements, legal pages). */
.prose,
.integrity,
.who-we-recruit,
.steps-section {
  margin: 0 0 60px;
}
.prose h2,
.integrity h2,
.who-we-recruit h2,
.steps-section h2 {
  margin-top: 40px;
}
.prose > p:first-of-type {
  margin-top: 0;
}

/* A pull-quote weight lead line, used under page titles and to close sections. */
.section-lead {
  font-size: 20px;
  line-height: 155%;
  font-weight: 600;
  color: var(--brand);
}
.section-note {
  font-size: 16px;
  color: var(--ink-soft);
}
.section-note a {
  color: var(--brand);
  font-weight: 600;
}

/* The 14 critical-skills roles. A plain list at these lengths wastes most of the
   line, so it wraps into columns and collapses to one on narrow screens. */
.role-list {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 30px;
}
.role-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 150%;
  color: var(--ink-soft);
}
.role-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-gradient);
}

@media (min-width: 700px) {
  .role-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Numbered process steps — replaces the template's photo-led services row,
   which needed six pieces of photography ALB does not have. */
.steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: none;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid #eee;
}
.step:last-child {
  border-bottom: 1px solid #eee;
}
.step__num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.step__body h3 {
  margin: 6px 0 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.step__body p {
  margin: 0;
  font-size: 16px;
  line-height: 155%;
  color: var(--ink-soft);
}

/* ── Meat Staff cross-promotion callout ── */
.cross-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0 0;
    border-top: 1px solid #e8e8e8;
    margin-top: 24px;
    text-align: center;
}
.cross-promo__logo {
    height: 18px;
    opacity: 0.75;
    flex-shrink: 0;
}
.cross-promo__text {
    font-size: 12px;
    color: var(--ink-faint);
    margin: 0;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif;
}
.cross-promo__link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}
.cross-promo__link:hover {
    text-decoration: underline;
    color: var(--brand);
}

/* ── Fixes found in browser testing ──────────────────────────────────────── */

/* The ALB logos carry a viewBox but no width/height attributes, so the header
   img collapsed to nothing. The footer logo was unaffected only because
   `footer .block img.logo` sizes it. Size the header one explicitly. */
header .left img {
  height: 56px;
  width: auto;
  display: block;
}

/* `.intro p` and `.internal p` both out-specify a bare class, which made every
   lead paragraph inherit body copy weight. Qualify to win. */
.intro p.intro-lead {
  margin-top: 18px;
  font-weight: 400;
  color: var(--ink-soft);
}
.internal p.section-lead,
p.section-lead {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
  line-height: 155%;
}
.internal p.section-note {
  font-size: 16px;
  color: var(--ink-soft);
}

/* `.candidate .left a` is width:100% in the base sheet; on desktop it is also
   floated next to the heading, so a heading longer than meatstaff's collided
   with the button. Lay the pair out as a flex row instead of two floats. */
@media (min-width: 768px) {
  .candidate .container .left {
    display: flex;
    align-items: center;
    gap: 26px;
    overflow: visible;
  }
  .candidate .container .left h3 {
    float: none;
    max-width: 420px;
    margin: 0;
  }
  .candidate .container .left a {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    white-space: nowrap;
  }
}

/* Buttons inside long-form copy are wrapped in <p>, which stretched them to the
   full column width. */
.prose a.button,
.integrity a.button {
  display: inline-block;
  width: auto;
}

/* Inline links in body copy should read as brand links, not browser defaults. */
.prose a:not(.button),
.integrity a:not(.button),
.general a:not(.button) {
  color: var(--brand);
  font-weight: 500;
}
.prose a:not(.button):hover,
.integrity a:not(.button):hover,
.general a:not(.button):hover {
  text-decoration: underline;
}

/* Breathing room between the cross-promo callout and the note that follows it. */
.who-we-recruit .section-note {
  margin-top: 22px;
}

/* Long-form sections on the landing page span the full 1200px container, which
   is far past a comfortable reading measure. Cap the text, not the section, so
   the steps and headings keep their full-width rhythm. */
.integrity p,
.steps-section > p,
.who-we-recruit > p {
  max-width: 820px;
}

/* ==========================================================================
Talent carousel

Ported from meatstaff's employer homepage (index-en.html). Two adaptations:
the headline metric is Experience + English rather than meat-specific knife
skills, and there is no play badge over the photo - meatstaff's is decorative
and opens the enquiry modal, which promises a video that does not exist.

The profiles are illustrative, exactly as meatstaff's are. The blurred email is
the point of the device: it shows an employer that contact details are what the
engagement unlocks.
========================================================================== */
.professionals {
  overflow: visible;
  padding: 20px 0 60px;
  background: #fff;
}
.professionals__heading {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 36px;
  font-weight: 400;
}
.professionals__heading strong {
  color: var(--ink);
  font-weight: 700;
}

.pro-carousel-outer {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 36px 0;
  margin: -36px 0;
  box-sizing: border-box;
}
.pro-carousel-track {
  display: flex;
  gap: 24px;
  width: max-content;
}

.pro-card {
  width: 320px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.pro-card__photo {
  position: relative;
  height: 190px;
  overflow: hidden;
  cursor: pointer;
}
/* Descendant, not child: the <img> is nested inside a <picture> so the browser
   can pick the WebP and fall back to the JPEG. */
.pro-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pro-card__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pro-card__body {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pro-card__identity {
  padding-top: 8px;
}
.pro-card__name {
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.pro-card__role {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}

.pro-card__stats {
  background: #fafafa;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.pro-card__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
}
.pro-card__stat:first-child { padding-top: 0; }
.pro-card__stat:last-child { padding-bottom: 0; }
.pro-card__stat + .pro-card__stat { border-top: 1px solid #ebebeb; }

.pro-card__stat-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-faint);
}
/* Plain text values (Experience, English) sit where meatstaff had knife icons. */
.pro-card__stat-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

.pro-card__badge {
  background: #fff;
  border-radius: 100px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.pro-card__badge img { flex-shrink: 0; display: block; }
.pro-card__badge--green { color: #00a88f; }
.pro-card__badge--orange { color: #e07b1f; }

/* Deliberately CSS-only: the address is illustrative, and the blur is the
   sales device - contact details are what engaging ALB unlocks. */
.pro-card__blurred {
  filter: blur(4px);
  user-select: none;
  color: var(--ink);
}

.pro-card__cta {
  display: block;
  text-align: center;
  padding: 12px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pro-card__cta:hover {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}

/* The marquee is motion nobody asked for; honour a reduced-motion preference
   by stopping it and letting the track scroll manually instead. */
/* A 320px card plus gutters overflows the narrowest phones. */
@media (max-width: 400px) {
  .pro-card {
    width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pro-carousel-outer {
    overflow-x: auto;
  }
  .pro-carousel-track {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Bilingual + social-proof components (added with the EN/PT rebuild)
   --------------------------------------------------------------------------- */

/* Language switcher. Borderless and quiet — it is a utility, not a call to
   action, so it must not compete with the CTA button beside it. Centred on the
   nav's own vertical axis rather than the text baseline, so the flag does not
   sit low against the neighbouring links. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 0;
  padding: 5px 4px;
  color: var(--ink-soft);
  line-height: 1;
}
.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--brand);
  background: none;
}
.lang-switch__flag {
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

/* The group-wide caveat under the stats bar. Small, but it must stay legible:
   without it the figures read as ALB's alone rather than ALB + Meat Staff. */
.stats-disclosure {
  margin: -34px 0 60px;
  text-align: center;
  font-size: 13px;
  line-height: 150%;
  color: var(--ink-faint);
}

.testimonials {
  margin: 70px 0;
}
.testimonials h2 {
  text-align: center;
  margin-bottom: 34px;
}
.testimonial-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.testimonial {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 26px 28px;
}
.testimonial__stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.testimonial blockquote {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 165%;
  color: var(--ink);
}
.testimonial__who {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--ink);
}
.testimonial__role {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 150%;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .testimonial-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-list.is-three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===========================================================================
   INTERNAL PAGE LAYOUT
   ---------------------------------------------------------------------------
   Everything below is scoped to `.internal`, which every page except the
   homepage carries. Before this block the only hero/rounding rules were scoped
   to `.about-us-page`, so Services, For Candidates and the legal pages had no
   hero layout at all — the image simply stacked under the text at its natural
   size with square corners.

   Three things drive the rhythm:
     1. A heading belongs to the text under it, so the gap ABOVE a heading is
        always larger than the gap below it. The old 5px/40px pairing grouped
        headings with the wrong paragraph.
     2. Body copy gets a reading measure. Full-container prose ran to roughly
        150 characters a line.
     3. One spacing scale (8 / 16 / 24 / 32 / 56) instead of ad-hoc values.
   =========================================================================== */

/* --- Hero: copy beside the image, not stacked above it -------------------- */
.internal .about-us {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin: 24px 0 56px;
}
.internal .about-us .left,
.internal .about-us .right {
  float: none;
  width: auto;
  min-width: 0;
}
.internal .about-us .right img,
.internal .about-us img.img-fluid {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}
.internal .about-us h1 {
  margin-bottom: 12px;
}
.internal .about-us .section-lead {
  margin: 0 0 16px;
}
.internal .about-us .intro-actions {
  display: flex;
  flex-wrap: wrap;
  /* The base rule centres these, which is right for the homepage's centred
     hero but wrong here: the internal hero is a left-aligned text column, so
     centred buttons sit adrift of the copy above them. */
  justify-content: flex-start;
  gap: 12px;
  margin-top: 24px;
}
.internal .about-us .intro-actions .button {
  margin: 0;
}

@media (min-width: 900px) {
  .internal .about-us {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}

/* --- Content images get the same rounding as everything else -------------- */
.internal main img.img-fluid,
.internal .prose img,
.internal .general img {
  border-radius: 16px;
}

/* --- Long-form rhythm ----------------------------------------------------- */
.internal .prose,
.internal .general,
.internal .integrity,
.internal .steps-section,
.internal .testimonials,
.internal .open-jobs {
  margin: 0 0 56px;
}
.internal .prose > h2,
.internal .general > h2 {
  margin-top: 56px;
  margin-bottom: 14px;
}
.internal .prose > h3,
.internal .general > h3 {
  margin-top: 32px;
  margin-bottom: 8px;
}
.internal .prose > *:first-child,
.internal .general > *:first-child,
.internal .integrity > *:first-child {
  margin-top: 0;
}
.internal .prose > p,
.internal .general > p,
.internal .integrity > p {
  margin: 0 0 18px;
  line-height: 168%;
}
/* A reading measure. One fixed width, not 68ch: ch resolves against the
   element's own font size, so a heading and a paragraph would get different
   column widths and their left edges would not line up. */
.internal .prose > p,
.internal .prose > ul,
.internal .prose > ol,
.internal .general > p,
.internal .general > ul,
.internal .general > ol,
.internal .integrity > p {
  max-width: var(--measure);
}
.internal .prose ul,
.internal .general ul,
.internal .prose ol,
.internal .general ol {
  margin: 0 0 24px;
  padding-left: 22px;
}
.internal .prose li,
.internal .general li {
  margin-bottom: 14px;
  line-height: 168%;
  font-size: 17px;
}
.internal .prose li:last-child,
.internal .general li:last-child {
  margin-bottom: 0;
}

/* --- Integrity / commitment blocks read as a panel, not loose paragraphs --- */
.internal .integrity {
  background: #f6f9fc;
  border: 1px solid #e6eef7;
  border-radius: 16px;
  padding: 32px 34px;
}
.internal .integrity h2 {
  margin-top: 0;
  margin-bottom: 14px;
}
.internal .integrity > p:last-child {
  margin-bottom: 0;
}

/* --- Stats and their caveat belong together ------------------------------- */
.internal .stats {
  margin: 0 0 14px;
}
.internal .stats-disclosure {
  margin: 0 0 56px;
}

/* --- Cross-promo needs air on both sides --------------------------------- */
.internal .cross-promo {
  margin: 0 0 56px;
}

/* --- Steps ---------------------------------------------------------------- */
.internal .steps-section h2 {
  margin-top: 0;
  margin-bottom: 24px;
}
.internal .steps-section .section-note {
  margin-top: 28px;
}

/* --- Testimonials --------------------------------------------------------- */
.internal .testimonials h2 {
  margin-top: 0;
}

/* --- Feature grids -------------------------------------------------------
   Runs of <h3> + <p> (sector lists, service lists, commitments) stacked in a
   68ch column leave the right half of the page empty and read as an undressed
   list. As cards they fill the measure and group visibly. `.is-three` for the
   longer runs. --------------------------------------------------------- */
.internal .feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 0 40px;
  max-width: none;
  list-style: none;
  padding: 0;
}
.internal .feature {
  background: #fff;
  border: 1px solid #e8eef3;
  border-radius: 14px;
  padding: 24px 26px;
}
.internal .feature h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 135%;
}
.internal .feature p {
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: 168%;
}

@media (min-width: 620px) {
  .internal .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

/* --- Checklist -----------------------------------------------------------
   A run of short "what you get" points. At the prose reading measure these
   stack in a narrow column beside an empty half-page, which reads as an
   unfinished layout next to the full-width card grids. Two columns fill the
   measure and match the grids' rhythm. --------------------------------- */
.internal .prose ul.checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 32px;
  max-width: none;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.internal .prose ul.checklist li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  font-size: 16px;
  line-height: 168%;
}
.internal .prose ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-gradient);
  /* Tick punched out of the brand-gradient dot. */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 100 16A8 8 0 008 0zm4.1 5.6l-5 5.2a.9.9 0 01-1.3 0L3.9 8.8a.9.9 0 111.3-1.2l1.3 1.3 4.3-4.5a.9.9 0 111.3 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 100 16A8 8 0 008 0zm4.1 5.6l-5 5.2a.9.9 0 01-1.3 0L3.9 8.8a.9.9 0 111.3-1.2l1.3 1.3 4.3-4.5a.9.9 0 111.3 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 800px) {
  .internal .prose ul.checklist {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- FAQ -----------------------------------------------------------------
   Carried over from the 2020 site, which had a six-question FAQ the rebuild
   initially dropped. Built on <details>/<summary> so it works with no
   JavaScript and stays keyboard-accessible for free. ------------------- */
.internal .faq {
  margin: 0 0 56px;
}
.internal .faq h2 {
  margin-top: 0;
  margin-bottom: 20px;
}
.internal .faq-item {
  border: 1px solid #e6eef7;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.internal .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 145%;
  color: var(--ink);
}
.internal .faq-item summary::-webkit-details-marker {
  display: none;
}
.internal .faq-item summary:hover,
.internal .faq-item summary:focus-visible {
  color: var(--brand);
}
/* Chevron, rotated when the item is open. */
.internal .faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.internal .faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.internal .faq-item .faq-answer {
  padding: 0 22px 20px;
}
.internal .faq-item .faq-answer p {
  margin: 0 0 12px;
  max-width: var(--measure);
  font-size: 16px;
  line-height: 168%;
}
.internal .faq-item .faq-answer p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .internal .faq-item summary::after {
    transition: none;
  }
}

/* --- Open Roles as the lead section --------------------------------------
   On For Candidates the live vacancy list is the reason people arrive, so it
   sits directly under the hero and is framed as a panel. The cards inside stay
   white so they lift off the tint. ------------------------------------- */
.internal .open-jobs--lead {
  background: linear-gradient(180deg, #f5f9fd 0%, #edf3fb 100%);
  border: 1px solid #e1ebf6;
  border-radius: 20px;
  padding: 38px 34px 34px;
  margin: 0 0 56px;
}
.internal .open-jobs--lead .open-jobs-header {
  margin-bottom: 26px;
  /* The base sheet centres this heading. Inside the lead panel the cards below
     are a left-aligned grid, so a centred header reads as a misalignment. */
  text-align: left;
}
.internal .open-jobs--lead .open-jobs-header h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 130%;
}
.internal .open-jobs--lead .open-jobs-header p {
  margin: 0;
  max-width: var(--measure);
}
.internal .open-jobs--lead .section-note {
  margin: 26px 0 0;
}
.internal .open-jobs--lead .cross-promo {
  margin: 26px 0 0;
}

@media (max-width: 600px) {
  .internal .open-jobs--lead {
    padding: 26px 18px 24px;
    border-radius: 16px;
  }
  .internal .open-jobs--lead .open-jobs-header h2 {
    font-size: 25px;
  }
}

/* With a single published vacancy the auto-fill grid leaves one narrow card
   marooned beside empty space. Capping the track width keeps a lone card the
   same size as it would be in a full row, instead of stretching or stranding. */
.internal .open-jobs--lead .ms-jobs-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: start;
}

/* --- Global reach country list -------------------------------------------
   Flags need the Noto Color Emoji face for the same reason the language
   switcher does: Windows ships no flag-emoji font, so a bare regional-indicator
   pair renders as two grey letters. ------------------------------------ */
.internal .reach-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  max-width: none;
}
.internal .reach-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 150%;
  color: var(--ink);
}
.internal .reach-list .reach-flag {
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-size: 19px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (min-width: 700px) {
  /* auto-fit rather than a fixed 4 columns: a fixed track was narrow enough to
     wrap "United Kingdom" onto two lines while its neighbours stayed on one,
     which threw the row rhythm out. */
  .internal .reach-list {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

/* --- Review stars ---------------------------------------------------------
   `.internal p` is a class+element selector and so outranked the single-class
   `.testimonial__stars`, repainting the stars in body-text grey. Matching the
   specificity puts the gold back. ------------------------------------- */
.internal .testimonial__stars,
.testimonial .testimonial__stars {
  color: #f5a623;
}

/* ===========================================================================
   WHO WE ARE components
   Ported from the supplied who-we-are.html, which carries formatting the first
   pass flattened into plain prose: section overlines, an icon chip on each
   card, a two-column story timeline, and the commitments as a dark panel.
   =========================================================================== */

:root {
  --navy: #0d1f42;
  --accent: #f5a623;
}

/* Small uppercase label above a section heading. */
.internal .overline {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand);
  margin: 0 0 6px;
}
.internal .overline + h2 {
  margin-top: 0;
}

/* Icon chip inside a .feature card. */
.internal .feature .ico {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #e8effc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  margin-bottom: 16px;
}

/* Story timeline: era label in a narrow left column, body on the right,
   separated by hairlines. */
.internal .story {
  margin: 8px 0 40px;
  max-width: none;
}
.internal .story-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  padding: 22px 0;
  border-top: 1px solid #e3e9f2;
}
.internal .story-row:first-child {
  border-top: 0;
  padding-top: 8px;
}
.internal .story-era {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--brand);
  margin: 0;
}
.internal .story-row p {
  margin: 0;
  max-width: var(--measure);
}

@media (min-width: 760px) {
  .internal .story-row {
    grid-template-columns: 130px 1fr;
  }
}

/* Page-specific stat cards (distinct from the group-wide .stats bar). */
.internal .stat-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 0 36px;
  list-style: none;
  padding: 0;
  /* .prose > ul carries the 68ch reading measure, which would squeeze these
     into the left third of the page. Cards are not prose. */
  max-width: none;
}
.internal .stat-card {
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
}
.internal .stat-card strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 120%;
  color: var(--brand);
  margin-bottom: 6px;
}
.internal .stat-card span {
  display: block;
  font-size: 14px;
  line-height: 155%;
  color: var(--ink-soft);
}

@media (min-width: 620px) {
  .internal .stat-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Commitments panel. Dark so it reads as a statement rather than more prose. */
.internal .commitment {
  /* border-box so the 48px padding sits inside the shared column width rather
     than pushing the panel wider than every other block on the page. */
  box-sizing: border-box;
  max-width: var(--measure);
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  padding: 40px 44px;
  margin: 0 auto 56px;
}
.internal .commitment .overline {
  color: var(--accent);
}
.internal .commitment h2 {
  color: #fff;
  margin: 8px 0 14px;
  font-size: 24px;
}
.internal .commitment > p {
  color: #c8d4e6;
  max-width: 74ch;
  margin: 0 0 28px;
}
.internal .commitment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.internal .commitment-grid h3 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.internal .commitment-grid p {
  color: #b9c7dd;
  font-size: 15px;
  line-height: 168%;
  margin: 0;
  max-width: none;
}
.internal .commitment a {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 620px) {
  .internal .commitment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .internal .commitment {
    padding: 30px 24px;
    border-radius: 14px;
  }
}

/* --- Internal page hero band ---------------------------------------------
   A full-bleed navy-to-blue gradient behind the page title, matching the
   supplied designs. The section sits outside .container so it can run edge to
   edge, and opens its own container for the two-column content. --------- */
.internal .page-hero {
  background: linear-gradient(105deg, #0d1f42 0%, #17356c 42%, #2f6fd0 100%);
  padding: 60px 0 64px;
  margin: 0 0 56px;
}
.internal .page-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.internal .page-hero .left,
.internal .page-hero .right {
  float: none;
  width: auto;
  min-width: 0;
}
/* The gradient is behind the text now, so the gradient-filled h1 used
   elsewhere would be invisible. Reset the clip and paint it white. */
.internal .page-hero h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
  margin: 0 0 14px;
}
.internal .page-hero .section-lead {
  color: #dbe6f7;
  margin: 0 0 8px;
}
.internal .page-hero p {
  color: #c5d4ea;
}
.internal .page-hero .intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 26px;
}
.internal .page-hero .button.secondary-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.internal .page-hero .button.secondary-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.internal .page-hero img,
.internal .page-hero picture img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

@media (min-width: 900px) {
  .internal .page-hero .container {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}
@media (max-width: 600px) {
  .internal .page-hero {
    padding: 40px 0 44px;
  }
}

/* --- One content column -------------------------------------------------
   The column is set on the SECTION, not on individual elements. Every block
   inside then inherits the same left and right edge for free, which is what
   stops paragraphs, card grids, panels and lists each finding their own width
   and reading as a misalignment.

   Only .page-hero and the .candidate band sit outside .container, so those
   remain full-bleed by construction. --------------------------------- */
.internal main > .container > section,
.internal main > .container > figure,
.internal main > .container > div,
.internal main > .container > p {
  box-sizing: border-box;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* Inside a section, blocks fill the column rather than setting their own. */
.internal .prose > p,
.internal .prose > ul,
.internal .prose > ol,
.internal .prose > h2,
.internal .prose > h3,
.internal .prose > .overline,
.internal .general > p,
.internal .general > ul,
.internal .general > ol,
.internal .general > h1,
.internal .general > h2,
.internal .general > h3,
.internal .integrity > p,
.internal .story,
.internal .story-row p,
.internal .feature-grid,
.internal .stat-cards,
.internal .prose > ul.checklist,
.internal .testimonial-list,
.internal .reach-list,
.internal .open-jobs-header p,
.internal .faq-item .faq-answer p,
.internal .commitment,
.internal .stats-disclosure {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.internal .prose > ul,
.internal .prose > ol,
.internal .general > ul,
.internal .general > ol {
  box-sizing: border-box;
}

/* Full-column feature photo. */
.internal .team-photo {
  margin: 0 0 56px;
  padding: 0;
}
.internal .team-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* A hero with no image centres its text column instead of leaving a gap. */
.internal .page-hero .container:not(:has(.right)) {
  grid-template-columns: 1fr;
}

/* --- Wide track -----------------------------------------------------------
   An opt-in second width for the lower half of a page, where card grids and
   panels benefit from the room. Used as a single transition partway down a
   page, not alternated section by section: every switch between widths reads
   as a misalignment. ---------------------------------------------------- */
.internal main > .container > .is-wide {
  max-width: var(--measure-wide);
}

/* A hero with no side image still needs a measure: a single lead line running
   the full 1130px band is unreadable. */
.internal .page-hero .container:not(:has(.right)) .left {
  max-width: 780px;
}

/* The group shot is 3:2 and a 4:3 cover-crop removes roughly 11% of its width,
   which is exactly where the people at each end stand. Bound to the image, not
   to a page, so it holds anywhere the photo is used. */
.internal .page-hero img[src*="alb-team"],
.internal .page-hero img[src*="alb-workforce"] {
  aspect-ratio: 3 / 2;
}