/**
 * @file
 * Styles for the Landing Page content type and its paragraph sections.
 *
 * Loaded via the b5subtheme/landing-page library, attached from
 * node--landing-page--full.html.twig.
 */

/* Full-page wrapper. */
.landing-page {
  display: block;
  width: 100%;
}

.landing-page-node {
  display: block;
  width: 100%;
}

/* -------------------------------------------------------------------------
 * Two column with image paragraph.
 * ---------------------------------------------------------------------- */

.lp-two-col {
  position: relative;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 20px;
}

/* Dark overlay so white text stays readable over a background photo.
   Only applied when the section has a background image. */
.lp-two-col--has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #010405A6;
  pointer-events: none;
}

/* Inner content constrained to 1170px and centered, above the overlay. */
.lp-two-col__inner {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0px 14px;
  width: 100%;
}

/* Two column row. */
.lp-two-col__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 30px;
}

/* Left column: 60% width. */
.lp-two-col__left {
  flex: 0 0 60%;
  max-width: 60%;
  padding-right: 30px;
}

/* Right column: fills the remaining space (~40%), card centered vertically. */
.lp-two-col__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Two column with image: right column stacks image, buttons, notes. --- */
.lp-twocol .lp-two-col__right {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

/* When a short title (eyebrow) sits above the title, push the right column
   down by the eyebrow's height so the image aligns with the title, not the
   short title. Eyebrow: 16px font + 12px bottom margin = 28px. */
.lp-two-col__row--has-eyebrow .lp-two-col__right {
  padding-top: 28px;
}

.lp-two-col__right .lp-two-col__buttons {
  justify-content: center;
}

/* Right-column image. */
.lp-twocol .lp-two-col__image {
  width: 100%;
}

.lp-twocol .lp-two-col__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* No image: widen the left column to 75%, right column takes the rest. */
.lp-twocol--no-image .lp-two-col__left {
  flex: 0 0 75%;
  max-width: 75%;
}

/* Two column with image, no right-column image: title/description white.
   Scoped to the two_column_with_image bundle so report-section is unaffected. */
.paragraph--type--two-column-with-image.lp-twocol--no-image .lp-two-col__title,
.paragraph--type--two-column-with-image.lp-twocol--no-image .lp-two-col__description {
  color: #ffffff;
}

/* Logo. */
.lp-two-col__logo {
  margin-bottom: 40px;
}

.lp-two-col__logo img {
  max-width: 210px;
  height: auto;
}

/* Title (shared defaults; font-size/line-height set per paragraph type below). */
.lp-two-col__title {
  margin: 0 0 16px;
  font-weight: 600;
  letter-spacing: 0px;
  color: #ffffff;
}

/* Description (shared defaults; font-size/line-height set per type below). */
.lp-two-col__description {
  margin-bottom: 28px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
}

/* --- Top Banner Section: larger hero typography. --- */
.lp-banner .lp-two-col__title {
  font-size: 48px;
  line-height: 100%;
}

.lp-banner .lp-two-col__description {
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 40px;
}

/* --- Two column with image: smaller typography. --- */
.lp-twocol .lp-two-col__title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2;
}

.lp-twocol .lp-two-col__description {
  font-size: 16px;
  line-height: 1.6;
}

/* Short title / eyebrow above the title (styled like the logos-section title). */
.lp-two-col__eyebrow {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #75CEDE;
}

/* No background image / no overlay: use black text for readability. */
.lp-two-col--no-bg-image .lp-two-col__title,
.lp-two-col--no-bg-image .lp-two-col__description,
.lp-two-col--no-bg-image .lp-two-col__notes {
  color: #000000;
}

/* Buttons wrapper. */
.lp-two-col__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Each button paragraph is wrapped in a .paragraph div; keep them inline. */
.lp-two-col__buttons .paragraph {
  display: inline-flex;
}

/* Button element (shared sizing). */
.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Primary button: brand color from CSS variables in style.css. */
.lp-button.primary,
.lp-button.btn-primary {
  background-color: var(--lp-button-bg);
  color: var(--lp-button-color);
  border-color: var(--lp-button-bg);
}

