/* Pearson Building site-wide overrides, loaded after Duda's CSS on every page.
   One type scale for headings and body text, plus the end-of-page call-to-action,
   the phone call button and other small components added after the Duda export. */

/* Fraunces (SIL Open Font License) for page titles and section headings; DM Sans stays for everything else */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces/fraunces-latin-var.woff2") format("woff2");
}
#dm div.dmContent h1, #dm div.dmContent h1 *,
#dm div.dmContent h2, #dm div.dmContent h2 * {
  font-family: "Fraunces", Georgia, serif !important;
  font-optical-sizing: auto;
}
#dm div.dmContent h2.pb-phone, #dm div.dmContent h2.pb-phone * { font-family: "DM Sans", "DM Sans Fallback", sans-serif !important; }

/* ---- Type scale (desktop; phone sizes in the media query below) ---- */
#dm div.dmContent h1 {
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}
#dm div.dmContent h1.pb-hero { font-size: 60px !important; }
#dm div.dmContent h1.pb-title { text-align: center !important; }
#dm div.dmContent h2 {
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}
#dm div.dmContent h2.pb-phone { font-size: 48px !important; font-weight: 700 !important; }
#dm div.dmContent h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
#dm div.dmContent h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
#dm div.dmContent .pb-subtitle {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
#dm div.dmContent h1 *, #dm div.dmContent h2 *, #dm div.dmContent h3 *,
#dm div.dmContent h4 *, #dm div.dmContent .pb-subtitle * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
#dm div.dmContent h2 strong, #dm div.dmContent h2 b { font-weight: 700 !important; }

/* Body copy: one line spacing everywhere */
#dm div.dmContent .dmNewParagraph p,
#dm div.dmContent .dmNewParagraph li,
#dm div.dmContent .dmNewParagraph p *,
#dm div.dmContent .dmNewParagraph li *,
#dm div.dmContent .dmNewParagraph > div,
#dm div.dmContent .dmNewParagraph > div * {
  line-height: 1.6 !important;
}

@media (max-width: 767px) {
  #dm div.dmContent h1 { font-size: 34px !important; text-align: center !important; }
  #dm div.dmContent h1.pb-hero { font-size: 40px !important; }
  #dm div.dmContent h2 { font-size: 28px !important; }
  #dm div.dmContent h2.pb-phone { font-size: 34px !important; }
  #dm div.dmContent h3 { font-size: 20px !important; }
  #dm div.dmContent h4, #dm div.dmContent .pb-subtitle { font-size: 18px !important; }
  #dm div.dmContent h4.pb-subtitle, #dm div.dmContent .pb-subtitle { text-align: center !important; }
}

/* ---- End-of-page call-to-action on case studies ---- */
.pb-cta {
  box-sizing: border-box;
  max-width: 1120px;
  margin: 56px auto 40px;
  padding: 40px 48px;
  background: #013537;
  color: #f8f6ee;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  text-align: left;
}
.pb-cta *, .pb-cta *::before, .pb-cta *::after { box-sizing: border-box; }
#dm div.dmContent .pb-cta .pb-cta__title {
  margin: 0 0 8px;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #f8f6ee;
}
.pb-cta__text { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: rgba(248, 246, 238, 0.85); }
.pb-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
#dm .pb-cta a.pb-btn, .pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #cc043c;
  border: 2px solid #cc043c;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#dm .pb-cta a.pb-btn:hover { background: #a90332; border-color: #a90332; }
#dm .pb-cta a.pb-btn--ghost { background: transparent; border-color: rgba(248, 246, 238, 0.6); color: #f8f6ee; }
#dm .pb-cta a.pb-btn--ghost:hover { background: rgba(248, 246, 238, 0.12); border-color: #f8f6ee; }

@media (max-width: 767px) {
  .pb-cta { margin: 40px 0 24px; padding: 28px 20px; }
  #dm div.dmContent .pb-cta .pb-cta__title { font-size: 24px !important; }
  .pb-cta__actions, #dm .pb-cta a.pb-btn { width: 100%; }
}

/* ---- Phone call button (phone pages only) ---- */
.pb-callbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147482000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  border-radius: 999px;
  background: #cc043c;
  color: #fff !important;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(1, 30, 31, 0.3);
}
.pb-callbar svg { width: 20px; height: 20px; flex: none; }
.pb-callbar:focus-visible { outline: 3px solid #013537; outline-offset: 2px; }
@media (min-width: 768px) { .pb-callbar { display: none; } }

/* ---- Project Videos intro ---- */
#dm div.dmContent .pb-intro { max-width: 760px; margin: 0 auto; text-align: center; }
#dm div.dmContent .pb-intro p { margin: 12px 0 0; font-size: 18px; font-weight: 300; line-height: 1.6; color: #013537; }
#dm div.dmContent .pb-intro a { color: #cc043c; }
@media (max-width: 767px) { #dm div.dmContent .pb-intro p { font-size: 16px; } }

/* ---- Main navigation: one weight for every state; hover and current page shown with
   colour and a red underline that draws in from the left, so nothing shifts ---- */
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item.dmNavItemSelected,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item.hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item:hover {
  font-weight: 500 !important;
  color: rgba(1, 53, 55, 0.78) !important;
  transition: color 0.25s ease !important;
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item.dmNavItemSelected,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item.hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item:hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.unav-item:focus-visible {
  color: #013537 !important;
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item .nav-item-text {
  position: relative;
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item .nav-item-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  width: auto;
  height: 2px;
  margin: 0;
  border: 0;
  background: #cc043c;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.dmNavItemSelected .nav-item-text::after,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item.hover .nav-item-text::after,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item:hover .nav-item-text::after,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > a.unifiednav__item:focus-visible .nav-item-text::after {
  transform: scaleX(1);
}
/* Dropdown and drawer sub-items: same weight, colour change only */
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item:hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item.dmNavItemSelected {
  font-weight: 400 !important;
  color: rgba(1, 53, 55, 0.78) !important;
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item {
  transition: color 0.25s ease, background-color 0.25s ease !important;
}
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item:hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item.hover,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item.dmNavItemSelected,
html #dm nav.main-navigation.unifiednav.dmLinksMenu .unifiednav__container.unifiednav__container[data-depth] a.unifiednav__item.unifiednav__item.unifiednav__item[aria-current="page"] {
  color: #cc043c !important;
  background-color: rgba(204, 4, 60, 0.06) !important;
}
@media (prefers-reduced-motion: reduce) {
  html #dm nav.main-navigation.unifiednav.dmLinksMenu .nav-item-text::after { transition: none !important; }
}