@charset "UTF-8";
:root {
  --color-primary: #131b30;
  --color-secondary: #30b3e9;
  --color-secondary-hover: #60d1fa;
  --heading-letter-spacing: -0.03125rem;
  --heading-font: "Archivo Black", Arial, Helvetica, sans-serif;
  --logo-width: 13.5rem; /* 216px */
  --logo-height: 3.3625rem; /* 53.8px */
  --header-padding-mobile: 0.75rem; /* ~12px (top + bottom used below) */
  --header-height-mobile: calc(var(--logo-height) + (var(--header-padding-mobile) * 2));
}

/* ========== GLOBAL TYPOGRAPHY ==========
(Keep Arial site-wide; bold hero H1 uses 'Archivo Black') */
html {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-primary);
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

p {
  color: var(--color-primary);
}

.blue-content-area p {
  color: #fff;
}

.cta-content p {
  color: #fff;
}

.twi_paragraph-bold, .twi_paragraph-bold a {
  color: var(--color-primary);
}

/* ========== ICON: SQUARE ARROW RIGHT (moved from inline SVG) ========== */
/* gulp SVG compressor adds random prefix to symbol layers */
#icon-chevron-right-new path[class$=square] {
  fill: currentColor;
}

#icon-chevron-right-new path[class$=arrow] {
  fill: #fff;
}