.lp-button.primary:hover,
.lp-button.primary:focus,
.lp-button.btn-primary:hover,
.lp-button.btn-primary:focus {
  background-color: var(--lp-button-hover-bg);
  color: var(--lp-button-hover-color);
  border-color: var(--lp-button-hover-bg);
  text-decoration: none;
}

/* Link-style button: plain text link in brand color, no box. */
.lp-button.lp-link,
/* Link-style buttons: no background/border, text color, trailing arrow. */
.lp-link,
.lp-link-white,
.white-outline {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

/* white-outline: white text, trailing arrow, no background or border. */
.white-outline,
.lp-button.white-outline,
.white-outline:hover,
.white-outline:focus,
.lp-button.white-outline:hover,
.lp-button.white-outline:focus {
  color: #ffffff;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}

.white-outline::after,
.lp-button.white-outline::after {
  content: "\2192";
  margin-left: 6px;
  display: inline-block;
}

.lp-link,
.lp-button.lp-link,
.lp-link:hover,
.lp-link:focus,
.lp-button.lp-link:hover,
.lp-button.lp-link:focus {
  color: #049DAD;
  background-color: transparent;
  text-decoration: none;
}

/* White variant: white text, same no-box + arrow behavior. */
.lp-link-white,
.lp-button.lp-link-white,
.lp-link-white:hover,
.lp-link-white:focus,
.lp-button.lp-link-white:hover,
.lp-button.lp-link-white:focus {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

/* Trailing arrow after link-style buttons. */
.lp-button.lp-link::after,
.lp-link::after,
.lp-button.lp-link-white::after,
.lp-link-white::after {
  content: "\2192";
  margin-left: 6px;
  display: inline-block;
}

/* Secondary button: transparent, same sizing. */
.lp-button.secondary,
.lp-button.btn-secondary {
  background-color: var(--lp-button-secondary-bg);
  color: var(--lp-button-secondary-color);
  border-color: var(--lp-button-secondary-border);
}

.lp-button.secondary:hover,
.lp-button.secondary:focus,
.lp-button.btn-secondary:hover,
.lp-button.btn-secondary:focus {
  background-color: var(--lp-button-secondary-bg);
  color: var(--lp-button-secondary-color);
  border-color: var(--lp-button-secondary-border);
  text-decoration: none;
}

/* Outline button: white background, colored border + colored text. */
.lp-button.outline,
.lp-button.outline:hover,
.lp-button.outline:focus {
  background-color: transparent;
  color: var(--lp-button-bg);
  border-color: var(--lp-button-bg);
  text-decoration: none;
}

/* White button: white background, no border, colored text. */
.lp-button.white-btn,
.lp-button.white-btn:hover,
.lp-button.white-btn:focus {
  background-color: #ffffff;
  color: var(--lp-button-bg);
  border-color: #ffffff;
  text-decoration: none;
}

/* Right side notes section (editor content) - translucent card. */
.lp-two-col__notes {
  width: 380px;
  max-width: 100%;
  background-color: #FFFFFF26;
  border-width: 1px;
  border-style: solid;
  border-color: #ACE2EB;
  border-radius: 8px;
  padding: 24px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  border-left-width: 8px;
}

.lp-two-col__notes h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.lp-two-col__notes p:first {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.lp-two-col__notes :first-child {
  margin-top: 0;
}

.lp-two-col__notes :last-child {
  margin-bottom: 0;
}

/* Links inside the right-side notes card are white. */
.lp-two-col__notes a,
.lp-two-col__notes a:hover,
.lp-two-col__notes a:focus {
  color: #ffffff;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Responsive: stack columns on tablet and below.
 * ---------------------------------------------------------------------- */

@media (max-width: 991px) {
  .lp-two-col {
    padding: 56px 20px;
  }

  .lp-two-col__left,
  .lp-two-col__right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Let the notes card span full width when the columns stack. */
  .lp-two-col__notes {
    width: 100%;
  }

  .lp-banner .lp-two-col__title {
    font-size: 32px;
  }

  .lp-twocol .lp-two-col__title {
    font-size: 28px;
  }

  .lp-twocol--no-image .lp-two-col__left {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Logos section paragraph.
 * ---------------------------------------------------------------------- */

.lp-logos {
  width: 100%;
  padding: 60px 20px;
}

/* Inner content constrained to 1170px and centered. */
.lp-logos__inner {
  max-width: 1170px;
  padding: 0px 14px;
  margin: 0 auto;
  width: 100%;
}

.lp-logos__title {
  margin: 0 0 32px;
  text-align: center;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
}

/* Dedicated logos-section title style. */
.lp-logos-title {
  margin: 0 0 32px;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #75CEDE;
}

/* Logo grid. */
.lp-logos__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 5px;
  row-gap: 5px;
  width: 100%;
}

/* Each logo box: auto width, grows to fill the full row width. */
.lp-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  height: 99px;
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #E2E2E2;
  border-radius: 8px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.lp-logos__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .lp-logos {
    padding: 40px 20px;
  }

  .lp-logos__title {
    font-size: 26px;
  }
}

/* -------------------------------------------------------------------------
 * Media & Caption Blocks paragraph (article-style card).
 * ---------------------------------------------------------------------- */

.project-views-block .views-view-responsive-grid__item,
.lp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #E2E2E2;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Linked card: remove default anchor styling and add hover affordance. */
.lp-card--link {
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.lp-card--link:hover,
.lp-card--link:focus {
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Top media (fixed height, does not grow). */
.lp-card__media {
  width: 100%;
  line-height: 0;
  flex: 0 0 auto;
}

.lp-card__media img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
}

/* Body with grey background - grows to fill the remaining card height so
   shorter cards don't leave white space below the text. */
.lp-card__body {
  background-color: #F5F5F5;
  padding: 28px;
  flex: 1 1 auto;
}

.lp-card__title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: #1a1a1a;
}

.lp-card__description {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

.lp-card__description :first-child {
  margin-top: 0;
}

.lp-card__description :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Single column section (grid wrapper for inner cards).
 * ---------------------------------------------------------------------- */

.lp-section {
  width: 100%;
  padding: 60px 20px;
}

.lp-section__inner {
  max-width: 1170px;
  padding: 0px 14px;
  margin: 0 auto;
  width: 100%;
}

/* Title / description fonts reference the two-column-with-image section. */
.lp-section__eyebrow {
  margin: 0 0 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #75CEDE;
}

.lp-section__title {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2;
  color: #1a1a1a;
}

.lp-section__description {
  margin: 0 0 32px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

/* Spacing between multiple inner_sections groups. */
.lp-section__sections > * + * {
  margin-top: 40px;
}

.lp-inner + .lp-inner {
  margin-top: 40px;
}

/* Grid of inner cards: column count comes from --lp-cols (set inline from
   the parent's field_number_of_column). */
.lp-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--lp-cols, 3), 1fr);
  gap: 12px;
  align-items: stretch;
}

/* The field wrapper participates transparently so .field__item cells become
   the direct grid children. */
.lp-section__grid > .field__items,
.lp-section__grid > .field {
  display: contents;
}

/* Each field item is a grid cell; the card fills it. */
.lp-section__grid .field__item {
  min-width: 0;
}

.lp-section__grid .field__item > .paragraph,
.lp-section__grid .paragraph {
  height: 100%;
}

.lp-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  justify-content: center;
}

/* When the buttons are not the last block, add bottom spacing to separate
   them from the content that follows. */
.lp-section__buttons--mid {
  padding-bottom: 40px;
}

/* Responsive: collapse to fewer columns on smaller screens. */
@media (max-width: 991px) {
  .lp-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .views-view-responsive-grid {
     grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .lp-section__grid {
    grid-template-columns: 1fr;
  }
  .views-view-responsive-grid {
     grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
 * Icon Feature Blocks paragraph (icon card).
 * ---------------------------------------------------------------------- */

.lp-icon-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 28px;
  border-radius: 12px;
  border: 1px solid #DDEBEA;
  background-color: #ffffff;
}

/* Icon + short title inline. */
.lp-icon-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.lp-icon-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #DDEBEA;
  background-color: #ffffff;
  flex: 0 0 auto;
}

.lp-icon-card__icon img {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
}

/* Short title (inline with icon). */
.lp-icon-card__eyebrow {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #1a1a1a;
}

/* Title - same sizing as the media caption card title. */
.lp-icon-card__title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: #1a1a1a;
}

/* Description - same sizing as the media caption card description. */
.lp-icon-card__description {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

.lp-icon-card__description :first-child {
  margin-top: 0;
}

.lp-icon-card__description :last-child {
  margin-bottom: 0;
}

/* Link with trailing arrow. */
.lp-icon-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--lp-button-bg);
  text-decoration: none;
}

.lp-icon-card__link:hover,
.lp-icon-card__link:focus {
  color: var(--lp-button-bg);
  text-decoration: none;
}

/* No title: align description (and link) under the short title, i.e. offset
   past the icon (icon width 48px + head gap 12px). */
.lp-icon-card--no-title .lp-icon-card__head {
  margin-bottom: 8px;
}

.lp-icon-card--no-title .lp-icon-card__description,
.lp-icon-card--no-title .lp-icon-card__link {
  margin-left: 46px;
  color: #6B7280;
}

.paragraph--type--report-section .lp-two-col__row {
  border: 1px solid #DDEBEA;
  padding: 28px;
  border-radius: 8px;
}

.paragraph--type--report-section .lp-two-col__description,
.paragraph--type--report-section .lp-two-col__description p {
  margin: 0px;
}

.paragraph--type--report-section  .lp-four-col__row {
  margin-top: 50px;
}

.paragraph--type--report-section  .lp-four-col__row .field__item {
  border: 1px solid #DDEBEA;
  padding: 18px;
  border-radius: 5px;
}

.paragraph--type--report-section  .lp-four-col__row .field__item h4 {
  font-weight: 700;
  font-size: 30px;
  color: #7BC8D0;
}

.paragraph--type--report-section  .lp-four-col__row .field__item h5 {
  font-weight: 600;
  font-size: 12px;
}

.paragraph--type--report-section  .lp-four-col__row .field__item p {
  font-size: 12px;
  color: #949494;
  margin: 0px;
}

/* -------------------------------------------------------------------------
 * Features Section paragraph (card with notes banner + tick list).
 * ---------------------------------------------------------------------- */

.lp-features {
  width: 100%;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #E2E2E2;
  background-color: #ffffff;
}

.lp-features__inner {
  width: 100%;
}

.lp-features__title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: #1a1a1a;
}

.lp-features__description {
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

/* Highlighted notes banner with inline icon. */
.lp-features__notes {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 28px;
  border: 1px solid #8ED8AC;
  border-left: 8px solid #8ED8AC;
  border-radius: 8px;
  background-color: #F9FDFB;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.4;
}

.field--name-field-inner-sections .lp-features:nth-child(2) .lp-features__notes {
  border: 1px solid #FFC600;
  border-left: 8px solid #FFC600;
  background-color: #FFFCF2;
}

.lp-features__notes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid #8ED8AC;
  background-color: #ffffff;
}

.field--name-field-inner-sections .lp-features:nth-child(2) .lp-features__notes .lp-features__notes-icon {
  border: 1px solid #FFC600;
}

.lp-features__notes-icon img {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
}

.lp-features__notes-text {
  flex: 1 1 auto;
}

/* Feature list with tick marks. */
.lp-features__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.lp-features__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
}

