@charset "UTF-8";
/* ---------------------------------------------------------------
   CPM Services brand palette
   Source: CPM Corporate Identity Manual 2020, p.4 (LOGO COLOURS)
     RED    Pantone 1795 C  C9  M98 Y100 K1   -> #D92727
     BLACK  Pantone Black C  C0  M0  Y0   K100 -> #231F20
     BLUE   Pantone 660 C   C85 M44 Y0   K0   -> #007DC0
   --------------------------------------------------------------- */
/* Brand */
/* Neutrals */
/* About / alternating section background */
/* Static accent rules - form fields, table cells, separators.
   Charcoal rather than red, so red stays reserved for calls to
   action and hover states. */
/* Quiet outline for cards (blog listing) */
/* --- Legacy variable names, remapped to the CPM palette ---------
   Kept so existing partials keep compiling; prefer the names above
   in any new work. */
/* lighter red, hover */
/* darker red, button hover */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
}

body {
  color: #231f20;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  background: #fff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
}

.container {
  max-width: 1920px;
  width: 100%;
  margin: auto;
  position: relative;
  padding: 0;
  margin-top: 80px;
  margin-bottom: 80px;
}

footer .container {
  min-height: unset;
}

.miniContainer {
  padding: 50px 0;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  position: relative;
}

/* ---------------------------------------------------------------
   CPM Services typography
   CI Manual p.4  : logo font is Maven Pro
   CI Manual p.6  : preferred san-serif order -> Maven Pro, Avenir,
                    Arial, Helvetica
   Type scale measured from CPM-Website-2026.ai (1920px canvas,
   1200px content column):
     36px  hero headline / "CPM Services"
     32px  section headings, tile labels, blue CTA
     24px  three-column headings
     20px  footer column headings
     16px  body, nav, buttons, footer links
   Note: the artwork sets body leading at ~1.22; raised to 1.5 here
   for readability on screen.
   --------------------------------------------------------------- */
/* Scale */
/* inner-page title band */
h1 {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding: 0;
  margin: 0 0 40px;
  color: #231f20;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 30px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 30px;
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 24px;
  line-height: 1.3;
}

h5 {
  font-size: 16px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 20px;
  line-height: 1.4;
}

h6 {
  font-size: 14px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
  margin-bottom: 20px;
  line-height: 1.4;
}

p {
  font-size: 16px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.5;
}

a {
  font-size: inherit;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #d92727;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #b81f1f;
}

/* Utility: the design uses uppercase only for footer column headings */
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pageTitle {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding-bottom: 30px;
}