/* ========== HEADINGS TYPOGRAPHY OVERRIDE ========== */
h1, h2, h3, h4, h5, h6,
.feature-boxes .feature-box__link,
.card.card__events .card--date,
.card.card__events .card--category {
  font-family: "Archivo Black", Arial, Helvetica, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.feature-boxes .feature-box__link {
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.16rem;
}

.feature-boxes .feature-box__link:hover {
  color: var(--color-secondary);
}

.feature-boxes .feature-box__link:hover .bdicon .bqsar__background {
  fill: var(--color-secondary);
}

.card.card__events {
  border: 5px solid var(--color-primary);
  position: relative !important;
  float: left;
  width: 384px;
  background: #fff;
  z-index: 1;
  padding: 2.2rem;
  box-shadow: 0 6px 17px 0 rgba(0, 0, 0, 0.06);
  margin: 16px;
}

.card.card__events .card--category {
  font-size: 0.775rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.11rem;
}

.card.card__events .card--date {
  font-weight: normal;
  color: var(--color-primary);
  font-size: 2.2rem;
}

.card.card__events .card--description a {
  color: var(--color-primary);
  font-size: 1.7rem;
  line-height: 1.2;
  padding: 2.925rem 0 4.675rem;
}

.card.card__events .card--description a .card--indicator {
  border-bottom: 59px solid var(--color-primary);
}

section.bg-cubes {
  background-image: none;
  padding-bottom: 0;
}

.latest-media {
  margin-bottom: 0;
}

.section-title h2 {
  font-size: 2.375rem;
  line-height: 2.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.13125rem;
}

.section-title .media-link {
  color: var(--color-secondary);
}

/* Hero base styles - consolidated */
.hero {
  width: 100%;
  height: 36rem; /* Using rem value from second declaration */
  position: relative;
  top: -135px;
  margin-bottom: -3rem; /* Using value from second declaration */
  z-index: 100;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.hero .hero-slider .hero-slide .hero-slide_content {
  font-family: var(--heading-font);
}

.hero .hero-slider .hero-slide .hero-slide_content:before {
  display: none;
}

.hero .hero-slider .hero-slide .hero-slide_content h1 {
  color: #fff;
  font-size: 1.95rem;
  line-height: 3.125rem;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.2rem;
}

.hero .large-5 {
  width: 100%;
}

/* ========== ICON COLOURS (consolidated) ========== */
.footer .icon:not(.footer__icon):not(.footer__social-icon),
.quick-links .icon-globe,
.quick-links .icon-person,
.quick-links .icon-chevron-down,
.megamenu .social-icons .social-icons__item svg,
.social-share__list.social-share--vertical .social-share__link .icon,
.social-share__list .social-share__link .icon,
.megamenu .megamenu__menu .nav__chevron .nav__chevron-icon {
  fill: var(--color-primary);
}

.footer.rb .footer__contact p {
  color: #fff;
}

/* ========== HEADER SEARCH TOGGLE (replaces triangle) ========== */
.header__search-toggle {
  position: absolute;
  top: 60px;
  right: 52px;
  z-index: 300;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 1rem; /* rem-calc(16) equivalent at build time */
  cursor: pointer;
  display: none;
}

@media only screen and (min-width: 74.5em) { /* matches large breakpoint */
  .header__search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }
}
@media only screen and (min-width: 74.5em) and (max-width: 92.8125em) {
  .header__search-toggle .header__search-label {
    display: none;
  }
  .header__search-toggle {
    right: 0;
  }
}
.header__search-toggle .icon-search {
  fill: #fff;
  height: 1.21875rem;
  width: 1.21875rem;
}

.header__search-toggle .header__search-label {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.header__search-toggle:focus-visible {
  outline: 2px solid #2a8ed6;
  outline-offset: 2px;
}

.header__search-toggle:hover .icon-search {
  fill: #f2f2f2;
}

/* ========== HERO (colours + remove angles) ========== */
.hero .contact {
  background: var(--color-primary);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.hero .contact:focus,
.hero .contact:hover {
  background: var(--color-secondary);
}

@media only screen and (min-width: 74.5em) {
  .hero {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .feature-boxes .feature-box,
  .feature-boxes .feature-box:first-child,
  .feature-boxes .feature-box:last-child {
    top: 0px;
  }
  .header .header__bar .header__logo {
    padding-top: 0.3125rem;
    padding-right: 0;
  }
  .header .header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header .header__nav-desktop {
    flex: 1;
  }
  .header {
    margin-right: 0;
  }
  .section-title .latest-media-title-heading {
    padding-left: 0;
  }
}
/* ========== HEADER LOGO SIZE OVERRIDE ========== */
.header__logo .logo__link {
  display: inline-block;
  width: 13.5rem;
  height: 3.3625rem;
}

/* Consolidated logo icon rules */
.header__logo .logo__link .icon.icon-logo,
.header .header__bar .logo__link .icon.icon-logo {
  width: 100%;
  height: 100%;
}

.blue-content-area {
  background: var(--color-primary) !important;
}

/* Consolidated .top-left-down.bottom-left-up rules */
.top-left-down.bottom-left-up {
  margin-bottom: 2rem;
  margin-top: 2rem !important;
}

.top-left-down.bottom-left-up.mask-bg {
  background: var(--color-primary) !important;
  margin-bottom: 3rem; /* Overrides base margin-bottom */
  min-height: auto !important;
  padding: 0 !important;
}

.top-left-down.bottom-left-up.mask-bg p {
  color: #fff;
}

.latest-media .ui-card {
  box-shadow: none !important;
  width: 380px;
  margin: 3rem 1rem; /* Standard mobile margins */
}

.ui-card .ui-card__content.ui-card__content--clip {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

.ui-card .ui-card__content, .ui-card__text {
  color: var(--color-primary);
}

/* Desktop: Calculated spacing for 3 cards in 1224px */
@media (min-width: 1024px) {
  .latest-media .ui-card {
    margin: 3rem 24px; /* Clean round number */
  }
  .latest-media .ui-card:first-child {
    margin-left: 0;
  }
  .latest-media .ui-card:nth-child(3) {
    margin-right: 0;
  }
  .latest-media .ui-card:nth-child(n+4) {
    display: none;
  }
}
.ui-card .ui-card__content.ui-card__content--clip {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

.ui-card .ui-card__content, .ui-card__text {
  color: var(--color-primary);
}

.cta-button {
  background-color: var(--color-secondary) !important;
}

.cta-button:hover {
  background-color: var(--color-secondary-hover) !important;
}

.floating-cta {
  background-color: var(--color-primary) !important;
}

/* ========== BACK TO TOP ========== */
/* ========== MASKED/ANGLED BACKGROUNDS (generic kill switch) ========== */
.mask-bg:before {
  background-color: #131b30;
}

/* Common angle helper classes (flatten them globally) */
.top-left-up,
.top-left-up.bottom-left-down,
.top-right-up,
.top-right-up.bottom-right-down,
.bottom-left-down,
.bottom-right-down,
.top-left-down,
.top-left-down.bottom-left-up,
.bottom-left-up,
.parallax-window,
.parallax-mirror,
.tag,
.dialog--experts img.avatar {
  clip-path: none !important;
}

.ui-card .ui-card__image,
.ui-card .ui-card__image::before,
.ui-card .ui-card__image::after,
.ui-card .ui-card__type,
.ui-card .ui-card__type::before,
.ui-card .ui-card__type::after,
.ui-card:hover .ui-card__image,
.ui-card:hover .ui-card__type {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Also guard against hover states re-applying angles */
/* .ui-card:hover .ui-card__image,
.ui-card:hover .ui-card__type {
  -webkit-clip-path: none !important;
  clip-path: none !important;
} */
/* ========== LIST BULLETS (site-wide) ========== */
/* .main li:before { background: #52d0fd; }
.main li:after { background: #334779; } */
.main li:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  height: 10px;
  width: 10px;
  background: #30b3e9;
  transform: none;
  border-radius: 2px;
}

.main li:after {
  display: none;
}

.hero .hero-breadcrumbs {
  top: 150px;
}

.hero .hero-breadcrumbs ul li:after {
  content: ">";
  position: static;
  top: auto;
  left: auto;
  height: auto;
  width: auto;
  background: 0 0;
  transform: none;
  margin: 0 0.3125rem;
  display: inline;
}

/* ========== FEATURE BOXES (spacing + colours) ========== */
.feature-boxes {
  margin: 3.3rem 0;
}

.feature-boxes .feature-box {
  padding-left: 0;
}

.feature-boxes .feature-box__content:after,
.feature-boxes .feature-box__content:before {
  display: none;
}

.feature-boxes .feature-box__content {
  padding-left: 0;
}

/* ===== sys_nav updates (spacing, alignment, logo behavior) ===== */
/* Header bar spacing (no fixed height) */
.header__nav-mobile .header__bar,
.header .header__bar {
  padding: var(--header-padding-mobile) 0;
}

/* Header logo container visibility */
.header .header__bar .header__logo {
  display: block;
}

/* Clickable area must match intended logo size */
.header .header__bar .logo__link,
.header__nav-mobile .header__bar .logo__link {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  line-height: 0;
  overflow: hidden;
}

/* SVG fills container, keeping aspect ratio */
.header .header__bar .header__logo .icon.icon-logo,
.header__nav-mobile .header__bar .header__logo .icon.icon-logo {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: left center;
  object-position: left center;
  fill: #fff;
}

.header.nav--active .header__bar .header__logo .icon.icon-logo,
.header__nav-mobile.nav--active .header__bar .header__logo .icon.icon-logo {
  fill: var(--color-primary);
}

/* Desktop nav spacing and distribution */
.header .header__nav-desktop .nav__list .nav__item:first-child {
  margin: 0 0.5rem 0 1rem;
}

.header .header__nav-desktop .nav__list .nav__item {
  margin: 0 0.5rem;
}

.header .header__nav-desktop .nav__list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  padding-left: 0;
}

/* Align logo with nav on wide screens */
/* Mobile menu logo color when active */
.header__nav-mobile.nav--active .header__logo .icon-logo {
  --logo-stroke-color: #0161AA;
  --logo-fill-color: #0161AA;
}

.header__nav-mobile.nav--active .header__bar .header__logo .icon-logo {
  fill: var(--logo-fill-color);
}

/* Very small screens: shrink header logo to fit */
@media (max-width: 391px) {
  :root {
    --logo-width: 11rem;
    --logo-height: 2.75rem;
  }
  .header__logo .logo__link {
    width: var(--logo-width);
    height: var(--logo-height);
  }
}
/* ===== hero updates (layout/controls/utilities) — h1 intentionally excluded ===== */
/* Light shadow on hero headings */
/* Keep readable line breaks in hero title on larger screens; allow natural wrap on small */
.hero .hero-slide_content h1 {
  text-wrap: balance;
}

/* Optional: hero controls placement refinement */
.hero .hero-slider .controls {
  position: absolute;
  bottom: 200px;
  z-index: 99999;
  margin-left: 1rem;
}

.controls .control {
  background-image: none;
  height: 44px;
  width: 44px;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-right: 1.938rem;
}


/* Hide small manual line breaks on small screens */
@media (max-width: 640px) {
  .hero {
    height: 400px;
  }
  .hero .hero-slider {
    height: 100%;
  }
  .hero .hero-slider .hero-slide {
    height: 100%;
  }
  .hero .hero-breadcrumbs {
    display: none;
  }
  .hero .br-sm-hide {
    display: none;
  }
  .hero .hero-slider .hero-slide {
    height: auto;
  }
  .row--hero-logo {
    bottom: 1rem;
  }
  .technical-excellence-logo {
    width: 5.19rem;
    height: 1.44rem;
    opacity: 0.9;
  }
  .hero .hero-slider .hero-slide .hero-slide_content {
    position: relative !important;
    top: calc(50% - 200px);
    transform: none !important;
    margin-top: 3rem;
    padding-top: 9.8rem;
    padding-bottom: 2rem;
    z-index: 5;
  }
  .hero .hero-slider .hero-slide .hero-slide_content h1 {
    font-size: 1.45rem;
    line-height: 2.25rem;
  }
  .hero .hero-slider .controls {
    bottom: 63px;
  }

  .controls .control {
  background-image: none;
  height: 40px;
  width: 40px;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-right: 1rem;
}

  /* Add subtle gradient background on mobile for readability */
  .hero .hero-slider .hero-slide .hero-slide_content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1rem;
    right: -1rem;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.3) 100%);
    z-index: -1;
    border-radius: 8px;
  }
  .hero .hero-slider {
    height: auto;
    min-height: 100%;
  }
  .hero .hero-slider .hero-slide {
    min-height: 400px;
    display: flex;
    align-items: flex-start;
  }
  .hero .hero-slide .row {
    width: 100%;
    position: relative;
    padding-bottom: 3rem;
  }
  /* Keep H2 mobile sizing from wjexpo (H1 intentionally excluded) */
  .hero .hero-slider .hero-slide .hero-slide_content h2 {
    font-size: clamp(1rem, 5.5vw, 1.25rem);
    line-height: 1.3;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
/* Fixed-width hero text container until viewport drops below 640px */
/* Make hero slide the positioning context for content */
.hero .hero-slider .hero-slide {
  position: relative;
  height: 100%;
}

/* Make hero row the positioning context so logo aligns to content area */
.hero .hero-slide .row {
  position: relative;
  height: 100%;
}

/* Position search input on hero search results to match design */
.hero .hero-slider .hero-slide .hero-slide_content.hero-slide_content-search.search--listing {
  top: 190px !important;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: auto;
}

.hero .hero-slider .hero-slide .hero-slide_content.hero-slide_content-search.search--listing.careers--listing {
  top: 240px !important;
  height: auto;
}

.search__input.careers__input .site-search__button {
  background-color: inherit;
  height: 42px;
}

/* Prevent layout shift at <=640px where transform is removed globally */
@media (max-width: 640px) {
  .hero .hero-slider .hero-slide .hero-slide_content.hero-slide_content-search.search--listing {
    position: relative !important;
    top: 0; /* anchor within normal document flow */
    left: 0; /* reset centering by left/transform */
    right: 0;
    transform: none;
    margin: 0 auto; /* center via auto margins */
    padding: 0 1rem; /* small side padding on mobile */
  }
  .hero .hero-slider .hero-slide .search__input,
  .hero .hero-slider .hero-slide .search-input {
    width: 100%;
  }
  /* Keep icon from wrapping under input on small screens */
  .hero .hero-slider .hero-slide .search__input {
    position: relative;
    max-width: 100%;
  }
  .hero .hero-slider .hero-slide .search__input input {
    width: 100% !important;
    box-sizing: border-box;
    padding-right: 56px; /* space for icon button */
    display: block;
  }
  .hero .hero-slider .hero-slide .search__input .site-search__button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 42px;
    background-position: center;
    float: none;
    margin: 0;
  }
}
/* Hero logo overlay row: full-width overlay, aligns to grid right */
.row--hero-logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}

/* Let logo remain interactive if needed */
.row--hero-logo .technical-excellence-logo {
  pointer-events: auto;
}

/* Technical Excellence Logo */
.technical-excellence-logo {
  position: relative;
  bottom: 4rem;
  right: 0;
  width: 11.55rem;
  height: 3.2rem;
  z-index: 1000;
}

.technical-excellence-logo .icon-technical-excellence {
  width: 100%;
  height: 100%;
  fill: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  display: block;
}

@media (max-width: 1024px) {
  .technical-excellence-logo {
    width: 8.66rem;
    height: 2.4rem;
  }
}
@media (max-width: 1241px) {
  .technical-excellence-logo {
    right: 2rem;
  }
}
/* Hero action buttons */
.hero-buttons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-buttons-secondary {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  background-color: #00b9fd;
  color: white;
  padding: 16px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  display: inline-block;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 185, 253, 0.3);
  transition: all 0.3s ease;
}

.hero-btn-primary:hover {
  background-color: #0099d4;
  box-shadow: 0 6px 16px rgba(0, 185, 253, 0.4);
  transform: translateY(-2px);
}

.hero-btn-secondary {
  background-color: transparent;
  color: white;
  padding: 12px 24px;
  border: 2px solid white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

.hero-btn-secondary:hover {
  background-color: white;
  color: #00b9fd;
}

.hero-btn-tertiary {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

.hero-btn-tertiary:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Center hero content vertically on desktop; mobile handled separately below */
/* Mobile hero height/layout (complements existing height rules) */
/* Extra small content padding (keep H1 rules excluded) */
@media (max-width: 380px) {
  .hero .hero-slider .hero-slide .hero-slide_content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 320px) {
  .hero .hero-slider .hero-slide .hero-slide_content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
/* Keep H2 mobile sizing from wjexpo (H1 intentionally excluded) */
@media (max-width: 320px) {
  .hero .hero-slider .hero-slide .hero-slide_content h2 {
    font-size: clamp(0.9rem, 4.5vw, 1.1rem);
    line-height: 1.25;
    margin-top: 0.5rem;
  }
}

/* Round arrow icon styling for feature-box links */
.feature-boxes .feature-box__link .bdicon {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Colors for the injected symbol's internal shapes */
.bdicon--arrow-right-round .bdring {
  fill: var(--color-secondary);
}

.bdicon--arrow-right-round .bdarrow {
  fill: #fff;
  fill-rule: evenodd;
}

/* New: solid disc fill for the round arrow */
.bdicon--arrow-right-round .bddisc {
  fill: var(--color-secondary);
  opacity: 1; /* subtle tint; adjust/remove for full solid */
}

/* Optional hover: lighten ring when link hovered */
.feature-boxes .feature-box__link:hover .bdicon--arrow-right-round .bdring {
  fill: var(--color-secondary-hover);
}

/* ========== BUTTONS (consolidated) ========== */
.btn--register, .btn--submit, .quick-links__dropdown .btn {
  background: var(--color-primary);
}

.btn--register:hover, .btn--submit:hover, .quick-links__dropdown .btn:hover {
  background: var(--color-secondary-hover);
}

.btn--alt,
.quick-links__dropdown .btn--alt,
.twi_btn_orange {
  background: var(--color-secondary);
}

.btn--alt:hover,
.quick-links__dropdown .btn--alt:hover,
.twi_btn_orange:hover {
  background: var(--color-secondary-hover);
}

.twi_btn_blue {
  background: var(--color-primary);
}

.twi_btn_blue:focus,
.twi_btn_blue:hover {
  background: var(--color-secondary);
}

/* ========== QUICK LINKS BORDER ========== */
.quick-links .quick-links__dropdown {
  border-top: 1px solid #ddd;
}

.quick-links .quick-links__dropdown:after {
  border-bottom-color: #ddd;
}

/* ========== CARDS (extra colour tweak) ========== */
.ui-card .ui-card__type {
  background-color: var(--color-secondary);
}

/* Very high specificity override for back-to-top SVG element */
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  height: 44px;
  width: 44px;
  z-index: 999999;
  background: none !important;
}

#back-to-top .icon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
}

#back-to-top:hover {
  color: var(--color-secondary);
}

/* Show state for back-to-top SVG */
body div#back-to-top.show,
html body div#back-to-top.show {
  opacity: 1;
}

/* Ensure the new square icon displays properly */
#icon-square-lt-blue-top-of-page .brbg-square {
  fill: var(--color-secondary);
}