.lp-features__tick {
  color: #049DAD;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  flex: 0 0 auto;
}

/* Bottom buttons. */
.lp-features__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* -------------------------------------------------------------------------
 * Journey section (numbered steps with connecting line).
 * ---------------------------------------------------------------------- */

.lp-journey {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 40px;
}

.lp-journey__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

/* Horizontal connecting line between steps (desktop). */
.lp-journey__step::before {
  content: "";
  position: absolute;
  top: 36px; /* vertically centered on the 72px marker */
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #DDEBEA;
  z-index: 0;
}

.lp-journey__step:first-child::before {
  display: none;
}

/* Circular icon + number badge. */
.lp-journey__marker {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}

.lp-journey__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #DDEBEA;
}

.lp-journey__icon img {
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
}

/* Number badge on the top-right of the icon. */
.lp-journey__number {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #0F5B6D;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

h4.lp-journey__title {
  font-size: 16px;
  line-height: 1.2;
  color: #333;
  margin-bottom: 12px;
}

.lp-journey__description {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #6B7280;
}

/* Mobile: stack vertically with a vertical connecting line. */
@media (max-width: 767px) {
  .lp-journey {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-journey__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    padding: 0 0 28px 0;
  }

  /* Vertical line running down through the markers. */
  .lp-journey__step::before {
    top: 72px;
    left: 35px; /* center of the 72px marker (36px) minus half line width */
    width: 2px;
    height: 100%;
    background-color: #D9E7EA;
  }

  .lp-journey__step:last-child::before {
    display: none;
  }

  .lp-journey__marker {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .lp-journey__body {
    padding-top: 8px;
  }
}
.paragraph--type--two-column-with-image .lp-two-col__description,
.field--name-field-description p:last-child {
  margin-bottom: 0px;
}
.section-divider {
  max-width: 1170px;
  padding: 0px 14px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Process steps section (numbered step rows).
 * ---------------------------------------------------------------------- */

.lp-process {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-process__step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid #E2E2E2;
  background-color: #F5F5F5;
}

/* Numbered circle. */
.lp-process__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #0C5460;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.lp-process__body {
  flex: 1 1 auto;
  min-width: 0;
}

.lp-process__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #1a1a1a;
}

.lp-process__description {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

.lp-process__description :first-child { margin-top: 0; }
.lp-process__description :last-child { margin-bottom: 0; }

/* Row of arrow links under the step text. */
.lp-process__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * Support with help note section.
 * ---------------------------------------------------------------------- */

.lp-support {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

.lp-support__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Menu list: two-column grid of link pills. */
.lp-support__menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lp-support__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  background-color: #ffffff;
  text-decoration: none;
  color: #1a1a1a;
}

.lp-support__item:hover,
.lp-support__item:focus {
  text-decoration: none;
  color: #1a1a1a;
}

.lp-support__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lp-support__item-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.lp-support__item-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

/* Arrow link below the menu. */
.lp-support__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}

/* Right-side "Need help?" note card with teal left accent. */
.lp-support__aside {
  flex: 0 0 320px;
  max-width: 320px;
}

.lp-support__note {
  border-left: 4px solid #049DAD;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 24px;
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
}

.lp-support__note :first-child { margin-top: 0; }
.lp-support__note :last-child { margin-bottom: 0; }

/* Responsive: stack the aside below the menu. */
@media (max-width: 991px) {
  .lp-support {
    flex-direction: column;
  }

  .lp-support__aside {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .lp-support__menu {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
 * Tabs section.
 * ---------------------------------------------------------------------- */

.lp-tabs {
  width: 100%;
}

/* Pill tab navigation. */
.lp-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.lp-tabs__tab {
  appearance: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #0F5B6D;
  background-color: #ffffff;
  color: #0F5B6D;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  transition: none;
}

.lp-tabs__tab.is-active {
  background-color: #0F5B6D;
  border-color: #0F5B6D;
  color: #ffffff;
}

/* Panels. */
.lp-tabs__panel[hidden] {
  display: none;
}

.lp-tabs__title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #1a1a1a;
}

.lp-tabs__description {
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

.lp-tabs__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 28px 0;
}

/* FAQ block. */
.lp-tabs__faq {
  margin-top: 28px;
  padding: 28px;
  border-radius: 12px;
  background-color: #F5F5F5;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

.lp-tabs__faq :first-child { margin-top: 0; }
.lp-tabs__faq :last-child { margin-bottom: 0; }

/* Views section block inside inner sections (full width). */
.lp-inner__views {
  width: 100%;
}

/* Image credit in the bottom corner of the top banner background image. */
.lp-banner__image-credit {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 1;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
}
.project-views-block .views-view-responsive-grid__item {
  position: relative;
}
.certification-level {
  position: absolute;
  top: 135px;
  left: 20px;
  background: #B5B2AB;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
}