/* Home page */
.rgs-home {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.rgs-intro {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
.rgs-intro__heading {
  flex: 2 1 0;
}
.rgs-intro__body {
  flex: 3 1 0;
}
.rgs-cards {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: stretch;
}
.rgs-card {
  flex: 1 1 0;
  background: #fff;
  border-radius: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.rgs-card__img img {
  width: 100%;
  min-height: 95px;
  object-fit: cover;
  display: block;
}
.rgs-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rgs-card__body h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 12px;
}
.rgs-card__body p {
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1;
}
.rgs-card__body p.last {
  flex: 0;
}
@media (max-width: 992px) {
  .rgs-intro {
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .rgs-cards {
    flex-direction: column;
  }

  .rgs-card {
    flex: 0 0 auto;
    width: 100%;
  }

  .rgs-card__body p {
    flex: 0 0 auto;
  }
}

/* HP Product Categories layer */

.hp-solutions .prodcards {
	display: flex;
	flex-direction: row;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
}
.hp-solutions .prodcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}
.hp-solutions h2 {
	color: #fff;
}
.hp-solutions .prodcard a {
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
}
.hp-solutions .prodcard a:hover,
.hp-solutions .prodcard a:focus {
	text-decoration: underline;
}

/* PRODUCTS */

/* Main Products page */
.linkcursor {
  cursor: pointer;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 3rem;
}
.products-grid h3 {
	margin-top: 1rem;
}
.products-grid img {
  width: 100%;
  height: auto;
  border-radius: 25px;
}
@media (max-width: 960px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* Product Category */
.block-field-blocknodeproduct-categoryfield-body {
	margin-top: 1.5rem;
}
.product-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
}
.product-intro-grid h4 {
	margin-bottom: 20px;
}
.intro-image {
	text-align: center;
}
.intro-image img {
  max-width: 550px;
  width: 100%;
}
.product-intro-grid .full-width {
  grid-column: 1 / -1;
}
@media (max-width: 872px) {
  .product-intro-grid {
    grid-template-columns: 1fr;
  }
}

.prodcol {
  min-width: 0;
}
.square-card-container {
  height: 100%;
}
.block-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #f3f3f3;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.block-link:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.square-card-img-container {
  position: relative;
  aspect-ratio: 1 / 0.62;
  overflow: hidden;
}
.square-card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
}
.square-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 18px 20px;
  text-align: center;
  background: #f6f6f6;
  flex: 1;
}
.card-byline {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.18;
  font-weight: 400;
  color: #4a4a4a;
}
.card-byline em {
  font-style: italic;
}
.square-card-bottom p {
  margin: 0;
}
.novelty-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #47a9ff;
}
.square-card-img-overlay {
  display: none;
}
.block-link:hover .square-card-img-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.85);
  padding: 16px;
}
.overlay-border {
  padding: 16px;
  color: #fff;
  text-align: center;
}
.quote-wrapper p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary, #5f5e5a);
}
.byline-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.byline-role::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 10px;
  background: #c5c5c5;
}

.product-grid {
  margin-top: 1.5rem;
}

/* Flex container */
.region .view.product-grid .view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 34px 42px;
  margin: 0 auto;
}

/* 3 columns default */
.region .view.product-grid .view-content > div {
  flex: 0 0 calc((100% - 84px) / 3);
  min-width: 0;
}

/* Tablet: 2 columns at 992px */
@media (max-width: 992px) {
  .region .view.product-grid .view-content {
    gap: 28px;
  }
  .region .view.product-grid .view-content > div {
    flex: 0 0 calc((100% - 28px) / 2);
  }
}

/* Mobile: 1 column at 576px */
@media (max-width: 576px) {
  .region .view.product-grid .view-content {
    gap: 22px;
  }
  .region .view.product-grid .view-content > div {
    flex: 0 0 100%;
  }
}



/* Product Hero */
.product-hero h1 {
	font-size: 2.8rem;
}
.product-hero h5 {
	max-width: 880px;
	line-height: 175%; 
}

/* Product Title and Tagline */
.product-header {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 50px;
	padding-bottom: 15px;
}
/* Product Intro, Key Features, Download Buttons & Images */
/* 
/* product intro wrapper */
.layout--twocol-section.layout--twocol-section--50-50.region-product-intro {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px;
  max-width: 1370px;
  margin: 0 auto;
  padding: 0 50px 10px;
  box-sizing: border-box;
}
/* default: equal columns inside the container */
.layout--twocol-section.layout--twocol-section--50-50.region-product-intro
  > .product-intro.layout__region--first,
.layout--twocol-section.layout--twocol-section--50-50.region-product-intro
  > .product-intro.layout__region--second {
  flex: 0 0 calc((100% - 50px) / 2);
  max-width: calc((100% - 50px) / 2);
  min-width: 0;
}
/* left column: stack inner blocks with 20px vertical gap */
.layout--twocol-section.layout--twocol-section--50-50.region-product-intro
  > .product-intro.layout__region--first {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 490px;
}
/* right column images */
.layout--twocol-section.layout--twocol-section--50-50.region-product-intro
  > .product-intro.layout__region--second img {
  display: block;
  width: 100%;
  height: auto;
}
/* below 1110px:
   hold left at 490px, let right side shrink */