#icon-square-lt-blue-top-of-page .brarrow {
  fill: #fff;
}

.footer.rb {
  margin-top: 5rem;
}

.popupBlueFilter {
  background-color: var(--color-primary);
}



/* Slider controls: make SVG fill the button */
.controls .control .icon {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--color-primary);
}

.hero .controls .control {
  border: 2px solid #fff;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0.6rem;
}

/* Upcoming events controls: match hero button style */
.controls .event-prev,
.controls .event-next {
  /* override hex background from component styles */
  background: none !important;
  background-image: none !important;
  height: 44px;
  width: 44px;
  margin-right: 1.938rem;
  border-radius: 0;
  box-sizing: border-box;
}

/* Meet the experts controls: match events button style */
.controls .experts-prev,
.controls .experts-next,
.controls .latest-media-prev,
.controls .latest-media-next {
  background: none !important;
  background-image: none !important;
  height: 44px;
  width: 44px;
  margin-right: 1.938rem;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color-primary);
  opacity: 1;
}

.controls .control.disabled {
  opacity: 0.2;
  color: var(--color-primary);
  pointer-events: none;
}

.controls .control:hover,
.controls .control:hover .icon {
  color: var(--color-secondary);
  opacity: 1;
}

.experts-slider .experts-slide .experts-slide--information a.card--indicator {
  border-bottom: 59px solid var(--color-primary);
}