.pageSubTitle {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.title-h1 {
  font-size: 32px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  padding-bottom: 40px;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.title-h2 {
  font-size: 24px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #231f20;
}

/* Title band - charcoal ground with the logo's roof outline ghosted
   behind the title (white at 8%, baked into roof-ghost.svg). Shared
   by .banner-h1 (inner pages) and .blog-header (articles).
   Geometry: at background-size `auto 200%` the artwork is twice the
   band height, and a y-position of 30% resolves to an offset of
   (H - 2H) * 0.3 = -0.3H - i.e. the roof sits 30% above the band, so
   its arc spans the heading. Using a background rather than a
   pseudo-element keeps the text painting on top without needing a
   wrapper element in the templates.
   On narrow screens the heading wraps and the band gets taller, which
   would scale the roof up with it, so drop to 150% and re-solve:
   P = 100 * 0.2 / (1.5 - 1) = 40% puts the arc 20% above the band. */
.banner-h1 {
  background-color: #231f20;
  background-image: url(../images/SVG/roof-ghost.svg);
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: auto 200%;
  padding: 60px 1em;
  text-align: center;
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
@media screen and (max-width: 769px) {
  .banner-h1 {
    background-size: auto 150%;
    background-position: center 40%;
  }
}

@media screen and (max-width: 769px) {
  .banner-h1 {
    padding: 40px 1em;
    font-size: 28px;
  }
}
/*----------- Typography End ---------*/
.paging {
  display: block;
  text-align: center;
  width: 100%;
}

.paging-nav {
  overflow: hidden;
  display: inline-flex;
  margin-top: 80px;
}
.paging-nav a {
  border: 1px solid #aeb3b7;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  margin: 5px 0;
}
.paging-nav a,
.paging-nav div {
  display: flex;
  padding: 10px 15px;
  text-align: center;
  box-sizing: border-box;
  color: #62676a;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 21.2px;
  width: 45px;
  margin-left: 5px;
  margin-right: 5px;
}
.paging-nav div {
  color: #fff;
  background: #d92727;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  margin: 5px;
}
.paging-nav a:hover {
  color: #fff;
  background: #d92727;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  margin: 5px;
  text-decoration: none;
}

select {
  max-width: 100%;
  width: 100%;
  background-color: #f7f7f7;
  background-image: url(../images/SVG/dropdown.svg);
  background-repeat: no-repeat;
  background-position: center right 20px;
  background-size: 12px;
  list-style: none;
  padding-left: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  border: none;
  padding: 10px;
}

.flex__align--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex__align--left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex__align--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.breadcrumb {
  margin: 0;
  margin-bottom: 50px;
  font-weight: 300;
  padding-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  padding-left: 1em;
  padding-right: 1em;
}

.breadcrumb a,
.breadcrumb div {
  padding-right: 10px;
  padding-left: 10px;
  font-weight: 300;
  color: #231f20;
  position: relative;
  padding-left: 0;
}

.breadcrumb a::after {
  content: "/";
  position: absolute;
  margin-left: 10px;
}

.breadcrumb a:first-child {
  padding-left: 0;
}

.breadcrumb a:hover {
  color: #d92727;
}

.relatedLinks {
  font-size: 16px;
  color: #d92727;
  font-weight: 400;
  margin-bottom: 50px;
}

.relatedLinks h3 {
  padding: 0 !important;
  margin-bottom: 5px !important;
  font-size: 16px;
  text-transform: lowercase;
  text-transform: capitalize;
  color: #d92727 !important;
}

.relatedLinks a {
  color: #d92727;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.relatedLinks a:hover {
  color: #231f20;
  text-decoration: none;
}

.relatedLinks ul {
  margin-bottom: 0;
}

.relatedLinks ul li::marker {
  content: "-" !important;
}

.notification {
  padding: 7px 9px;
  display: none;
}

.notificationError {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  margin: 20px 0px;
  border: 1px solid transparent;
  border-radius: 4px;
  display: none;
}

.notificationError {
  background: none repeat scroll 0 0 #fbe3e4;
  border-radius: 4px;
  padding: 10px;
  display: none;
  margin: 15px 0px;
  color: #721c24;
}

.notificationSuccess {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  border-radius: 4px;
  padding: 10px;
  display: none;
}

.b-lazy {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  max-width: 100%;
  opacity: 0;
}

.b-lazy.b-loaded {
  opacity: 1;
}

svg {
  width: 25px;
  height: 25px;
}

a.btn,
.btn {
  width: 100%;
  max-width: 220px;
  text-align: center;
  padding-block: 10px;
  padding: 10px 0;
  color: #d92727;
  line-height: 19.6px;
  letter-spacing: 1px;
  font-weight: 600;
  display: block;
  margin: auto;
  text-decoration: none;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
}

a.btn:hover,
.btn:hover {
  background: #d92727;
  text-decoration: none;
  color: #fff;
}

.btn-white,
a.btn-white {
  background: #fff !important;
  width: fit-content;
  max-width: 285px;
  text-align: center;
  text-transform: uppercase;
  padding-block: 10px;
  padding: 10px 15px;
  color: #231f20 !important;
  line-height: 19.6px;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none !important;
}

.btn-white:hover,
a.btn-white:hover {
  color: #fff !important;
  background: #d92727 !important;
  text-decoration: none;
}

.btn-red {
  background: #d92727 !important;
  text-decoration: none;
  color: #fff !important;
  border: 1px solid #d92727 !important;
  text-transform: uppercase;
}

.btn-red:hover {
  color: #d92727 !important;
  background: #fff !important;
  border: 1px solid #d92727 !important;
}

p a.btn.btn-red {
  display: flow-root;
  margin: 0;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 220px;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.pill {
  padding: 5px 15px;
  background: #b81f1f;
  color: #fff;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  line-height: 19.6px;
  font-size: 16px;
}

.overlay:hover {
  text-decoration: none;
  position: relative;
}
.overlay:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(248, 151, 29, 0.6);
}
.overlay:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  background: url(../images/hover.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  z-index: 55555;
}

.display-none {
  display: none !important;
}

.content-height {
  min-height: 75vh;
}

.accordion {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 24px;
  font-weight: 500;
  transition: 0.4s;
  position: relative;
  text-transform: uppercase;
  padding-left: 60px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
}

.active, .accordion:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.accordion:after {
  content: "";
  width: 20px;
  height: 11px;
  background: url(../images/arr-down.png);
  float: left;
  margin-right: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}

.active:after {
  content: "";
  width: 20px;
  height: 11px;
  background: url(../images/arr-up.png);
}

.panel {
  padding: 0 18px;
  background-color: #f8f8f8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 60px;
}

pre {
  white-space: break-spaces;
}

/* The container */
.radiobox_container {
  display: inline-block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1;
  font-weight: 400 !important;
}

/* Hide the browser's default radio button */
.radiobox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border: #adb5bd solid 1px;
  box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiobox_container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.radiobox_container input:checked ~ .checkmark {
  background-color: #fff;
  border: #ccc solid 1px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiobox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiobox_container .checkmark:after {
  top: 3px;
  left: 3px;
  width: 7PX;
  height: 7PX;
  border-radius: 50%;
  background: #d61f26;
}

/* The container */
.tickbox_container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.tickbox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.tickbox_container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: #dee2e6 solid 2px;
  box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.tickbox_container:hover input ~ .checkmark {
  background-color: #dee2e6;
}

/* When the checkbox is checked, add a blue background */
.tickbox_container input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.tickbox_container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.tickbox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.tickbox_container .checkmark:after {
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #d61f26;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  outline: none;
}

/*----------- Utilities End ---------*/
table {
  margin-bottom: 25px;
  border-collapse: collapse;
}

table td,
table th {
  padding: 5px;
  line-height: 19.02px;
  border: 1px solid #231f20;
}

table th {
  color: #fff;
  background-color: #d92727;
}

table[border="0"] th,
table[border="0"] td {
  border: none;
}

/*******************************/
/*Lists*
/*******************************/
ul {
  padding-left: 5px;
}

ul li::marker {
  content: "-";
}

ul li,
ol li {
  padding-left: 5px;
  line-height: 21.8px;
}

ol {
  padding-left: 15px;
}

ul, ol {
  margin-bottom: 30px;
}

ul ul, ol ol {
  margin: 0;
}

input, textarea, select {
  width: 100%;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border: none;
  outline: none;
  position: relative;
  border: 1px solid #231f20;
  color: #231f20;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 16px;
}

select {
  line-height: 19.6px;
}

input::placeholder,
textarea::placeholder {
  color: #000;
}

.form-group {
  margin-bottom: 50px;
}
.form-group input, .form-group select, .form-group textarea {
  margin: 0;
}

.btn-form {
  background-color: #d92727;
  color: #fff;
  font-size: 16px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  padding: 15px 20px;
  display: block;
  max-width: 180px;
  width: 100%;
  margin-left: auto;
  text-align: center;
}

.btn-form:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

/* ===============================================================
   CPM Services - shared components + homepage bands
   Built to CPM-Website-2026.ai (1920px canvas, 1200px content column)
   =============================================================== */
/* ---------- Buttons -------------------------------------------
   Square corners, 16px label. Two variants in the artwork:
   solid red on light ground, and white with blue label on imagery. */
.cpm-btn {
  display: inline-block;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  padding: 13px 34px;
  min-width: 176px;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cpm-btn:hover {
  text-decoration: none;
}

.cpm-btn--primary {
  background: #d92727;
  color: #ffffff;
}

.cpm-btn--primary:hover {
  background: #b81f1f;
  color: #ffffff;
}

.cpm-btn--ghost {
  background: #ffffff;
  color: #007dc0;
}

.cpm-btn--ghost:hover {
  background: #007dc0;
  color: #ffffff;
}

/* ---------- Header actions (LinkedIn + CTA) -------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.header__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #231f20;
}
.header__social svg {
  display: block;
  width: 26px;
  height: 26px;
}
.header__social:hover {
  color: #007dc0;
}

.header__cta {
  min-width: 0;
  padding: 12px 28px;
}

/* Match the space after the last menu item to the space between items.
   Between items: 15px + 15px link padding = 30px.
   After the last: 15px padding + this margin + 4px icon inset
   (26px glyph centred in a 34px box) = 30px, so 11px. Desktop only -
   on mobile the actions wrap to their own centred row. */
@media screen and (min-width: 770px) {
  .header__actions {
    margin-left: 11px;
  }
}
/* ---------- Hero ---------------------------------------------- */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  height: 580px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 60px 1em;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 31, 32, 0.35);
}

.hero .wrapper {
  position: relative;
  z-index: 1;
}

.hero__content {
  max-width: 860px;
}

.hero__heading {
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 34px;
}

/* ---------- Intro lockup -------------------------------------- */
.intro {
  text-align: center;
  padding: 70px 1em 0;
}

.intro__name {
  color: #d92727;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 6px;
}

.intro__mantra {
  color: #231f20;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

/* ---------- Three promo columns -------------------------------- */
.promos {
  padding: 60px 1em 80px;
}

.promos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.promo {
  text-align: center;
}

.promo__link {
  display: block;
  text-decoration: none;
}

.promo__link:hover {
  text-decoration: none;
}

.promo__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.promo__icon img {
  display: block;
  width: auto;
  height: 120px;
  max-width: 100%;
}

.promo__title {
  color: #d92727;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 18px;
  text-transform: none;
}

.promo__link:hover .promo__title {
  color: #b81f1f;
}

.promo__desc {
  color: #231f20;
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
}

/* ---------- Split tiles over imagery ---------------------------
   Measured from CPM-Website-2026.ai: photo band y1737-2136 (399px),
   tiles y1677-1797 (120px) spanning the full 1200px column with a
   32px gutter - so the row straddles the top edge of the photo
   exactly half and half. */
.splittiles {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 1em;
  min-height: 399px;
  display: flex;
  align-items: flex-start;
}

/* The base .wrapper sets `margin: auto`, which in a flex container
   also centres vertically and cancels align-items. Set the vertical
   margins explicitly so the row lifts by half a tile instead. */
.splittiles > .wrapper {
  margin: -60px auto 0;
}

.splittiles__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px 24px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
.tile:hover {
  text-decoration: none;
  color: #ffffff;
}

.tile--red {
  background: #d92727;
}

.tile--red:hover {
  background: #b81f1f;
}

.tile--dark {
  background: #231f20;
}

.tile--dark:hover {
  background: #3a3436;
}

/* ---------- Red call-to-action band ---------------------------- */
.ctaband {
  background: #d92727;
  padding: 42px 1em;
}

.ctaband__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.ctaband__heading {
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

.ctaband .cpm-btn--ghost {
  color: #d92727;
}

.ctaband .cpm-btn--ghost:hover {
  background: #ffffff;
  color: #d92727;
}

/* ---------- Footer LinkedIn QR ---------------------------------
   Selector is nested under .footer__top to outrank that block's
   generic `img { width: auto; margin: auto; }` rule. */
.footer__top .footer-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  text-decoration: none;
}
.footer__top .footer-qr img {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0;
  flex: 0 0 auto;
}
.footer__top .footer-qr span {
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.35;
}
.footer__top .footer-qr:hover {
  text-decoration: none;
}
.footer__top .footer-qr:hover span {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- Responsive ----------------------------------------
   Breakpoint matches the existing menu breakpoint in atf-styles. */
@media screen and (max-width: 769px) {
  .header__actions {
    width: 100%;
    justify-content: center;
    padding: 0 1em 16px;
    order: 3;
  }

  .hero {
    height: 300px;
    padding: 44px 1em;
  }

  .hero__heading {
    font-size: 26px;
  }

  .intro {
    padding: 46px 1em 0;
  }

  .intro__name {
    font-size: 28px;
  }

  .intro__mantra {
    font-size: 22px;
  }

  .promos {
    padding: 40px 1em 50px;
  }

  .promos__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .about__heading {
    font-size: 26px;
  }

  .splittiles {
    min-height: 300px;
  }

  .splittiles > .wrapper {
    margin: -40px auto 0;
  }

  .splittiles__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tile {
    font-size: 22px;
    min-height: 80px;
  }

  .ctaband {
    padding: 32px 1em;
  }

  .ctaband__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .ctaband__heading {
    font-size: 22px;
  }

  .footer__top .footer-qr {
    margin-top: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cpm-btn {
    width: 100%;
    min-width: 0;
  }

  .header__cta {
    width: auto;
  }
}
.footer__main {
  background: #231f20;
}
.footer__main img {
  display: block;
  max-width: 100%;
  width: auto;
  margin: auto;
  height: auto;
}

.footer-row {
  display: flex;
  gap: 50px;
}

.footer-col {
  flex: 0 0 auto;
  width: 27%;
  max-width: 27%;
  flex: 27%;
}

/* Brand column: logo, tagline and blurb (artwork ~45% of the row) */
.footer-col:first-child {
  width: 46%;
  max-width: 46%;
  flex: 46%;
  text-align: left;
}

.footer__bottom {
  text-align: center;
  padding: 0.5em 1em;
}

.footer__top {
  padding: 40px 0;
  /* Stay white and underline - same convention as the main menu.
     (Was $txt-clr-black, i.e. #231f20: the footer's own background,
     so a hovered link disappeared.) */
}
.footer__top img {
  display: block;
  max-width: 100%;
  width: auto;
  margin: auto;
  height: auto;
}
.footer__top p {
  font-size: 18px;
  font-weight: 400;
}
.footer__top h3 {
  color: #ffffff;
  font-size: 20.3px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  padding: 0;
  margin-bottom: 20px;
}
.footer__top a {
  color: #ffffff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.footer__top a:hover,
.footer__top a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.footer__top .footer-col ul {
  margin-bottom: 0;
}
.footer__top .footer-col ul li {
  line-height: 23.2px;
  font-size: 16px;
}
.footer__top .footer-col ul li::marker {
  color: #ffffff;
}
.footer__top .footer-col .footer-logo {
  margin-bottom: 28px;
}
.footer__top .footer-col .footer-logo img {
  display: inline-block;
  margin: 0;
  /* artwork left-aligns the mark in the brand column */
  width: 209px;
  height: auto;
}
.footer__top p {
  padding: 0;
  margin: 0;
  line-height: 23.2px;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  color: #ffffff;
}

.footer__bottom p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  line-height: 23.6px;
  font-size: 14px;
}

.footer__bottom a {
  color: #fff;
  font-size: 14px;
}

/* Was #000 - near-invisible on the charcoal footer */
.footer__bottom a:hover,
.footer__bottom a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.about {
  background: #f2f2f2;
  text-align: center;
  padding: 70px 1em;
}
.about .container {
  margin-top: 0;
  margin-bottom: 0;
  padding: 80px 1em;
}
.about p {
  font-size: 16px;
  line-height: 1.5;
}
.about .wrapper > *:last-child {
  margin-bottom: 0;
}

.about__heading {
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #231f20;
  margin: 0 0 26px;
  text-transform: none;
}

.about__body {
  max-width: 1000px;
  margin: 0 auto 34px;
}
.about__body p:last-child {
  margin-bottom: 0;
}

.content ul li::marker {
  content: "•";
}
.content p {
  font-family: "Maven Pro", "Avenir", Arial, Helvetica, sans-serif;
}

.footer-col:last-child p {
  font-size: 16px;
  font-weight: 400;
}

.question_number {
  margin-bottom: 10px;
}

p.q_question.q_comment {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.radiobox__boxes, .tickbox__boxes {
  margin-bottom: 20px;
}

.radiobox__boxes .form-row:last-child .radiobox_container {
  margin-bottom: 0;
}

.tickbox__boxes .form-row:last-child .tickbox_container {
  margin-bottom: 0;
}

.newblock {
  max-width: 1920px;
  width: 100%;
  margin: auto;
  padding-bottom: 60px;
  padding-inline: 1em;
}
.newblock h2 {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 30px;
}
.newblock .wrapper {
  display: grid;
  grid-template-columns: 482px 687px;
  gap: 30px;
}
.newblock .video {
  width: 100%;
  display: block;
}
.newblock .video .video__link {
  display: block;
}
.newblock .video img {
  max-width: 100%;
  width: auto;
  height: auto;
}
.newblock .slider {
  display: block;
  width: 100%;
  max-width: 687px;
  overflow: hidden;
}
.newblock .slider .owl-carousel .owl-stage {
  display: flex;
}
.newblock .slider .owl-item {
  width: 100% !important;
}
.newblock .featureslider .item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0px 10px;
  color: #000;
  text-decoration: none !important;
}
.newblock .featureslider .item h2 {
  grid-column: 1/-1;
}
.newblock .featureslider .item .tagline {
  font-size: 20.8px;
  font-weight: 600px;
  margin-bottom: 20px;
}
.newblock .featureslider .owl-item.active {
  background-color: transparent;
}
@media screen and (max-width: 1025px) {
  .newblock .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .newblock .slider .item p {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media screen and (max-width: 769px) {
  .newblock .wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .newblock .video {
    text-align: center;
  }
  .newblock .slider {
    max-width: 100%;
  }
}
@media screen and (max-width: 567px) {
  .newblock .slider .item p {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/*# sourceMappingURL=styling.css.map */