@media (max-width: 1110px) {
		.product-header {
			padding-left: 30px;
			padding-right: 30px;
			padding-top: 30px;
		}
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro {
    gap: 40px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro
    > .product-intro.layout__region--first {
    flex: 0 0 490px;
    max-width: 490px;
    min-width: 490px;
  }
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro
    > .product-intro.layout__region--second {
    flex: 1 1 auto;
    max-width: calc(100% - 490px - 40px);
    min-width: 0;
  }
}
/* stack at 992px */
@media (max-width: 992px) {
		.product-header {
			padding-left: 20px;
			padding-right: 20px;
		}
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro {
    flex-direction: column;
    gap: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro
    > .product-intro.layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50.region-product-intro
    > .product-intro.layout__region--second {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}


.layout--twocol-section--50-50 {
  display: flex;
  align-items: flex-start;
}
.layout--twocol-section--50-50 > .region-product-intro-text,
.layout--twocol-section--50-50 > .region-product-intro-image {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}
.layout--twocol-section--50-50 > .region-product-intro-text {
  min-width: 472px;
}
.layout--twocol-section--50-50 > .region-product-intro-image {
  flex: 1 1 auto;
}
@media (max-width: 1110px) {
  .layout--twocol-section--50-50 > .region-product-intro-text {
    flex: 0 0 472px;
    max-width: 472px;
    min-width: 472px;
  }
  .layout--twocol-section--50-50 > .region-product-intro-image {
    flex: 1 1 auto;
    max-width: calc(100% - 472px);
    min-width: 0;
  }
  .layout--twocol-section--50-50 > .region-product-intro-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 992px) {
  .layout--twocol-section--50-50 {
    flex-direction: column;
  }
  .layout--twocol-section--50-50 > .region-product-intro-text,
  .layout--twocol-section--50-50 > .region-product-intro-image {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}


.view-all {
	padding: 20px 50px;
}

/* CENTRAL CONTENT CALLOUT */
.product-callout-wide {
  display: flex;
  width: 100%;
  margin: 1.5rem 0 2rem;
  border: 1px solid #777;
  border-radius: 2rem;
  overflow: hidden;
  background: #fff;
}
/* left side image panel */
.product-callout-wide__media {
  flex: 0 0 34%;
  min-height: 220px;
  background-image: url('/sites/default/files/inline-images/new-light-bulb.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* right side text panel */
.product-callout-wide__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 2.25rem 2rem;
}
.product-callout-wide__title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  line-height: 1.08;
  font-weight: 400;
  color: #222;
}
.product-callout-wide__text {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.45;
  color: #333;
  max-width: 47rem;
}
.product-callout-wide__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 170px;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: #12a8e0;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
/* stack below 768 */
@media (max-width: 768px) {
  .product-callout-wide {
    flex-direction: column;
  }
  .product-callout-wide__content {
    order: 1;
    padding: 1.5rem;
  }
  .product-callout-wide__media {
    order: 2;
    flex: none;
    min-height: 180px;
    width: 100%;
  }
  .product-callout-wide__title {
    font-size: 1.5rem;
  }
  .product-callout-wide__text {
    max-width: none;
  }
}

/* Overview, Specs, Related Products */
.overview {
	padding: 0 50px;
	margin: 50px 0;
}
.overview .field--name-field-include-reference.field__items {
	display: flex;
	flex-direction: row;
	gap: 110px;
}
.overview h2 {
	font-size: 1.9rem;
	font-weight: 500;
}
.overview h4 {
	font-size: 1.1rem;
	font-weight: 500;
}
.overview h5 {
	margin-bottom: 25px;
}
/* Demo page! */
body.node-94,
.node-94 .dialog-off-canvas-main-canvas {
    height: auto !important;
    min-height: 100vh;
}
.node-94 article .layout__region {
    margin: 0 auto;
}
.node-94 .block-field-blocknodesection-landing-pagefield-body {
    background: #fff;
    border-radius: 0 0 25px 25px;
    color: #212529;
    overflow: hidden;
}
.node-94 .block-field-blocknodesection-landing-pagefield-body p {
    color: #212529;
}
/* ...but keep eyebrows (hero + aside) cyan — the dark body-paragraph color
   above otherwise out-ranks the .about-eyebrow rules. */
.node-94 .block-field-blocknodesection-landing-pagefield-body p.about-eyebrow {
    color: #00aeef;
}
.node-94 .block-field-blocknodesection-landing-pagefield-body h3 {
    color: #212529;
    padding: 25px 0;
}
/* 
.node-94 #fsForm-4752486 {
    border-radius: 0 0 25px 25px;
}
 */
.live-video-box {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}
.live-video-box video {
    display: block;
    margin: 0 0 -4px 0;
    border-radius: 25px 25px 0 0px;
    width: 100%;
    height: auto;
}

/* Section Content Block: Promo */
.region-cb-public-safety-demo h2 {
	font-size: 1.8rem;
	font-weight: 500;
	text-align: center;
}
.region-cb-public-safety-demo img {
	border-radius: 25px;
}
.layout--twocol-section.layout--twocol-section--50-50.region-cb-public-safety-demo {
	flex-wrap: nowrap;
	gap: 130px;
}
/* Why RGB */
.why-rgb .field--name-field-why-choose-header {
	text-align: center;
}
.why-rgb .field--name-field-include-reference  {
	display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.why-rgb .why-icon {
	display: block;
	margin: 0 auto 12px;
	width: 120px;
}
.why-rgb .field--name-field-include-reference h4 {
	max-width: 250px;
	margin: 0 auto 12px;
}
.why-rgb .field--name-field-include-reference .field__item {
	flex: 1 1 30%; /* grow, shrink, basis */
  min-width: 350px; /* helps them wrap when too narrow */
  padding: 1rem;
	text-align: center;
  box-sizing: border-box;
}
/* Breakpoint for stacking on smaller screens */
@media (max-width: 768px) {
  .why-rgb .field--name-field-include-reference .field__item {
    flex: 1 1 100%;
  }
}
/* Resources Articles */
.prod-articles h2 {
	font-size: 1.9rem;
	font-weight: 500;
	text-align: center;
}
.prod-articles h5 {
	text-align: center;
	margin-bottom: 30px;
}
.prod-articles p {
	text-align: center;
}
.article-teaser .field--name-field-image {
	margin-bottom: 15px;
}
.article-teaser .field--name-field-post-type,
.article-teaser .field--name-field-resource-type {
/* 	font-weight: 700; */
	margin-bottom: 15px;
	text-transform: uppercase;
}
.article-teaser .field--name-body {
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 15px;
}
.article-teaser.h4 {
	padding-left: 25px;
	padding-right: 25px;
	font-weight: 500;	
	font-size: 1.1rem;
}
.resources-card img {
	border-radius: 25px 25px 0 0;
}
.field--name-field-resources-articles {
	display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 85px;
}
.field--name-field-resources-articles > .field__item {
	background: white;
	text-align: center;
	border-radius: 25px;
}
/* Only apply to top-level field__item wrappers */
.field--name-field-resources-articles > .field__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 25px;
}
.field--name-field-resources-articles > .field__item .node__content,
.field--name-field-resources-articles > .field__item .layout--onecol {
	display: flex;
  flex-direction: column;
  flex: 1;
}
/* Ensure node fills its flex parent */
.field--name-field-resources-articles > .field__item > .node--view-mode-teaser {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Make sure resources-card fills node */
.field--name-field-resources-articles .resources-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Push last element to the bottom */
.field--name-field-resources-articles .block-extra-field-blocknodearticlelinks,
.field--name-field-resources-articles .block-field-blocknodeincludefield-resource-link {
  margin-top: auto;
}
.field--name-field-product-images .field__item {
  box-sizing: border-box;
  display: inline-block;
  margin: 0px 8px 8px 0;
  padding: 5px;
  text-align: center;
  width: 100px;
}
.field--name-field-product-images.field-type-image img {
  margin: 0;
}
.field--name-field-product-images .field__item:first-of-type {
  width: 100%;
}
.node--type-products.node--view-mode-full .block-field-blocknodeproductsfield-product-key-features {
	padding-left: 2rem;
}
.node--type-products.node--view-mode-full .field--name-field-product-key-features .field__item {
	display: list-item;
	list-style: disc;
	list-style-position: outside;
}
.field--name-field-related-products .layout__region {
	padding: 20px 0; 
}
.node--type-products.node--view-mode-full .field--name-field-download-links {
	display: flex;
	flex-flow: row;
	gap: 20px;
}
.node--type-products.node--view-mode-full .field--name-field-download-links a {
	background: #00aeef;
  border: 1px solid #00aeef;
	border-radius: 25px;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 10px 27px;
  text-transform: uppercase;
}
.products-main {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 40px 30px;
}
.products-main .field-item {
	width: 380px;
	background: #f7f7f7;
	border-radius: 25px;
}
.products-main .field-name-field-overview-image img {
	height: auto;
	width: 380px;
	border-radius: 25px 25px 0 0;
}
.products-main .group-prodcat-intro {
	padding: 20px;
	box-sizing: border-box;
}
.products-main .group-prodcat-intro h3 {
	color: #444;
	font-size: 20px;
	font-weight: normal;
	line-height: 120%;
}
@media (max-width: 992px) {
		.node--type-products.node--view-mode-full .products-callout-content {
			max-width: 440px;
		}
    .node--type-products.node--view-mode-full .callout-copy-block {
        margin: 300px 10px 10px 10px;
        max-width: 440px;
    }
}
.toggles h2 {
  background: url('/themes/custom/b5subtheme/images/plus-minus.png') no-repeat 5px -29px transparent;
  border-bottom: 1px solid #444;
  color: #444;
  cursor: pointer;
  font-weight: 300 !important;
  font-size: 24px;
  line-height: 50px;
  margin: 1px 0;
  padding-left: 40px;
  text-align: left;
}
.toggles h2.open {
  background: url('/themes/custom/b5subtheme/images/plus-minus.png') no-repeat 5px 14px transparent;
}
.toggles > .field__item,
.toggles > .field__items {
  display: none;
  padding: 18px 40px;
}
.toggles > .field--name-body {
	padding-top: 28px;
}
.toggles > .field--name-field-specifications {
	padding-top: 30px;
}

/* SOLUTIONS */
.portfolio-box {
  position: relative;
  display: block;
  overflow: hidden;
}
.portfolio-box img {
  width: 100%;
  display: block;
  border-radius: 25px;
}
.portfolio-box-caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
.project-name {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.solutions-alternating .text-content {
  padding: 2rem;
}
@media (min-width: 768px) {
  .solutions-alternating .text-content {
    padding: 3rem;
  }
}
.solutions-alternating h2 {
  font-size: clamp(1.5rem, 2.25vw, 1.75rem);
  margin-bottom: 15px;
  text-transform: uppercase;
}
.solutions-alternating p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* LANDING PAGES */
.region-lp-header {
	padding: 50px;
	display: flex;
	justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 100px;
}
.lp-header.layout__region--first {
	display: inline-block; 
	max-width: 500px;
}
.lp-header.layout__region--second {
	display: inline-block; 
	max-width: 700px;
}
.lp-header h2 {
	font-size: 1.8rem;
	font-weight: 500;
}
.lp-header p {
	line-height: 175%;
}
.patent-number {
	width: 260px;
}

/* AGGREGATE PAGES */
.aggregate-main .views-view-responsive-grid__item {
	background: #f7f7f7;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.aggregate-main .views-field-field-image img {
	border-radius: 25px 25px 0 0;
}
.aggregate-main .copy-block {
	padding: 20px 30px;
}
.aggregate-main .views-field-title h5 {
	line-height: 135%;
}

/* ARTICLES */
.page-node-type-article .layout--twocol-section {
	display: flex;
	flex-wrap: nowrap;
  gap: 100px;
}
.page-node-type-article main .container-fluid.m-0.p-0 {
	padding: 50px !important;
}
.page-node-type-article .article-type {
	margin: 0 0 1rem 8px;
}
.page-node-type-article .block-field-blocknodearticletitle {
	line-height: 130%;
	margin-bottom: 5px;
}
.page-node-type-article .block-field-blocknodearticlefield-byline {
	margin-top: 4px;
}
.page-node-type-article .field--name-field-publication-date {
	margin: 6px 0 .5rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8b8b8b;
}
.page-node-type-article .field--name-field-download-pdf {
	margin-bottom: 1rem;
}
.page-node-type-article .field--name-field-image {
	margin: 15px 0 20px;
}
.page-node-type-article .field--type-image {
	display: flex;
  justify-content: center;
  margin: 25px 0px;
}
.page-node-type-article .news-image {
	margin: 35px auto 25px;
	text-align: center;
}
.page-node-type-article .news-image img {
	max-width: 90%;
	height: auto;
}
.page-node-type-article .news-caption {
	font-style: italic;
	max-width: 90%;
	margin: 0 auto 35px;
	text-align: center;
}
.page-node-type-article .field--name-field-download-pdf .field__label,
.node--type-article.node--view-mode-full h3 {
	font-size: 1.4rem;
	font-weight: 300;
	margin: 20px 0;
}
.features-list {
}
.features-list li {
	margin-left: 15px;
}
.block-views-blockpress-releases-more-press-releases {
 	background-color: #8bdcff;
}
.block-views-blockproduct-news-block-2 { 
 	background: url('/sites/default/files/slide/zio-4000-plus-slide.jpg') no-repeat top left transparent;
 	background-size: cover;
 	background-attachment: fixed;
 }
.node-8 .field--name-field-landing-page-header {
 	background: url('/sites/default/files/slide/hp-hero-example.jpg') no-repeat top left transparent;
 	background-size: cover;
 	background-attachment: fixed;
 	padding-top: 50px;
 	padding-bottom: 50px;
 }
.node--type-article.node--view-mode-teaser .content-card {
	border-radius: 25px;
	max-width: 300px;
}
@media (max-width: 992px) {
  /* styles for screens under 1024px */
	.page-node-type-article .layout--twocol-section {
		flex-wrap: wrap;
  }
}

/* PRESS RELEASES */
.field--name-field-landing-page-header .callout-content {
	margin: 25px auto 50px;
	padding: 40px 30px;
	border-radius: 25px;
	min-height: 275px;
}
.field--name-field-landing-page-header .callout-copy-block {
	margin-left: 450px;
} 
@media (max-width: 992px) {
		.field--name-field-landing-page-header .callout-content {
			max-width: 440px;
		}
    .field--name-field-landing-page-header .callout-copy-block {
        margin: 300px 10px 10px 10px;
        max-width: 440px;
    }
}
.node--view-mode-full .view-press-releases .views-row {
    border-bottom: 1px solid #ccc;
    padding: 15px 10px 10px;
}
.node--view-mode-full .block-views-blockpress-releases-block-1 {
	padding-top: 15px;
	border-top: 1px solid #ccc;
	margin-top: 35px;
}
.field--name-field-landing-page-header .callout-content h6,
.view-press-releases .views-field-field-publication-date {
    color: #999;
    font-size: 12px;
}
.view-press-releases .views-field-title h3 {
    font-size: 15px;
    margin: 0 0 5px;
}
.view-display-id-more_press_releases {
	margin-top: 30px;
}

/* ARTICLE PAGES SIDEBAR BLOCKS */
.article-sidebar,
.article-footer {
	margin: 15px auto 50px auto;
}
.article-sidebar .view-content,
.article-footer .view-content {
	margin: 30px 0;
}
.article-sidebar .views-view-responsive-grid__item,
.article-footer .views-view-responsive-grid__item {
	background: #f9f9f9;
	border-radius: 25px;
}
.article-sidebar img,
.article-footer img {
	border-radius: 25px 25px 0 0;
}
.article-sidebar .views-field-title h5 {
	line-height: 135%;
	padding: 20px 30px 0px 30px;
} 
.article-footer .views-field-title h5 {
	line-height: 135%;
	padding: 5px 30px 5px 30px;
} 
.article-sidebar .views-field-field-publication-date,
.article-footer .views-field-field-publication-date {
	padding: 20px 30px 0 30px;
}
.article-sidebar .views-field-field-basic-body,
.article-footer .views-field-field-basic-body {
	padding: 0 30px 20px 30px;
}
.article-sidebar .event-details,
.article-footer .event-details {
	padding: 20px 22px 5px 22px;
	text-align: center;
}
.article-sidebar .event-button,
.article-footer .event-button {
	padding: 7px 30px 35px 30px;
	text-align: center;
}

/* EVENTS */
.hp-events .content-card {
	max-width: 1080px;
	margin: 0 auto;
}
.hp-events .header {
	text-align: center;
}
.hp-events h2,
.hp-events h6 {
	color: #fff;
}
.hp-events-buttons,
.main-events-buttons {
	display: flex;
	gap: 20px;
}
.hp-events .article-sidebar .views-view-responsive-grid__item {
 	border: 1px solid darkblue;
}
.event-title-block {
	text-align: center;	
}
.event-outlink {
	width: 12px;
	margin-bottom: 2px;
}
.event-section {
	padding: 40px 40px 10px 40px;
}
.event-section h2 {
	font-weight: 300;
	border-bottom: 1px solid #000;
	margin-bottom: 25px;
	padding-bottom: 25px;
}
.view-event-rsms .view-content,
.field--name-field-event-products {
	display: flex;
	gap: 20px;
	flex-direction: column;
}
.rsm-info {
	display: inline-flex;
	gap: 40px;
	flex-direction: row;
}
.rsm-phone {
	width: 275px;
}
.field--name-field-event-products .h5 {
	margin-bottom: 0;
}
.field--name-field-event-products .block-field-blocknodeproductsfield-product-tagline {
	font-size: 1rem;
}

/* VIDEO PRESENTATIONS */
.youtube-container {
    display: flex;
    margin: 20px auto;
}
.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin: 5px auto;
}
.block-field-blocknodevideofield-display-title {
	font-size: 2em;
/* 	font-weight: 700; */
	margin: 25px 0 0;
}
.video-details {
	display: flex;
	gap: 100px;
}
.video-details-col {
	flex: 1;
}
.blurvs {
	display: flex;
	flex-direction: column;
	padding: 25px 25px 0 25px;
}
.blurv {
	display: flex;
	gap: 30px;	
}
.blurv img {
	width: 60px; 
	height: auto;
}
.blurv h5 {
/* 	font-weight: 700; */
	text-transform: uppercase;
}
.speakervs {
  display: flex;
  flex-flow: column;
  gap: 25px;
}
.speakerv {
	display: flex;
	flex-flow: row;
  gap: 25px;
}
.speakerv img {
	width: 100px;
	height: fit-content;
	border-radius: 50px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* WEBINARS - Intro, Highlights, Download Buttons & Images */
.node--type-webinar {
}
.region-webinar-details {
	display: flex;
	justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 75px;
  margin: 0 auto;
}
.webinar-details {
	display: inline-block;
}
.block-field-blocknodewebinartype {
	margin: 100px 0 0 0;
	color: #fff;
	text-transform: uppercase;
}
.block-field-blocknodewebinartitle {
	color: #fff;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 72px;
	line-height: 95px;
	letter-spacing: -3px;
	font-style: normal;
	font-weight: bolder;
	margin: 0 0px 50px;
}
.block-field-blocknodewebinarfield-subhead {
	color: #fff;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	font-size: 22px;
	line-height: 150%;
	max-width: 700px;
	margin: 0 0 100px 0px;	
}
.block-field-blocknodewebinarfield-event-intro {
	padding-top: 190px;
}
.block-field-blocknodewebinarfield-contact-form {
	padding: 40px 10px 0 10px;
	background: #1e2465;
	border-radius: 25px;
}
.block-field-blocknodewebinarfield-contact-form h3 {
	color: #fff;
  font-size: 2em;
/*	font-weight: 700; */
}
.block-field-blocknodewebinarfield-event-intro h3,
.block-field-blocknodewebinarfield-webinar-body h3,
.block-field-blocknodevideofield-video-details h3 {
	font-size: 2em;
/* 	font-weight: 700; */
	margin: 25px 0;
}
.image-left-content-right {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 30px;
}
.blurb-container {
	display: flex;
}
.highlight-container {
	display: flex;
	padding: 25px 25px 0 25px;
}
.blurb-col {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.blurb-img {
	padding-top: 10px;
}
.blurb-img img {
	width: 60px; 
	height: auto;
}
.blurb-col h5 {
/* 	font-weight: 700; */
	text-transform: uppercase;
}
.webinar-speakers-container {
	display: flex;
	gap: 50px;
}
.webinar-speakers {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 15px;
	max-width: 390px;
	height: max-content;
}
.webinar-speakers img {
	width: 100px;
	height: auto;
	border-radius: 50px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.node-1149 .node__content {
	background: url('/sites/default/files/webinars/ipx-fak-webinar.jpg') no-repeat 50% 0 #fff;
}
.node-1150 .node__content {
	background: url('/sites/default/files/webinars/asis-webinar.jpg') no-repeat 50% 0 #fff;
}
.node-1151 .node__content {
	background: url('/sites/default/files/webinars/shorten-response-times-webinar.jpg') no-repeat 50% 0 #fff;
}
.field--name-field-more-webinars {
	display: flex;
	flex-direction: column;
}
.field--name-field-more-webinars .node__content {
	background: none;
}
.field--name-field-more-webinars .field__label {
	padding-bottom: 25px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 400;
}
.field--name-field-more-webinars .field__item img {
	border-radius: 25px 25px 0 0;
}
.field--name-field-more-webinars .field__item h3 {
	margin: 25px;
	justify-content: center;
}
.field--name-field-more-webinars .field__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  align-items: stretch;
}
.field--name-field-more-webinars .field__item {
  display: flex;
  background: #fff;
	border-radius: 25px;
}
.field--name-field-more-webinars .field__item > * {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.field--name-field-more-webinars .field__item .field--name-field-image {
  aspect-ratio: 16/9;
}
.field--name-field-more-webinars .field__item .field--name-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.field--name-field-more-webinars .field--name-field-teaser-summary {
	flex-direction: column;
	font-size: .9rem;
	line-height: 150%;
	margin: 0 25px 25px 25px;
}
.related-prods-ft,
.related-article-ft {
	background: #fff;
}
.block-field-blocknodevideofield-featured-products h2,
.block-field-blocknodevideofield-featured-case-studies h2 {
	font-size: 2em;
	margin: 0 0 25px 0;
}
.block-field-blocknodevideofield-featured-products .field--name-field-featured-products,
.block-field-blocknodevideofield-featured-case-studies .field--name-field-featured-case-studies {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.node--type-products.node--view-mode-featured-teaser .layout__region--first, 
.node--type-article.node--view-mode-featured-teaser .layout__region--first {
	flex: 0 1 30%;
	min-width: 350px;
}
.node--type-products.node--view-mode-featured-teaser .layout__region--second, 
.node--type-article.node--view-mode-featured-teaser .layout__region--second {
	flex: 0 1 70%;
	padding: 25px;
}
@media (max-width: 768px) {
  .field--name-field-more-webinars .field__items {
    grid-template-columns: 1fr;
  }
}

.node--type-aggregate-content .h1 {
  margin: 0 auto 25px;
}

/* SUPPORT */
.support-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 30px;
}
.support-container .banner {
	border: 1px solid #00aeef;
	border-radius: 25px;
	font-size: 1.5em;
	font-weight: 300;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
}
.support-container .copy {
	border: 1px solid #00aeef;
	border-radius: 25px;
	padding: 25px 25px 10px 25px;
}
.support-container h2 {
	margin: 10px 0 20px 0;
}
.support-column {
    display: flex;
		flex-direction: column;
    gap: 40px;
    max-width: 600px;
}
.support-form-column {
	width: 600px;
}
h2.support-header + .support-option  {
	padding-top: 25px;
}
.support-option {
	padding: 5px 20px 0 20px;
}
.support-resources {
	padding: 25px 20px 0 20px;
}
.support-main h3 {
	font-weight: 300;
	margin: 20px 0 0;
}
h2.support-header {
	border-bottom: 1px solid #000;
	padding-bottom: 25px;
	margin-bottom: 5px;
}
.support-form {
	border: 1px solid #00aeef;
	border-radius: 25px;
	padding: 5px 15px;
	margin: 15px 0;
	max-width: 550px;
}

/* CONTACT US */
.contact-form {
	border: 1px solid #00aeef;
	border-radius: 25px;
	padding: 5px 15px;
	margin: 15px 0;
	max-width: 800px;
}

/* SUPPORT AND PARTNER PORTAL BANNER */
.ts-pp {
  background: url('/sites/default/files/contact-support.jpg') no-repeat 75% 0 #201d1d;
	background-size: cover;
	display: inline-block;
	margin-top: 25px;
	width: 100%;
}
.ts-pp h2 {
	color: #fff;
	width: 480px;
	margin: 45px;
	line-height: 180%;
  font-size: 28px;
	display: inline-block;
	vertical-align: top;
}
.ts-pp .bttns {
	display: inline-block;
	vertical-align: top;
	text-align: right;
	max-width: 300px;
	padding: 0 35px;
	margin: 35px 0;
}
.ts-pp .bttns .bttn {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
	padding: 20px;
	width: fit-content;
}
.field-name-field-sf-rgb-event-id,
.field-name-field-sf-campaign-id,
.field-name-field-destination-url,
.field-name-field-destination-title {
	visibility: hidden;
	height: 0;
	width: 0;
}

/* CAREERS */
.view-jobs-bottom {
	margin: 25px 0;
	padding-top: 20px;
	border-top: 1px solid #00baff;
	text-align: right;
}
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text1 image1"
    "image2 text2";
  gap: 2rem 3rem;  
  align-items: center;
  padding: 25px 0;
}
/* Assign named areas */
.text1 { grid-area: text1; }
.image1 { grid-area: image1; }
.image2 { grid-area: image2; }
.text2 { grid-area: text2; }
/* Make images responsive */
.quad-grid img,
.duo-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 25px;
}
@media (max-width: 768px) {
  .quad-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text1"
      "image1"
      "text2"
      "image2";
		gap: 1.5rem;
		padding: 0 10px;
		width: 80%;
	  }
	.view-jobs-bottom {
		text-align: unset;
		}
	.careersmap {
		width: 84%;
		margin-top: 25px;
		}
}

.responsive-split,
.responsive-split-4060,
.responsive-split-5050 {
  display: grid;
  grid-template-columns: calc(60% - 4rem) calc(40% - 1rem);
  gap: 3rem; 
  align-items: start;
}
.responsive-split-4060 {
  grid-template-columns: calc(40% - 1.5rem) calc(60% - 1.5rem);
}
.responsive-split-5050 {
  grid-template-columns: calc(50% - 1.5rem) calc(50% - 1.5rem);
}
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "image2 text2";
  gap: 3rem;  
  align-items: start;
  padding: 25px 0;
}
@media (max-width: 992px) {
  .responsive-split,
	.responsive-split-4060,
	.responsive-split-5050 {
    grid-template-columns: 1fr; /* Stacks the columns */
 		gap: 1rem;  
  }  
	.duo-grid {
    grid-template-areas:
      "text2"
      "image2";
		grid-template-columns: 1fr; 
 		gap: 1rem;  
		}
}
#column1,
#column2 {
  max-width: 100%;
  box-sizing: border-box;
}
img.responsive-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* TRAINING PAGE */
.training-form {
	border: 1px solid #00aeef;
	border-radius: 25px;
	padding: 5px 15px;
	margin: 15px 0;
}

/* GENERAL CONTENT STYLES */
.pagination {
	padding: 50px 0;
	margin: 0;
}
.pagination li {
	list-style: none;
}
.pagination .page-link {
	background-color: #fff;
	color: #00aeef;
}
.pagination .page-link:hover,
.pagination .is-active .page-link,
.pagination .active .page-link {
	background: #00aeef;
	color: #fff;
}
.portal-support-contact {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.portal-support-contact .title-header {
	max-width: 400px;
}
.portal-support-contact .item {
	width: 250px;
	text-align: center;
}
.portal-support-contact .item a:hover {
	color: #00008b;
}
.psc-icon {
	display: block;
	margin: 0 auto 15px;
	width: 115px;
}

/*  Better Decisions page */
.bdf-landing-page main {
	background: #0a2d74;
	padding-bottom: 30px;
}
.bdf-landing-page .ccc.layout__region--content {
	background: url('/sites/default/files/basic-pages/body-images/bdf-top.jpg') no-repeat 0 0 #fff;
	border-radius: 25px;
	width: 940px;
}
.bdf-landing-page #main .content { 
	padding: 0;
}
.bdf-container {
	padding: 0 50px;
}
.bdf-container h1 {
	color: #fff;
	font-size: 44px;
	font-weight: 500;
	margin: 15px 0;
	text-shadow: 1px 1px 2px #000;
}
.bdf-container h2 {
	font-size: 30px;
	margin: 20px 0;
}
.bdf-container h3 {
	font-size: 22px;
	font-weight: 500;
	margin: 20px 0;
}
.bdf-container h4 {
	font-size: 15px;
	font-weight: 700;
}
.bdf-container ul.list1 {
	margin: 20px;
}
.bdf-container .list1 li {
	color: #fff;
	font-weight: 600;
	text-shadow: 1px 1px 2px #000;
	font-size: 18px;
	font-style: italic;
	line-height: 180%;
	list-style-type: none;
}
.bdf-container .headline, 
.bdf-container .headlist {
	width: 100%;
	max-width: 370px;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 150px 10px 170px 10px;
}
.bdf-container .headline {
	max-width: 465px;
}
.bdf-container .notlink {
	color: #009aff;
}
.bdf-container .prodbox2 {
 	display: grid;
  grid-template-columns: 15% 85%;
  gap: 25px;
	max-width: 100%;
	margin: 20px;
	padding: 25px;
	background: #f8f8f8;
	border-radius: 25px;
}
bdfimg-left-copy {
	padding-right: 25px
}
.bdf-container .prodbox5 {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	padding: 14px;
	margin: 12px;
	background: #f8f8f8;
	border-radius: 25px;
}
.bdf-container .bdficon-holder {
	margin: 0 15px 10px 0;
	height: 75px;
	width: 75px;
}
.bdf-container .prodbox4,
.bdf-container .prodbox4a,
.bdf-container .prodbox4b {
	max-width: 100%;
	margin: 0 10px;
	padding: 10px;
}
.bdf-container .prodbox1 .bdfimg-left img,
.bdf-container .prodbox2 .bdfimg-left img {
	display: inline-block;
	vertical-align: middle;
	width: 118px;
}
.bdf-container .bdfimg-left h4 {
	display: inline-block;
	vertical-align: middle;
	width: 200px;
}
.bdfimg-desks {
	width: 375px;
}
.bdfimg-desks img {
	width: stretch;
	width: -webkit-fill-available;
}
.bdf-container .our-solutions-action {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
}
.bdf-container .solutions-action {
  display: grid;
  grid-template-columns: 20% 65%;
  gap: 10px;
}
.bdf-container .prodbox6 {
	padding: 15px 20px;
	background: #f8f8f8;
	border-radius: 25px;
}
.bdf-container .prodbox3 {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 50px;
}
@media (max-width: 768px) {
	.bdf-container .our-solutions-action,
  .bdf-container .prodbox3,
  .bdf-container .solutions-action {
    grid-template-columns: 1fr;
  }
}


/* ABOUT US PAGE */

/* Scoped to .about-hero (not just .about-rgb) so the eyebrow + RGB rule also
   style heroes that aren't wrapped in .about-rgb — e.g. Training's field_hero. */
.about-rgb .about-eyebrow,
.about-hero .about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.about-rgb .about-rgb-rule,
.about-hero .about-rgb-rule {
	display: flex;
	gap: 6px;
	margin: 18px 0 22px;
}
.about-rgb .about-rgb-rule span,
.about-hero .about-rgb-rule span {
	height: 4px;
	width: 34px;
	border-radius: 2px;
	background: #C21B21;
}
.about-rgb .about-rgb-rule span:nth-child(2),
.about-hero .about-rgb-rule span:nth-child(2) {
	background: #048849;
}
.about-rgb .about-rgb-rule span:nth-child(3),
.about-hero .about-rgb-rule span:nth-child(3) {
	background: #00589C;
}

/* About hero */
.about-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	border-radius: 25px;
	padding: 60px 60px 0 60px;
	color: #fff;
}
.about-hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 90px;
	width: 100%;
	height: 260px;
	pointer-events: none;
	opacity: .5;
}
.about-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 50px;
	align-items: center;
}
.about-hero h1 {
	color: #fff;
	font-size: 2.6rem;
	line-height: 1.15;
	margin: 0;
	animation: aboutRise .7s ease-out both;
}
.about-hero h1 em {
	font-style: normal;
	color: #00aeef;
}
.about-hero .about-lead {
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.7;
	color: #c9d4f1;
	max-width: 54ch;
	animation: aboutRise .7s ease-out .15s both;
}
.about-hero .about-hero-bttns {
	margin: 28px 0 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	animation: aboutRise .7s ease-out .3s both;
}
.about-hero a.bttn.wht.ghost {
	color: #fff;
	border-color: rgba(255,255,255,.5);
}
.about-hero a.bttn.wht.ghost:hover {
	border-color: #fff;
}
/* Primary .bttn.blu on the dark design-system panels: the global hover
   turns it dark navy (#152973) and it vanishes against the panel. Flip
   to a white fill so it stays legible on navy. */