.experts-slider .experts-slide .experts-slide--information a:hover {
  color: var(--color-primary);
}

/* ========== CARD INDICATOR - SQUARE OVERRIDE ========== */
/* Override triangular card indicators to be square */
.card.card__events .card--description a .card--indicator,
.experts-slider .experts-slide .experts-slide--information a.card--indicator {
  /* Reset triangle borders */
  border-bottom: none !important;
  border-left: none !important;
  /* Create square shape */
  width: 60px;
  height: 60px;
  background-color: var(--color-primary);
  /* Position in bottom-right corner */
  position: absolute;
  bottom: 0;
  right: 20px;
  /* Maintain existing transition */
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 200;
}

/* Adjust the + symbol positioning for the square */
.card.card__events .card--description a .card--indicator span,
.experts-slider .experts-slide .experts-slide--information a.card--indicator span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.15rem;
  font-weight: 900;
  bottom: -15px;
}

.experts-slider .experts-slide .experts-slide--information a.card--indicator span {
  bottom: -29px;
}

/* Show on hover */
.card.card__events .card--description a:hover .card--indicator,
.experts-slider .experts-slide .experts-slide--information:hover .card--indicator {
  opacity: 1;
}

.latest-media-row .ui-card .ui-card__image {
  aspect-ratio: 759/598; /* Exact ratio: 1.27:1 (close to 5:4) */
  height: auto;
}