.about-hero a.bttn.blu:hover,
.about-cta-card.navy a.bttn.blu:hover {
	background: #fff;
	border-color: #fff;
	color: #14215c;
}
.about-hero-media {
	margin: 0;
	animation: aboutRise .9s ease-out .2s both;
}
.about-hero-media img {
	width: 100%;
	height: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: 25px;
	box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.about-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 45px 0 0;
	padding: 28px 0 34px;
	border-top: 1px solid rgba(255,255,255,.18);
}
.node--view-mode-full .about-stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
}
.about-stats .stat-num {
	font-size: 2.2rem;
	font-weight: 300;
	color: #00aeef;
	line-height: 1;
}
.about-stats .stat-label {
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #aab6da;
}

/* About shared section bits */
.about-rgb section {
	margin: 25px 0 50px;
}
.about-rgb .about-hero {
	margin: 0;
}
.about-rgb section:last-child {
	margin-bottom: 0;
}
.about-rgb .about-sec-head {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}
.about-rgb .about-sec-head h2 {
	font-size: 2.1rem;
}
.about-rgb .about-sec-lead {
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #444;
}

/* Capabilities grid */
.about-cap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.node--view-mode-full .about-cap-grid li.about-cap-card {
	list-style: none;
	position: relative;
	overflow: hidden;
	background: #fafafa;
	border-radius: 25px;
	padding: 30px 28px 24px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.about-cap-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	width: 40%;
	background: #00baff;
	transform: translateX(-110%);
	transition: transform .3s ease;
}
.about-cap-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(6,13,36,.12);
}
.about-cap-card:hover::before {
	transform: translateX(0);
}
.about-cap-card img {
	height: 56px;
	width: auto;
	margin-bottom: 14px;
}
.about-cap-card h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.about-cap-card p {
	font-size: .92rem;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

/* Centered card grids for Solutions pages. Pairs with .about-cap-grid
   (keeps the card styling) but switches to flex so an incomplete final
   row stays centered — e.g. 5 cards in 3 columns. Add .cap-4 for a
   four-up row (e.g. 4 case studies). Responsive: 2-up, then 1-up. */
.cap-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.cap-center > .about-cap-card {
	flex: 0 1 calc(33.333% - 28px);
}
.cap-center.cap-4 > .about-cap-card {
	flex-basis: calc(25% - 31.5px);
}
@media (max-width: 992px) {
	.cap-center > .about-cap-card,
	.cap-center.cap-4 > .about-cap-card {
		flex-basis: calc(50% - 21px);
	}
}
@media (max-width: 600px) {
	.cap-center > .about-cap-card,
	.cap-center.cap-4 > .about-cap-card {
		flex-basis: 100%;
	}
}

/* Two-up media-card grid (Solutions markets). Larger images than the 3-up
   product grid, so the two landing pages read as distinct. The .cap-center
   992/600 rules above already drop these to 50%/100% on smaller screens. */
.cap-center.cap-2 > .about-cap-card {
	flex-basis: calc(50% - 21px);
}
.cap-2 .about-cap-card.sol-media img {
	height: 240px;
}
/* This base .cap-2 rule (3 classes) out-specifies the generic .cap-center
   stacking rule (2 classes) in the @media blocks above, so cap-2 needs its
   own equally-specific stack rule to collapse to one column on phones. */
@media (max-width: 600px) {
	.cap-center.cap-2 > .about-cap-card {
		flex-basis: 100%;
	}
	.cap-2 .about-cap-card.sol-media img {
		height: 200px;
	}
}

/* The Solutions landing (node 1121, aggregate_content) carries its headline
   in the in-body hero, so hide the Layout Builder title block to avoid a
   duplicate "Solutions" heading above the hero. */
.node-1121 .block-field-blocknodeaggregate-contenttitle {
	display: none;
}
/* Same for the Resources aggregate pages — their new .agg-hero carries the
   section heading (eyebrow + headline), so suppress the duplicate LB title:
   Case Studies (1138), Blog (1139), Product News (1122), Press Releases (1118),
   Events (1119). */
.node-1138 .block-field-blocknodeaggregate-contenttitle,
.node-1139 .block-field-blocknodeaggregate-contenttitle,
.node-1122 .block-field-blocknodeaggregate-contenttitle,
.node-1118 .block-field-blocknodeaggregate-contenttitle,
.node-1119 .block-field-blocknodeaggregate-contenttitle {
	display: none;
}

/* Photo-background hero variant (Products + Solutions). Same contained, rounded
   block as the other heroes, but the page's kept image sits under a dark,
   left-heavy gradient overlay so the white copy stays legible while the photo
   still reads on the right. Pairs with .about-hero.sol-hero +
   .about-hero-inner.sol-1col. The image itself is set per page by a
   .hero-photo--<page> modifier so the overlay/sizing stay shared. */
.about-hero.hero-photo {
	background-color: #0a1024;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 64px 60px;
}
.about-hero.hero-photo .about-lead {
	color: #e7edff;
}
.about-hero.hero-photo--products {
	background-image:
		linear-gradient(105deg, rgba(6,13,36,.94) 26%, rgba(20,33,92,.64) 60%, rgba(6,13,36,.34) 100%),
		url('/sites/default/files/default_images/landing-page-hero-bg.jpg');
}
.about-hero.hero-photo--solutions {
	background-image:
		linear-gradient(105deg, rgba(6,13,36,.95) 28%, rgba(20,33,92,.66) 58%, rgba(6,13,36,.40) 100%),
		url('/sites/default/files/solutions/rgb-spectrum-solutions-everywhere.jpg');
}
.about-hero.hero-photo--contact {
	background-image:
		linear-gradient(105deg, rgba(6,13,36,.94) 26%, rgba(20,33,92,.64) 60%, rgba(6,13,36,.34) 100%),
		url('/sites/default/files/basic-pages/body-images/connect-with-rgb-spectrum.jpg');
}
/* Contact (node 1175): the hero and the content below it are separate stacked
   blocks in the same Layout Builder section with no gap between them. Give the
   content block a 50px top margin so the hero-to-content spacing matches the
   house pages (e.g. Subscribe). Mirrors the Demo node-94 rule above. */
.node-1175 .responsive-split-4060 { margin-top: 50px; }
.about-hero.hero-photo--support {
	background-image:
		linear-gradient(100deg, rgba(6,13,36,.95) 24%, rgba(13,24,68,.66) 54%, rgba(6,13,36,.30) 100%),
		url('/sites/default/files/basic-pages/body-images/rgb-tech-support.jpg');
}
.about-hero.hero-photo--training {
	background-image:
		linear-gradient(100deg, rgba(6,13,36,.95) 24%, rgba(13,24,68,.66) 54%, rgba(6,13,36,.30) 100%),
		url('/sites/default/files/basic-pages/body-images/elearning-training.jpg');
}
/* Training hero: left-aligned copy + light (300) headline per house preference. */
.about-hero.hero-photo--training .about-hero-copy { text-align: left; }
.about-hero.hero-photo--training h1 { font-weight: 300; }
/* The hero + body sit in adjacent bare Layout-Builder blocks (no frp frame
   between them), so the hero supplies its own 50px gap to the content below. */
.about-hero.hero-photo--training { margin-bottom: 50px; }

/* Demo (node 94, section_landing_page): in-body hero carries the H1 and the
   kept demo-room video as the hero background, so suppress the duplicate LB
   title and the full-width header region (that region has no .ccc container,
   so it can't be 1280-contained — same treatment as Products node 1144). */
.node-94 .block-field-blocknodesection-landing-pagetitle,
.node-94 .block-field-blocknodesection-landing-pagefield-landing-page-header { display: none; }
/* 50px gap from the video hero down to the request form. */
.node-94 .responsive-split { margin-top: 50px; }
/* Refurbished Products (node 1182): demo-style hero + split form; supply the
   50px gap from the in-body hero down to the form split. */
.node-1182 .responsive-split { margin-top: 50px; }
/* Demo's LB sections use a 1000px container (ccc-1000) while the other house
   pages use 1280px (.ccc); widen just this node so the hero lines up with them.
   Scoped to node 94 to avoid touching the shared section_landing_page display. */
.node-94 .ccc-1000 { max-width: 1280px; }
/* Demo left column "Explore" aside — fills the column beside the request form
   with quick links to the rest of the site instead of leaving it bare. */
.demo-aside { margin-top: 40px; }
/* p.about-eyebrow (not just .about-eyebrow) so this out-ranks the node-94
   `.block-...field-body p { color:#212529 }` rule that otherwise darkens it. */
.demo-aside p.about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.demo-links { list-style: none; margin: 0; padding: 0; }
/* Beat the global `.node--view-mode-full li { list-style: disc }` (rgb10.css
   loads after content.css, so it wins at equal specificity) — keep these clean
   like the demo page on every page that uses .demo-links. */
.node--view-mode-full .demo-links li,
.demo-links li { list-style: none; border-top: 1px solid #e6e9f0; }
.demo-links li:last-child { border-bottom: 1px solid #e6e9f0; }
.demo-links a { display: block; padding: 14px 2px; text-decoration: none; }
.demo-links .dl-title {
	display: block;
	color: #14215c;
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 3px;
	transition: color .2s ease;
}
.demo-links .dl-desc { display: block; color: #5a6473; font-size: .85rem; line-height: 1.5; }
.demo-links a:hover .dl-title { color: #00aeef; }

/* Video-background hero: same contained/rounded/overlaid block as .hero-photo,
   but an autoplay-muted-loop <video> sits behind the navy overlay instead of a
   still image. Pair with .hero-photo (for the padding/box) + .sol-hero. */
.about-hero.hero-video .about-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.about-hero.hero-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* The demo poster (personal-wall.png) is much brighter/busier than the
	   other hero photos, so the standard overlay let the cyan eyebrow + the
	   "SPECTRUM" watermark wash through. Darken it across the board, with a
	   solid floor so the top-left copy is always legible. */
	background:
		linear-gradient(100deg, rgba(6,13,36,.97) 30%, rgba(10,18,50,.84) 62%, rgba(6,13,36,.62) 100%),
		rgba(6,13,36,.32);
}
.about-hero.hero-video .about-hero-inner { z-index: 2; }
/* Demo hero: left-aligned + light (300) headline, matching the training hero. */
.about-hero.hero-video h1 { font-weight: 300; }
.about-hero.hero-video .about-hero-copy { text-align: left; }
/* Support: match the ~50px hero-to-content rhythm (grid adds 25px top padding). */
.about-rgb .duo-grid {
	margin-top: 26px;
}
@media (max-width: 992px) {
	.about-hero.hero-photo {
		padding: 46px 32px;
	}
}
@media (max-width: 600px) {
	.about-hero.hero-photo {
		padding: 36px 22px;
	}
}

/* Products landing (node 1144): the hero now lives in the body, so suppress
   the emptied full-width landing-page-header region above it. */
.node-1144 .block-field-blocknodesection-landing-pagefield-landing-page-header {
	display: none;
}

/* --- Solutions pages: class-based styling -------------------------------
   The designed Solutions bodies must survive the "Custom TextEditor" text
   format, whose editor strips inline styles (backgrounds, image sizing) on
   save. Everything here lives in classes so the markup carries no inline
   style and renders correctly regardless of format. */
/* Hero: the .about-hero base has bottom padding 0 (expects a stats row). */
.about-hero.sol-hero { padding-bottom: 50px; }
.about-hero.sol-hero h1,
.about-hero.sol-hero .about-lead { text-wrap: balance; }
.about-hero.sol-hero .about-lead { max-width: 880px; }
.about-hero-inner.sol-1col { grid-template-columns: 1fr; }
/* Hero illustration (transparent PNG) — contain instead of the default cover. */
.about-hero-media.contain img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 400px;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

/* Dark statement band */
.sol-band {
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	border-radius: 25px;
	padding: 54px 40px;
	text-align: center;
	color: #fff;
}
.sol-band .sol-band-text {
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 1.4;
	max-width: 860px;
	margin: 0 auto;
	color: #fff;
}
.sol-band .sol-band-text em { font-style: normal; color: #00aeef; }
.sol-band-link {
	display: inline-block;
	margin-top: 26px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid #fff;
}

/* Image case-study cards: edge-to-edge image (like the Resources page).
   Must out-specify the base card padding rule
   `.node--view-mode-full .about-cap-grid li.about-cap-card` (0,3,1) and the
   icon img rule `.about-cap-card img{height:56px}`. */
.node--view-mode-full .about-cap-grid li.about-cap-card.sol-media { padding: 0; }
.about-cap-card.sol-media > a { display: block; line-height: 0; }
.about-cap-card.sol-media img { width: 100%; height: 200px; object-fit: cover; display: block; margin: 0; }
.sol-cs-body { padding: 20px 26px 24px; }
.sol-cs-body h3 { margin-bottom: 6px; }

/* Cyan inline links (product links, "read case study") */
.sol-link-p { margin: 14px 0 0; }
/* Include :visited so visited card CTAs don't flip to the global dark-blue
   a:visited color (which out-ranks the plain .sol-link rule). */
.sol-link,
.sol-link:visited { color: #00aeef; font-weight: 600; font-size: .9rem; text-decoration: none; }

/* Deployment chips */
.about-chips.sol-chips { justify-content: center; max-width: 900px; margin: 0 auto; }
.sol-chip {
	display: inline-block;
	background: #fff;
	border: 1px solid #d6dbe4;
	border-radius: 25px;
	padding: 7px 18px;
	font-size: .85rem;
	color: #152973;
}

/* "View all case studies" link */
.sol-viewall-wrap { text-align: center; margin: 34px 0 0; }
.sol-viewall {
	color: #14215c;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid #00aeef;
	padding-bottom: 2px;
}

/* Dark "Why choose us" panel (light cards on navy) */
.sol-why {
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	border-radius: 25px;
	padding: 60px 52px;
}
.sol-why .about-sec-head h2 { color: #fff; }
.sol-why .about-sec-lead { color: #c9d4f1; }

/* Global reach panel */
.about-global {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
	padding: 70px 60px;
	color: #fff;
	background:
		linear-gradient(100deg, rgba(6,13,36,.93) 35%, rgba(20,33,92,.72) 70%, rgba(6,13,36,.45) 100%),
		url('/sites/default/files/basic-pages/body-images/bdf-top.jpg') no-repeat 70% 30%;
	background-size: cover;
}
.about-global h2 {
	color: #fff;
	font-size: 2.1rem;
}
.about-global-copy {
	max-width: 705px;
}
.about-global-copy > p {
	font-weight: 300;
	line-height: 1.7;
	color: #c9d4f1;
}
.about-regions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 24px 0;
	padding: 0;
}
.node--view-mode-full .about-regions li {
	list-style: none;
	border: 1px solid rgba(0,174,239,.6);
	border-radius: 25px;
	padding: 7px 18px;
	font-size: .85rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}
.about-global-hq {
	font-size: .9rem;
	color: #aab6da;
}
.about-global-bttns {
	margin-top: 26px;
}

/* Industries + logo wall */
.about-industries {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 50px;
	align-items: center;
}
.about-industries h2 {
	font-size: 2.1rem;
}
.about-industries-copy > p {
	font-weight: 300;
	line-height: 1.7;
	color: #444;
}
.about-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.node--view-mode-full .about-chips li {
	list-style: none;
}
.about-chips a {
	display: inline-block;
	background: #fff;
	border: 1px solid #d6dbe4;
	border-radius: 25px;
	padding: 7px 18px;
	font-size: .85rem;
	color: #152973;
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.about-chips a:hover {
	border-color: #00aeef;
	background: #00aeef;
	color: #fff;
}
.about-logo-wall {
	margin: 0;
	background: #fff;
	border-radius: 25px;
	padding: 26px;
	box-shadow: 0 18px 50px rgba(6,13,36,.10);
}
.about-logo-wall img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.about-logo-wall figcaption {
	margin-top: 12px;
	text-align: center;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8892a1;
}

/* History timeline */
.about-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: about-era;
}
.node--view-mode-full .about-timeline li {
	list-style: none;
	position: relative;
	padding-top: 26px;
}
.about-timeline li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: -30px;
	height: 2px;
	background: #d6dbe4;
}
.about-timeline li:last-child::before {
	right: 0;
}
.about-timeline li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #00aeef;
	box-shadow: 0 0 0 4px rgba(0,174,239,.2);
}
.about-timeline li:nth-child(1)::after {
	background: #C21B21;
	box-shadow: 0 0 0 4px rgba(194,27,33,.18);
}
.about-timeline li:nth-child(2)::after {
	background: #048849;
	box-shadow: 0 0 0 4px rgba(4,136,73,.18);
}
.about-timeline li:nth-child(3)::after {
	background: #00589C;
	box-shadow: 0 0 0 4px rgba(0,88,156,.18);
}
.about-timeline h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.about-timeline p {
	font-size: .9rem;
	line-height: 1.6;
	color: #555;
	margin: 0;
}
.about-sustain {
	margin-top: 36px;
	text-align: center;
	font-size: .95rem;
	color: #444;
}

/* CTA cards */
.about-ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.about-cta-card {
	border-radius: 25px;
	padding: 40px;
}
.about-cta-card h3 {
	font-size: 1.4rem;
	font-weight: 300;
	margin-bottom: 10px;
}
.about-cta-card p {
	font-weight: 300;
	line-height: 1.65;
	margin-bottom: 22px;
}
.about-cta-card.navy {
	background: linear-gradient(135deg, #14215c, #1e2465);
	color: #fff;
}
.about-cta-card.navy h3 {
	color: #fff;
}
.about-cta-card.lite {
	background: #fafafa;
	border: 1px solid #e6e9f0;
}

@keyframes aboutRise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.about-rgb * {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 992px) {
	.about-hero {
		padding: 40px 32px 0;
	}
	.about-hero-inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.about-hero h1 {
		font-size: 2.1rem;
	}
	.about-cap-grid {
		grid-template-columns: 1fr 1fr;
	}
	.about-industries {
		grid-template-columns: 1fr;
	}
	.about-timeline {
		grid-template-columns: 1fr 1fr;
	}
	.about-timeline li::before {
		right: 0;
	}
	.about-global {
		padding: 50px 32px;
	}
}
@media (max-width: 600px) {
	.about-stats {
		grid-template-columns: 1fr 1fr;
		gap: 24px 16px;
	}
	.about-cap-grid,
	.about-timeline,
	.about-ctas {
		grid-template-columns: 1fr;
	}
	.about-hero h1 {
		font-size: 1.75rem;
	}
	.about-rgb section {
		margin: 50px 0;
	}
}


/* RESPONSIVE CONTACT SUPPORT ROW */
/* .portal-support-contact is a nowrap flex row of fixed-width items and
   overflows small viewports. */
@media (max-width: 767px) {
	.portal-support-contact {
		flex-wrap: wrap;
		justify-content: center;
		gap: 25px;
	}
	.portal-support-contact .item {
		width: 140px;
	}
}


/* RESPONSIVE PRODUCT RELATED-RESOURCES ROW */
/* Nowrap flex row of teaser cards with an 85px gap overflows small screens. */
@media (max-width: 767px) {
	.field--name-field-resources-articles {
		flex-direction: column;
		gap: 25px;
	}
}

/* RESPONSIVE EVENT PAGE RSM INFO */
/* .rsm-info is an inline-flex row with a fixed-width 275px phone column. */
@media (max-width: 767px) {
	.rsm-info {
		flex-direction: column;
		gap: 10px;
	}
	.rsm-phone {
		width: auto;
	}
	.event-section {
		padding: 25px 20px 10px;
	}
}

/* EMBEDDED IFRAMES (forms, videos) should never exceed the viewport */
main iframe {
	max-width: 100%;
}


/* =====================================================================
   RESOURCES LANDING PAGE  (node-8)
   Restyle of the existing Views/Layout-Builder markup to match the
   look-and-feel of the About page: contained rounded panels, consistent
   section rhythm, eyebrow + RGB-rule section heads, and uniform cards
   with hover lift. Content/Views are unchanged; this is styling only.
   ===================================================================== */

/* --- Page canvas & section rhythm --------------------------------- */
.node-8 .region-content {
	padding: 0 20px;
	background: #fff;
}
/* Collapse the empty trailing Layout Builder regions (.frp adds 50px
   padding x2 of dead space under the header callout). */
.node-8 .node__content > .layout--onecol:not(:first-child) {
	display: none;
}

/* --- Section header -> navy hero (the page's one dark anchor) ------ */
.node-8 .field--name-field-landing-page-header {
	background: none !important;
	padding: 0;
}
.node-8 .callout-content {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
/* 	max-width: 1280px; */
/* 	margin: 50px auto; */
	padding: 64px 52px;
	color: #fff;
	text-align: left;
}
.node-8 .callout-content::before {
	/* Solid navy panel. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
}
.node-8 .callout-content::after {
	/* Soft cyan glow, top-right. */
	content: "";
	position: absolute;
	z-index: 0;
	top: -55%;
	right: -6%;
	width: 520px;
	height: 520px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(0,174,239,.28), rgba(0,174,239,0) 68%);
}
.node-8 .callout-copy-block {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: 1100px;
}
.node-8 .callout-content h6 {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.node-8 .callout-content h2 {
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.14;
	font-weight: 300;
	margin: 0;
	text-wrap: balance;
}
.node-8 .resources-hero .rgb-rule {
	display: flex;
	justify-content: flex-start;
	gap: 6px;
	margin: 20px 0 22px;
}
.node-8 .resources-hero .rgb-rule i {
	width: 34px;
	height: 4px;
	border-radius: 2px;
	background: #C21B21;
}
.node-8 .resources-hero .rgb-rule i:nth-child(2) { background: #048849; }
.node-8 .resources-hero .rgb-rule i:nth-child(3) { background: #00589C; }
.node-8 .callout-content p {
	color: #c9d4f1;
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
	max-width: 820px;
	text-wrap: balance;
}

.agg-hero {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
	margin: 0 0 50px;
	padding: 54px 52px;
	color: #fff;
}
.agg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
}
.agg-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -55%;
	right: -6%;
	width: 520px;
	height: 520px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(0,174,239,.30), rgba(0,174,239,0) 68%);
}
.agg-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.55fr .45fr;
	gap: 36px;
	align-items: center;
}
.agg-hero-copy { min-width: 0; }
.agg-hero h6 {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.agg-hero h2 {
	color: #fff;
	font-size: 2.3rem;
	line-height: 1.14;
	font-weight: 300;
	margin: 0;
	text-wrap: balance;
}
.agg-hero .rgb-rule { display: flex; gap: 6px; margin: 20px 0 22px; }
.agg-hero .rgb-rule i { width: 34px; height: 4px; border-radius: 2px; background: #C21B21; }
.agg-hero .rgb-rule i:nth-child(2) { background: #048849; }
.agg-hero .rgb-rule i:nth-child(3) { background: #00589C; }
.agg-hero p {
	color: #c9d4f1;
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
	max-width: 64ch;
	text-wrap: balance;
}
.agg-hero .bttn { margin-top: 24px; }
.agg-hero-graphic { display: flex; align-items: center; justify-content: center; }
.agg-hero-graphic svg {
	width: 100%;
	max-width: 180px;
	height: auto;
	color: rgba(0,174,239,.92);
}
@media (max-width: 860px) {
	.agg-hero { padding: 40px 30px; }
	.agg-hero-inner { grid-template-columns: 1fr; }
	.agg-hero-graphic { display: none; }
}

/* Article cards lift + reveal a cyan top-bar on hover, matching the Products /
   Solutions cards (.about-cap-card). Applies to every aggregate grid. */
.aggregate-main .views-view-responsive-grid__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(6,13,36,.12);
}
.aggregate-main .views-view-responsive-grid__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 5px;
	width: 40%;
	background: #00baff;
	transform: translateX(-110%);
	transition: transform .3s ease;
}
.aggregate-main .views-view-responsive-grid__item:hover::before {
	transform: translateX(0);
}

/* --- Content sections: uniform light panels ----------------------- */
/* Every section — Case Studies, Press Releases, Events, Product News,
   Blog — is a contained, softly-tinted panel so the white cards lift
   off it. No dark mid-page blocks; the navy header is the only dark
   anchor. Neutralize the views blocks' own full-bleed backgrounds
   (#1e2465 darkblue-bg and the #8bdcff band) first. */
.node-8 .block-views-blockproduct-news-block-2,
.node-8 .block-views-blockpress-releases-more-press-releases {
	background: none !important;
}
/* All five sections are open, full-width bands (no tinted panels, no side
   padding) so the card grids line up with the hero. Even vertical spacing
   between sections — no divider rule. */
.node-8 .content-card.vert-pad-50,
.node-8 .article-sidebar {
	max-width: none;
	margin: 0;
	border-radius: 0;
	padding: 48px 0;
	background: transparent !important;
}
/* First section: the hero's 50px bottom margin supplies the top gap. */
.node-8 .content-card.view-case-studies { padding-top: 0; }

/* --- Section heads: eyebrow + centered --------------------------- */
/* Note: needs to out-specify `.region .view .view-header` in rgb10.css
   (loads after this file), which otherwise zeroes the bottom margin. */
.node-8 .region .view .view-header {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}
.node-8 .view-header::before {
	content: "";
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #00aeef;
	margin-bottom: 10px;
}
.node-8 #block-b5subtheme-views-block-case-studies-block-3 .view-header::before { content: "Proven in the field"; }
.node-8 #block-b5subtheme-views-block-press-releases-more-press-releases .view-header::before { content: "Newsroom"; }
.node-8 #block-b5subtheme-views-block-events-block-3 .view-header::before { content: "Meet us"; }
.node-8 #block-b5subtheme-views-block-product-news-block-2 .view-header::before { content: "What's new"; }
.node-8 #block-b5subtheme-views-block-blog-block-1 .view-header::before { content: "Insights"; }
.node-8 .view-header h2 {
	font-size: 2rem;
	font-weight: 300;
	margin: 0 0 14px;
}
.node-8 .view-header h2 a {
	text-decoration: none;
}
/* All panels are light now, so headings are always dark — override the
   .white helper class that some view headers carry. */
.node-8 .view-header h2,
.node-8 .view-header h2 a {
	color: #14215c;
}
.node-8 .view-header h2 a:hover {
	color: #00aeef;
}
.node-8 .view-header h5 {
	font-weight: 300;
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0;
	color: #5a6478;
}

/* --- Uniform cards (all responsive grids) ------------------------- */
/* Lay the cards out with flexbox instead of the views grid's fixed 1fr tracks
   so an incomplete last row centers in the page rather than left-aligning.
   Each card's width is derived from the same per-section column-count / gap
   CSS vars the views grid uses, so full rows still fill the width exactly. */
.node-8 .views-view-responsive-grid {
	--views-responsive-grid--layout-gap: 30px !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--views-responsive-grid--layout-gap);
}
.node-8 .views-view-responsive-grid__item {
	background: #fff;
	border: 1px solid #e9ecf2;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(6,13,36,.07);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	display: flex;
	box-sizing: border-box;
	flex: 0 1 calc((100% - (var(--views-responsive-grid--column-count) - 1) * var(--views-responsive-grid--layout-gap)) / var(--views-responsive-grid--column-count));
}
/* The flex layout no longer inherits the views grid's intrinsic wrapping, so
   restore the column drops by hand (Bootstrap 5 breakpoints): 2-up below lg,
   1-up below sm. Orphan rows stay centered via justify-content at every size. */
@media (max-width: 991.98px) {
	.node-8 .views-view-responsive-grid__item {
		flex-basis: calc((100% - var(--views-responsive-grid--layout-gap)) / 2);
	}
}
@media (max-width: 575.98px) {
	.node-8 .views-view-responsive-grid__item {
		flex-basis: 100%;
	}
}
.node-8 .views-view-responsive-grid__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(6,13,36,.16);
}
.node-8 .views-view-responsive-grid__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 3;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
	background: linear-gradient(90deg,
		#C21B21 0 33.33%,
		#048849 33.33% 66.66%,
		#00aeef 66.66% 100%);
}
.node-8 .views-view-responsive-grid__item:hover::before {
	transform: scaleX(1);
}
.node-8 .views-view-responsive-grid__item-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
}
/* Card images: uniform crop, edge-to-edge, no rounding (card clips). */
.node-8 .views-view-responsive-grid__item .views-field-field-image,
.node-8 .views-view-responsive-grid__item .views-field-field-image .field-content,
.node-8 .views-view-responsive-grid__item .views-field-field-image a,
.node-8 .view-events .views-field-nothing > .field-content > a {
	display: block;
	line-height: 0;
}
.node-8 .views-view-responsive-grid__item .views-field-field-image img,
.node-8 .view-events .views-field-nothing img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.node-8 .view-events .views-field-nothing img {
	aspect-ratio: 2 / 1;
}
/* Card titles */
.node-8 .views-field-title h5 {
	margin: 0;
	padding: 16px 22px 18px;
	font-size: 1.02rem;
	line-height: 1.35;
	font-weight: 600;
}
.node-8 .views-field-title h5 a {
	color: #14215c;
	text-decoration: none;
	transition: color .2s ease;
}
.node-8 .views-field-title h5 a:hover {
	color: #00aeef;
}
/* Card title + summary read left-aligned in every section except Events
   (which keeps its centered detail/button via .event-details/.event-button).
   Overrides the .content-card text-align:center that Case Studies and
   Product News inherit; Press Releases & Blog are already left. */
.node-8 .views-field-title h5,
.node-8 .views-field-field-basic-body,
.node-8 .views-field-field-publication-date {
	text-align: left;
}
/* Case Studies & Product News are .content-card, so rgb10.css (loaded later)
   wins with `.content-card .views-field-title h5{padding:...30px}` and indents
   the title to 30px while the summary sits at 22px. Pin the title to 22px so
   the two line up. Higher specificity here out-ranks the rgb10.css rule. */
.node-8 .content-card .views-field-title h5 {
	padding-left: 22px;
	padding-right: 22px;
}

/* --- Press Releases: text cards (date / title / summary) ---------- */
.node-8 .view-press-releases .views-field-field-publication-date {
	padding: 22px 22px 0;
	color: #00aeef;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.node-8 .view-press-releases .views-field-field-publication-date .datetime {
	color: inherit;
	font-size: inherit;
}
.node-8 .view-press-releases .views-field-title h5 {
	padding: 8px 22px 12px;
	font-size: 1.05rem;
}
.node-8 .view-press-releases .views-field-field-basic-body,
.node-8 .view-case-studies .views-field-field-basic-body,
.node-8 .view-product-news .views-field-field-basic-body,
.node-8 .view-blog .views-field-field-basic-body {
	padding: 0 22px 24px;
	color: #5a6478;
	font-size: .9rem;
	line-height: 1.6;
}
.node-8 .view-press-releases .views-field-body {
	display: none;
}

/* --- Events: centered details + button ---------------------------- */
.node-8 .view-events .views-field-nothing {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.node-8 .view-events .event-details {
	padding: 18px 24px 4px;
	text-align: center;
	color: #14215c;
	font-weight: 600;
	font-size: .92rem;
}
.node-8 .view-events .event-button {
	padding: 8px 24px 26px;
	text-align: center;
	margin-top: auto;
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 992px) {
	.node-8 .content-card.vert-pad-50 {
		padding: 24px 22px;
		margin: 22px auto;
	}
	.node-8 .article-sidebar {
		margin: 22px auto;
	}
	.node-8 .callout-content {
		min-height: 0;
		padding: 44px 26px;
	}
	.node-8 .callout-copy-block {
		max-width: 100%;
	}
	.node-8 .callout-content h2 {
		font-size: 1.85rem;
	}
	.node-8 .view-header h2 {
		font-size: 1.6rem;
	}
}


/* PARTNER PORTAL (role-gated landing blocks) */
/* These blocks live in the plain content region (no frp gutter), so the wrapper
   supplies its own responsive side padding — 1280px content + ~50px gutters. */
.partner-portal { max-width: 1380px; margin: 0 auto; padding: 26px 50px 64px; }
/* The /partner-portal node body is intentionally empty (content comes from the
   role-gated blocks), so hide the empty main block that otherwise adds ~100px up top. */
.node-1170 .block-system-main-block { display: none; }

/* These are blocks, not .node--view-mode-full, so restate the cap-card frame
   (the base padding/bg/radius rule is gated behind that node selector). */
.partner-portal .about-cap-grid li.about-cap-card {
	list-style: none;
	position: relative;
	overflow: hidden;
	background: #fafafa;
	border-radius: 25px;
	padding: 26px 26px 22px;
	transition: transform .25s ease, box-shadow .25s ease;
}
/* Logged-in header: same navy callout as the Resources hero (resource-section
   throughline), with a slightly brighter/larger cyan glow. */
.partner-portal .pp-hero {
	position: relative;
	overflow: hidden;
	border-radius: 25px;
	margin: 0 0 36px;
	padding: 54px 52px;
	color: #fff;
}
.partner-portal .pp-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	/* Brand teal gradient as a translucent overlay over the uploaded photo,
	   same image+gradient technique as the other photo heroes. */
	background:
		linear-gradient(158deg, rgba(0,18,29,.97) 0%, rgba(0,87,128,.74) 60%, rgba(37,150,195,.45) 100%),
		url('/sites/default/files/basic-pages/body-images/partner-portal-hero-bg.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.partner-portal .pp-hero::after {
	content: ""; position: absolute; z-index: 0; top: -55%; right: -6%;
	width: 560px; height: 560px; pointer-events: none;
	background: radial-gradient(circle, rgba(0,174,239,.36), rgba(0,174,239,0) 68%);
}
.partner-portal .pp-hero .callout-copy-block { position: relative; z-index: 2; max-width: 1000px; }
.partner-portal .pp-hero h6 { color: #00aeef; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; }
.partner-portal .pp-hero h1 { color: #fff; font-size: 2.4rem; line-height: 1.14; margin: 0; text-wrap: balance; }
.partner-portal .pp-hero .rgb-rule { display: flex; gap: 6px; margin: 20px 0 22px; }
.partner-portal .pp-hero .rgb-rule i { width: 34px; height: 4px; border-radius: 2px; background: #C21B21; }
.partner-portal .pp-hero .rgb-rule i:nth-child(2) { background: #048849; }
.partner-portal .pp-hero .rgb-rule i:nth-child(3) { background: #00589C; }
.partner-portal .pp-hero p { font-weight: 300; font-size: 1.05rem; line-height: 1.7; max-width: 760px; text-wrap: balance; }
.partner-portal .pp-group { margin: 0 0 40px; }
.partner-portal .pp-group:last-child { margin-bottom: 0; }
.partner-portal .pp-group > .about-eyebrow { margin-bottom: 16px; }
.partner-portal .pp-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-layout { align-items: start; }
.pp-main { min-width: 0; }

/* Latest Updates sidebar */
.pp-updates {
	padding: 5px;
	position: sticky;
	top: 20px;
}
.pp-updates-head {
	font-size: 1.15rem;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid #00aeef;
}
.pp-update-list { list-style: none; margin: 0; padding: 0; }
.partner-portal .pp-update-list li { list-style: none; padding: 13px 0; border-bottom: 1px solid #e6e9f0; }
.partner-portal .pp-update-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-update-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pp-update-date { font-size: .75rem; color: #8892a1; }
.pp-update-tag {
	font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	padding: 2px 8px; border-radius: 25px; background: #e6e9f0; color: #555;
}
.pp-update-tag.is-added { background: rgba(4,136,73,.14); color: #048849; }
.pp-update-title { font-size: .9rem; line-height: 1.4; margin: 0 0 4px; color: #14215c; font-weight: 600; }
.pp-update-section { font-size: .8rem; color: #00aeef; text-decoration: none; }
.pp-update-section:hover { text-decoration: underline; }

/* Anonymous: navy welcome band */
.pp-anon-band {
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	border-radius: 25px;
	padding: 58px 52px;
	color: #fff;
}
.partner-portal .pp-anon-band h1 { color: #fff; font-size: 2.1rem; margin: 0; max-width: none; text-wrap: balance; }
.pp-anon-band h1 em { font-style: normal; color: #00aeef; }
.pp-anon-lead { font-weight: 300; line-height: 1.7; color: #c9d4f1; max-width: 660px; margin: 16px 0 0; }
.pp-anon-bttns { margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.pp-anon-band a.bttn.wht.ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.pp-anon-band a.bttn.wht.ghost:hover { border-color: #fff; }
.pp-anon-band a.bttn.blu:hover { background: #fff; border-color: #fff; color: #14215c; }

/* Anonymous: teaser cards (locked) */
.partner-portal .pp-anon-inside { margin: 50px 0; }
.partner-portal .pp-teaser { grid-template-columns: repeat(3, 1fr); }
/* Decorative line icon anchored to the right of each teaser card (same stroke
   language as the events hero calendar). Sits vertically centered, clear of the
   top-right members badge; card copy gets right padding so it never collides. */
.partner-portal .about-cap-grid li.about-cap-card.has-cap-icon { padding-right: 88px; }
.pp-cap-icon {
	position: absolute;
	right: 22px;
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	color: #00aeef;
	opacity: .8;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.about-cap-card:hover .pp-cap-icon { opacity: 1; transform: translateY(-50%) scale(1.06); }
@media (max-width: 600px) {
	.partner-portal .about-cap-grid li.about-cap-card.has-cap-icon { padding-right: 80px; }
}
.about-cap-card.pp-locked::after {
	content: "Members only";
	position: absolute; top: 0; right: 0;
	font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: #8892a1; background: #eef1f6;
	padding: 4px 10px; border-bottom-left-radius: 12px;
}
.about-cap-card.pp-open::after {
	content: "Open to all";
	position: absolute; top: 0; right: 0;
	font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: #048849; background: rgba(4,136,73,.12);
	padding: 4px 10px; border-bottom-left-radius: 12px;
}
.partner-portal .pp-anon-ctas { margin: 0; }

@media (max-width: 991px) {
	.partner-portal { padding-left: 32px; padding-right: 32px; }
	.partner-portal .pp-cards, .partner-portal .pp-teaser { grid-template-columns: 1fr 1fr; }
	.pp-updates { position: static; margin-top: 30px; }
}
@media (max-width: 600px) {
	.partner-portal { padding-left: 20px; padding-right: 20px; }
	.partner-portal .pp-cards, .partner-portal .pp-teaser { grid-template-columns: 1fr; }
	.pp-anon-band { padding: 42px 26px; }
	.partner-portal .pp-anon-band h1 { font-size: 1.7rem; }
}

/* ============================================================
   PRODUCT CATEGORY PAGES (node bundle product_category)
   Consistent house header + grid framing across all 10 so the
   pages read as one family regardless of how much body content
   they carry. The product-grid (the canonical per-category
   listing) is kept and made an intentional, headed section.
   ============================================================ */

/* --- Header: title + tagline as a consistent house header ---
   Tightened top spacing so these pages sit closer to the header
   like the rest of the site (was frp 50px + title 38px = ~88px). */
.page-node-type-product-category .frp {
	padding-top: 20px;
}
.page-node-type-product-category .block-field-blocknodeproduct-categorytitle {
	margin: 4px 0 0;
}
.page-node-type-product-category .block-field-blocknodeproduct-categorytitle::before {
	content: "Products";
	display: block;
	color: #00aeef;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.page-node-type-product-category .block-field-blocknodeproduct-categorytitle .field--name-title {
	display: block;
	font-size: 2.6rem;
	font-weight: 300;
	line-height: 1.12;
	color: #14215c;
	margin: 0;
}
.page-node-type-product-category .block-field-blocknodeproduct-categorytitle::after {
	content: "";
	display: block;
	width: 80px;
	height: 3px;
	border-radius: 2px;
	background: #00aeef;
	margin: 20px 0 0;
}
.page-node-type-product-category .block-field-blocknodeproduct-categoryfield-tagline {
	margin: 20px 0 0;
}
.page-node-type-product-category .block-field-blocknodeproduct-categoryfield-tagline .field--name-field-tagline {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.6;
	color: #5a6478;
	max-width: 860px;
}

/* --- Body: keep the existing internal layout, just cap text
   measure for readability so the heavy pages (zio ~3.5k chars)
   stay scannable. Images/intro-grids set their own width. --- */
.page-node-type-product-category .block-field-blocknodeproduct-categoryfield-body {
	margin-top: 34px;
}
.page-node-type-product-category .block-field-blocknodeproduct-categoryfield-body > .field__item > p {
	max-width: 860px;
}

/* --- Grid: an intentional, headed section; orphan rows center
   instead of hugging the left. The cards themselves are kept. --- */
.page-node-type-product-category .product-grid {
	margin-top: 24px;
}
.page-node-type-product-category .product-grid::before {
	content: "The Full Lineup";
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
	color: #14215c;
	margin-bottom: 6px;
}
.page-node-type-product-category .product-grid .view-content::before {
	content: "Every model in this category — products can appear in more than one.";
	display: block;
	flex: 1 0 100%;
	font-size: .98rem;
	font-weight: 300;
	line-height: 1.6;
	color: #5a6478;
	margin: 0 0 8px;
}
.page-node-type-product-category .region .view.product-grid .view-content {
	justify-content: center;
}

/* --- Networked KVM Control intro: float the image so the copy
   wraps beside it and flows in underneath, instead of a rigid
   two-column grid that leaves a tall void when the image and the
   text are different heights. --- */
.kvm-intro {
	max-width: 1160px;
}
.kvm-intro::after {
	content: "";
	display: block;
	clear: both;
}
.kvm-intro .kvm-intro-img {
	float: right;
	width: 320px;
	max-width: 42%;
	margin: 4px 0 1.25rem 2.5rem;
}
@media (max-width: 700px) {
	.kvm-intro .kvm-intro-img {
		float: none;
		display: block;
		width: auto;
		max-width: 320px;
		margin: 0 auto 1.5rem;
	}
}

/* ============================================================
   MOBILE MENU  (#block-b5subtheme-mobilemenu, menu "mobile")
   A clean, self-contained mobile drawer that replaces TB Mega
   Menu's broken mobile output. It lives in nav_main next to the
   mega menu; CSS swaps which one shows by breakpoint. The header
   navbar-toggler (Bootstrap collapse) already opens the drawer.
   ============================================================ */

/* Desktop (>=lg): mega menu only; hide the mobile block. */
@media (min-width: 992px) {
	#block-b5subtheme-mobilemenu { display: none !important; }
}

/* Below lg: hide the mega menu, show the mobile accordion. */
@media (max-width: 991.98px) {
	.region-nav-main .block-tb-megamenu { display: none !important; }

	#block-b5subtheme-mobilemenu {
		display: block;
		width: 100%;
		background: #0a1024;
		padding: 6px 18px 18px;
		border-radius: 12px;
	}
	#block-b5subtheme-mobilemenu ul.navbar-nav {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}
	#block-b5subtheme-mobilemenu > ul > li.nav-item {
		position: relative;
		width: 100%;
		border-top: 1px solid rgba(255,255,255,.10);
	}
	#block-b5subtheme-mobilemenu > ul > li.nav-item:first-child { border-top: 0; }

	/* Top-level row */
	#block-b5subtheme-mobilemenu .nav-link {
		display: block;
		padding: 14px 52px 14px 2px;
		font-size: 1.05rem;
		font-weight: 400;
		line-height: 1.3;
		color: #fff;
	}
	#block-b5subtheme-mobilemenu .nav-link:hover,
	#block-b5subtheme-mobilemenu .nav-link:focus { color: #00aeef; }
	/* Drop Bootstrap's white dropdown caret — it's part of the link (navigates)
	   and duplicates our blue toggle. */
	#block-b5subtheme-mobilemenu .nav-link.dropdown-toggle::after { display: none; }

	/* Caret toggle (injected by JS), sits over the right of the row;
	   the parent link itself stays tappable/navigable. */
	#block-b5subtheme-mobilemenu .mm-caret {
		position: absolute;
		top: 3px;
		right: -8px;
		width: 48px;
		height: 48px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	#block-b5subtheme-mobilemenu .mm-caret::before {
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		margin: 0 auto;
		border-right: 2px solid #00aeef;
		border-bottom: 2px solid #00aeef;
		transform: rotate(-45deg); /* closed: points right */
		transition: transform .2s ease;
	}
	#block-b5subtheme-mobilemenu .nav-item.mm-open > .mm-caret::before {
		transform: rotate(45deg); /* open: points down */
	}

	/* Children — collapsed by default; JS slideToggles them. */
	#block-b5subtheme-mobilemenu > ul > li.nav-item > ul {
		display: none;
		list-style: none;
		margin: 0;
		padding: 2px 0 12px 14px;
		border-left: 2px solid rgba(0,174,239,.35);
	}
	#block-b5subtheme-mobilemenu li.nav-item li .nav-link {
		padding: 9px 8px 9px 0;
		font-size: .95rem;
		font-weight: 300;
		color: #c9d4f1;
	}
}

/* ============================================================
   CONSISTENT HERO PADDING ON PHONES
   The hero variants (.about-hero[.hero-photo] / .agg-hero /
   .node-8 .callout-content) each shipped their own mobile padding
   (22 / 26 / 30 / 32px sides), so the text inset differed page to
   page. Normalize the internal padding at phone width so every hero
   reads the same. Placed last so it wins by source order. */
@media (max-width: 600px) {
	.about-hero.hero-photo,
	.about-hero.sol-hero,
	.agg-hero,
	.node-8 .callout-content {
		padding: 42px 26px;
	}
	/* Vertical rhythm: the .about-hero pages get a 30px top gap from their
	   .frp wrapper, while .agg-hero / .callout carry their own 40/50 margins.
	   Bring the latter to the same 30px-top / 40px-bottom so the gap above and
	   below every hero matches. */
	.agg-hero,
	.node-8 .callout-content {
		margin-top: 30px;
		margin-bottom: 40px;
	}
}

/* ============================================================
   Partner Portal document/firmware listing pages
   (bundle partner_portal — nodes 1179 Technical Product Documents,
   1180 Product Firmware). Centering + padding come from the Layout
   Builder frp/ccc container, so .pp-portal sets no width/margin/pad of
   its own. Reuses the about-/sol- house vocabulary. */
.pp-hero {
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	border-radius: 25px;
	padding: 44px 50px;
	color: #fff;
	margin: 30px 0 50px;
}
.pp-hero .about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.pp-hero h1 {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 300;
	line-height: 1.15;
	margin: 0;
}
.pp-hero .pp-lead {
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #c9d4f1;
	max-width: 62ch;
	margin: 14px 0 0;
}
.pp-cat {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
	padding: 34px 0;
	border-top: 1px solid #e3e6ee;
}
.pp-cat:first-of-type { border-top: 0; }
.pp-cat h2 {
	font-size: 1.45rem;
	font-weight: 400;
	color: #14215c;
	margin: 0;
}
.pp-links {
	margin: 0;
	/* indent so the (outside-positioned) disc markers sit inside the divider
	   lines instead of overhanging the left margin. */
	padding-left: 20px;
	/* auto-flow as many ~220px columns as the width allows */
	column-width: 220px;
	column-gap: 40px;
}
.pp-portal .pp-links li {
	list-style: disc;
	break-inside: avoid;
	margin: 0 0 12px;
}
.pp-links a {
	color: #00589C;
	text-decoration: none;
	font-weight: 500;
}
.pp-links a:hover { color: #00aeef; text-decoration: underline; }
.pp-dl {
	/* drop onto its own line, flush-left with the link text, so it never
	   wraps with a stray left indent */
	display: table;
	margin-top: 5px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #048849;
	border: 1px solid #048849;
	border-radius: 3px;
	padding: 1px 5px;
}
@media (max-width: 800px) {
	/* frp side padding collapses at narrow widths, so guarantee the body
	   isn't flush to the screen edge on mobile. */
	.pp-portal { padding-left: 18px; padding-right: 18px; }
	.pp-cat { grid-template-columns: 1fr; gap: 14px; }
}

/* Partner Portal hero eyebrow as a backlink to the portal landing */
.pp-hero .about-eyebrow a {
	color: #00aeef;
	text-decoration: none;
}
.pp-hero .about-eyebrow a:hover { text-decoration: underline; }

/* Partner Portal "explore more" cross-link cards (bottom of each page) */
.pp-more {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 0;
	padding-top: 50px;
	border-top: 1px solid #e3e6ee;
}
.pp-more-card {
	display: block;
	border-radius: 18px;
	padding: 28px 30px;
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pp-more-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(6,13,36,.35);
	color: #fff;
}
.pp-more-card .pp-more-eyebrow {
	display: block;
	color: #00aeef;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.pp-more-card .pp-more-title {
	display: block;
	/* white regardless of link/visited state */
	color: #fff;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.2;
}
.pp-more-card .pp-more-arrow {
	display: inline-block;
	margin-top: 14px;
	color: #c9d4f1;
	font-size: .9rem;
	font-weight: 500;
}
.pp-more-card:hover .pp-more-arrow { color: #00aeef; }
@media (max-width: 800px) {
	.pp-more { grid-template-columns: 1fr; }
}

/* ===== Careers (node 98) — house-style restyle =====================
   Reuses the about-/sol- vocabulary. Hero = control-room photo block;
   the people photo lives in the intro split; the map closes the page. */
.about-hero.hero-photo--careers {
	background-image:
		linear-gradient(105deg, rgba(6,13,36,.94) 26%, rgba(20,33,92,.64) 60%, rgba(6,13,36,.34) 100%),
		url('/sites/default/files/content/awesome-control-room.jpg');
}
/* Intro: company copy beside the people photo */
.careers-split {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 46px;
	align-items: center;
}
.careers-copy .about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.careers-copy h2 {
	font-size: 2rem;
	font-weight: 300;
	color: #14215c;
	margin: 0 0 18px;
}
.careers-copy p {
	color: #444;
	font-size: 1.02rem;
	line-height: 1.7;
}
.careers-media { margin: 0; }
.careers-media img {
	display: block;
	width: 100%;
	border-radius: 25px;
	box-shadow: 0 24px 50px rgba(6,13,36,.22);
}
/* Benefits / life band (dark panel) */
.careers-band {
	background: linear-gradient(135deg, #060d24 0%, #14215c 60%, #1e2465 100%);
	color: #fff;
	border-radius: 25px;
	padding: 50px 52px;
}
.careers-band .about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.careers-band h2 {
	color: #fff;
	font-size: 2rem;
	font-weight: 300;
	margin: 0 0 20px;
}
.careers-band p {
	color: #c9d4f1;
	font-size: 1.02rem;
	line-height: 1.7;
}
/* Two-column body copy on desktop so the panel doesn't read mostly-empty */
.careers-band-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.careers-band-col p:first-child { margin-top: 0; }
.careers-band .about-hero-bttns { margin-top: 24px; margin-bottom: 0; }
/* Location + map */
.careers-location {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 44px;
	align-items: center;
}
.careers-location .about-eyebrow {
	color: #00aeef;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.careers-location h2 {
	font-size: 2rem;
	font-weight: 300;
	color: #14215c;
	margin: 0 0 18px;
}
.careers-location p { color: #444; line-height: 1.7; }
.careers-map { margin: 0; }
.careers-map iframe {
	display: block;
	width: 100%;
	height: 340px;
	border: 0;
	border-radius: 25px;
	box-shadow: 0 18px 40px rgba(6,13,36,.18);
}
@media (max-width: 800px) {
	.careers-split,
	.careers-location { grid-template-columns: 1fr; gap: 26px; }
	.careers-band-cols { grid-template-columns: 1fr; }
	.careers-band { padding: 36px 26px; }
	.careers-map iframe { height: 280px; }
}

/* ============================================================
   SOLUTIONS MEGA-MENU — industry segments (title + short line +
   right-aligned line icon, no card background, just spacing).
   ============================================================ */
/* All nine segments in one grid so rows auto-equalize to the tallest
   card — no fixed height needed (adapts if copy grows). */
.sol-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.sol-seg-para {
/* 
	background: #fafafa;
	padding: 10px 10px 10px 20px;
	border-radius: 25px;
 */
	margin: 0;
}
.sol-seg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 10px 0;
	text-decoration: none;
}
.sol-seg-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Match the standard mega-menu heading + body styles (.tbm h5 / .tbm-submenu p)
   so this block reads consistently with Resources, Support, Products, etc. */
.sol-seg-title { font-weight: 600; font-size: .9rem; line-height: 1.2; text-transform: uppercase; text-decoration: underline; color: #060d24; }
.sol-seg-sub { font-size: .9rem; line-height: 1.45; color: #666; }
.sol-seg-icon {
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
	color: #00aeef;
	opacity: .8;
	transition: opacity .2s ease, transform .2s ease;
}
.sol-seg:hover .sol-seg-title { color: #00aeef; }
.sol-seg:hover .sol-seg-icon { opacity: 1; transform: scale(1.08); }

/* ── Legal / policy documents (Accessibility, Privacy, Cookies …) ─────────
   Minimal, highly readable single-column treatment shared across all the
   legalese pages. Class-based only (custom_texteditor strips inline styles):
   wrap the body in <div class="legal-page"> … </div>. */
.legal-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 10px 0 24px;
	color: #2a3346;
	font-size: 1.02rem;
	line-height: 1.75;
}
.legal-page h1 {
	font-size: 2.2rem;
	font-weight: 300;
	color: #14215c;
	line-height: 1.2;
	margin: 0 0 10px;
}
.legal-page .legal-meta {
	color: #6b7488;
	font-size: .9rem;
	margin: 0 0 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid #e2e6ee;
}
.legal-page h2 {
	font-size: 1.4rem;
	font-weight: 400;
	color: #14215c;
	margin: 42px 0 12px;
	scroll-margin-top: 90px; /* offset for sticky header when linked via #anchor */
}
.legal-page h3 {
	font-size: 1.12rem;
	font-weight: 600;
	color: #14215c;
	margin: 28px 0 8px;
}
.legal-page p { margin: 0 0 16px; }
.legal-page ul,
.legal-page ol { margin: 0 0 16px; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: #0072ce; text-decoration: none; }
.legal-page a:hover { text-decoration: underline; }
/* Bracketed placeholders for the legal reviewer — easy to spot, easy to delete. */
.legal-page .legal-todo {
	background: #fff6d6;
	border-bottom: 1px dashed #c9a227;
	color: #7a5c00;
	padding: 0 3px;
}
.legal-page .legal-note {
	background: #f4f7fb;
	border-left: 3px solid #0072ce;
	border-radius: 0 6px 6px 0;
	padding: 14px 18px;
	margin: 0 0 30px;
	font-size: .92rem;
	color: #41506b;
}