/* Remove clip-path from type badges */
.latest-media-row .ui-card .ui-card__type,
.latest-media-row .ui-card .ui-card__type-dark {
  clip-path: none;
}

/* Content container */
.latest-media-row .ui-card .ui-card__content {
  display: block; /* Simple block, no flex needed */
  padding: 0.75rem 1rem; /* Reduced from 1rem 1.25rem */
  padding-bottom: 0; /* No bottom padding needed with grid */
  text-align: left;
  color: var(--color-primary);
}

/* Handle clipped content variant */
.latest-media-row .ui-card .ui-card__content.ui-card__content--clip {
  top: 0;
  margin: 0;
  padding-top: 0.75rem; /* Reduced from 1rem */
  text-align: left;
  clip-path: none;
}

/* Heading styling */
.latest-media-row .ui-card .ui-card__heading {
  font-weight: 800;
  line-height: 1.2; /* Tightened from 1.25 */
  margin-top: 0; /* Removed top margin */
  display: -webkit-box;
  display: -moz-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em; /* 2 lines × 1.2 line-height */
}

.latest-media-row .ui-card .ui-card__heading a {
  color: var(--color-primary);
}

.latest-media-row .ui-card .ui-card__heading a:hover {
  text-decoration: none;
}

/* Text/description styling */
.latest-media-row .ui-card .ui-card__text {
  line-height: 1.4; /* Tightened from 1.45 */
  margin-top: 0.25rem; /* Reduced from 0.375rem */
  display: -webkit-box;
  display: -moz-box;
  -webkit-line-clamp: 3; /* Reduced from 4 to match design */
  line-clamp: 3; /* Standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Removed min-height to allow natural truncation */
  max-height: 4.2em; /* 3 lines × 1.4 */
}

/* Date styling - aligned at bottom via grid */
.latest-media-row .ui-card .ui-card__date {
  position: static; /* Normal flow, not absolute */
  margin-top: 0;
  padding: 0.5rem 1rem; /* Reduced from 0.75rem 1.25rem */
  border-top: 4px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.875rem; /* Slightly smaller for compact look */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hide date icon */
.latest-media-row .ui-card .ui-card__date .icon {
  display: none;
}

/* Word wrapping for long content - only for headings */
.latest-media-row .ui-card .ui-card__heading {
  overflow-wrap: break-word; /* Changed from anywhere for better compatibility */
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Text uses normal word wrapping to work with line-clamp */
.latest-media-row .ui-card .ui-card__text {
  overflow-wrap: break-word; /* More compatible with line-clamp than anywhere */
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .latest-media-row .ui-card .ui-card__heading {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: 3.6em; /* 3 × 1.2 line-height */
  }
  .latest-media-row .ui-card .ui-card__text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 5.6em; /* 4 × 1.4 line-height */
  }
}
/* Latest media header row (title + More link) */
.latest-media .latest-media-title.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
}

.latest-media .latest-media-title .latest-media-cta {
  display: flex;
  justify-content: flex-end;
}

.latest-media .latest-media-title .latest-media--link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: transparent;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, color 0.3s ease;
  top: 0;
  text-decoration: none;
}

.latest-media .latest-media-title .latest-media--link .bdicon {
  width: 1.4875rem;
  height: 1.4875rem;
  vertical-align: middle;
}

.latest-media-row .ui-card .ui-card__text,
.latest-media-row .ui-card .ui-card__date {
  position: relative;
  z-index: 3;
  padding-bottom: 0;
  margin-top: 1rem;
  bottom: 0;
}

/* Smooth color/fill transitions for label and icon */
.latest-media .latest-media-title .latest-media--link .latest-media--label {
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.latest-media .latest-media-title .latest-media--link .bdicon .bqsar__background,
.latest-media .latest-media-title .latest-media--link .bdicon .bqsar__arrow {
  transition: fill 0.3s ease;
}

/* Hover: mimic footer social buttons */
.latest-media .latest-media-title .latest-media--link:hover,
.latest-media .latest-media-title .latest-media--link:focus {
  color: var(--color-secondary);
}

/* On hover/focus, tint the square background of the arrow icon */
.latest-media .latest-media-title .latest-media--link:hover .bdicon .bqsar__background {
  fill: var(--color-secondary);
}

/* On hover/focus, set arrow to primary to maintain contrast */
.latest-media .latest-media-title .latest-media--link:hover .bdicon .bqsar__arrow,
.latest-media .latest-media-title .latest-media--link:focus .bdicon .bqsar__arrow {
  fill: var(--color-primary);
}

@media (max-width: 640px) {
  .latest-media .latest-media-title .latest-media--link {
    padding: 0.25rem 0.5rem;
  }
}
/*our stories */
.video-slice:before {
  clip-path: none;
}

.mask-bg p {
  color: #fff;
}

.mask-bg.top-left-up.bottom-left-down.background-section {
  margin-bottom: 8rem;
}

.testimonials-section .testimonials-slider .testimonials-slider_slide .testimonial--avatar img {
  clip-path: none;
}

/* Google Ads Lead Form */
.lead-form {
  background-color: #131b30 !important;
  padding: 0.83em !important;
}

.lead-form .sys_legend, .lead-form label {
  color: #fff !important;
  font-size: 16px !important;
}

.lead-form .sys_cms-form-body {
  width: 100% !important;
}

.lead-form li:before {
  content: none !important;
}

.lead-form input, .lead-form textarea {
  padding: 10px !important;
  font-size: 16px !important;
  width: 100% !important;
}

.lead-form input {
  height: 40px !important;
}

.lead-form .sys_cms-form-item {
  display: inline-block !important;
}

.lead-form button {
  background-color: #30b3e9 !important;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: .625rem 1.75rem;
  color: #fff !important; 
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border: 0;
  transition: all linear .2s;
  cursor: pointer;
}

.lead-form .sys_cms-form-validationsummary, .lead-form .sys_cms-form-validationsummary a {
  color: #fff !important;
}

.lead-form .sys_cms-form-validationsummary {
  padding: 15px 0 0 15px !important;
}

.lead-form .sys_required {
  font-weight: bold !important;
  color: #fff !important;
}

/* ============================================================
   TWI CSWIP 3.1U — Contensis lead form styling
   Add this to your site / form theme CSS stylesheet.
   Targets the stable sys_ classes + the .lead-form-claude wrapper.
   Works for any form instance (150014, 150016, etc) — the numeric
   id changes per instance but the classes do not, so CSS still matches.
   !important is used on key rules to win over Contensis's own form
   stylesheet, which may otherwise override these.
   ============================================================ */

/* ---- Form container: navy panel ---- */
.lead-form-claude {
  background: #131b30;
  padding: 28px 24px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

/* ---- Field list reset ---- */
.lead-form-claude .sys_cms-form-body {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lead-form-claude .sys_cms-form-item {
  margin: 0 0 16px;
  list-style: none;
}
.lead-form-claude .sys_cms-form-item.sys_multiline {
  margin-bottom: 20px;
}

/* ---- Labels + legend (Name group heading) ---- */
.lead-form-claude .sys_fieldlabel,
.lead-form-claude .sys_legend {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* ---- Sub-labels inside Name group (First / Last) ---- */
.lead-form-claude .sys_namesubelement label {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 5px;
}

/* ---- Required asterisk: cyan ---- */
.lead-form-claude .sys_required {
  color: #30b3e9;
}

/* ---- Inputs + textarea: white fields ---- */
.lead-form-claude input[type="text"],
.lead-form-claude input[type="email"],
.lead-form-claude input[type="tel"],
.lead-form-claude textarea {
  width: 100% !important;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  background: #ffffff;
  color: #131b30;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
.lead-form-claude textarea {
  height: auto;
  min-height: 140px;
  line-height: 1.5;
  resize: vertical;
}

/* ---- Focus state ---- */
.lead-form-claude input:focus,
.lead-form-claude textarea:focus {
  outline: 2px solid #30b3e9;
  outline-offset: 0;
}

/* ---- First name / Last name side by side ---- */
.lead-form-claude .sys_namesubelement {
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
  padding-right: 8px;
}
.lead-form-claude .sys_lastnamesubelement {
  padding-right: 0;
  padding-left: 8px;
}

/* ---- Submit button: full-width cyan ---- */
.lead-form-claude .sys_form-submit {
  background: #30b3e9;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: Arial, Helvetica, sans-serif;
}
.lead-form-claude .sys_form-submit:hover {
  background: #60d1fa;
}

/* ---- Placeholder colour ---- */
.lead-form-claude ::placeholder {
  color: #8f9bb3;
  opacity: 1;
}

/* ---- Confirmation message (shown after submit) ---- */
.lead-form-claude .sys_cms-form-confirmation-content {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- Validation error text ---- */
.lead-form-claude .sys_error,
.lead-form-claude .sys_cms-form-error {
  color: #ffd2cc;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

/* ---- Mobile: stack the name fields ---- */
@media (max-width: 560px) {
  .lead-form-claude .sys_namesubelement,
  .lead-form-claude .sys_lastnamesubelement {
    display: block;
    width: 100%;
    padding: 0 0 16px;
  }
}