/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 10, but if you do -- maybe just use a custom class  :)  */
/* Bootstrap modal for the team bios (not part of the global stylesheet) */
.fade {
  transition: opacity 0.15s linear; }
  @media (prefers-reduced-motion: reduce) {
    .fade {
      transition: none; } }
  .fade:not(.show) {
    opacity: 0; }

.collapse:not(.show) {
  display: none; }

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; }
  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }
  .collapsing.collapse-horizontal {
    width: 0;
    height: auto;
    transition: width 0.35s ease; }
    @media (prefers-reduced-motion: reduce) {
      .collapsing.collapse-horizontal {
        transition: none; } }

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1em;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: #FFFFFF;
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
  --bs-modal-header-padding-x: 1em;
  --bs-modal-header-padding-y: 1em;
  --bs-modal-header-padding: 1em 1em;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.25;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0; }

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none; }
  .modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px); }
    @media (prefers-reduced-motion: reduce) {
      .modal.fade .modal-dialog {
        transition: none; } }
  .modal.show .modal-dialog {
    transform: none; }
  .modal.modal-static .modal-dialog {
    transform: scale(1.02); }

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2); }
  .modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden; }
  .modal-dialog-scrollable .modal-body {
    overflow-y: auto; }

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2); }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0; }

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg); }
  .modal-backdrop.fade {
    opacity: 0; }
  .modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity); }

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius); }
  .modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto; }

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height); }

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding); }

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius); }
  .modal-footer > * {
    margin: calc(var(--bs-modal-footer-gap) * .5); }

@media (min-width: 641px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto; }
  .modal-sm {
    --bs-modal-width: 300px; } }

@media (min-width: 1025px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px; } }

@media (min-width: 1401px) {
  .modal-xl {
    --bs-modal-width: 1140px; } }

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0; }
  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0; }
  .modal-fullscreen .modal-header,
  .modal-fullscreen .modal-footer {
    border-radius: 0; }
  .modal-fullscreen .modal-body {
    overflow-y: auto; }

@media (max-width: 640.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-sm-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
      border-radius: 0; }
    .modal-fullscreen-sm-down .modal-body {
      overflow-y: auto; } }

@media (max-width: 768.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-md-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-md-down .modal-header,
    .modal-fullscreen-md-down .modal-footer {
      border-radius: 0; }
    .modal-fullscreen-md-down .modal-body {
      overflow-y: auto; } }

@media (max-width: 1024.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-lg-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-lg-down .modal-header,
    .modal-fullscreen-lg-down .modal-footer {
      border-radius: 0; }
    .modal-fullscreen-lg-down .modal-body {
      overflow-y: auto; } }

@media (max-width: 1400.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-xl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-xl-down .modal-header,
    .modal-fullscreen-xl-down .modal-footer {
      border-radius: 0; }
    .modal-fullscreen-xl-down .modal-body {
      overflow-y: auto; } }

@media (max-width: 1699.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-xxl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-xxl-down .modal-header,
    .modal-fullscreen-xxl-down .modal-footer {
      border-radius: 0; }
    .modal-fullscreen-xxl-down .modal-body {
      overflow-y: auto; } }

#intro {
  padding: 80px 0;
  background-color: #F5F5F5; }
  #intro h2 {
    max-width: 951px; }
  #intro p {
    color: #6D6E71; }
  #intro h5 {
    margin-top: 36px;
    margin-bottom: 0;
    text-transform: uppercase; }
  @media screen and (min-width: 1025px) {
    #intro {
      padding: 128px 0; } }

#team {
  background-color: #F5F5F5;
  padding: 20px 0 1px; }
  #team .head {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    #team .head h3,
    #team .head h5 {
      margin: 0; }
    #team .head h3 {
      margin-bottom: 5px; }
    #team .head h5 {
      text-transform: uppercase; }
    #team .head::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 31px;
      width: 756px;
      color: #84BD00;
      background-image: url("/wp-content/themes/inet_lightspeed-child/img/group-x-sm.svg"), url("/wp-content/themes/inet_lightspeed-child/img/group-x-sm.svg");
      background-repeat: repeat-x, repeat-x;
      background-position: -8px top, -8px bottom;
      /* one X centred in each 27px tile, as in the design */
      background-size: 27.3px 10.4px, 27.3px 10.4px;
      pointer-events: none;
      filter: brightness(0) saturate(100%) invert(67%) sepia(94%) saturate(498%) hue-rotate(26deg) brightness(96%) contrast(101%); }
    @media screen and (max-width: 1310px) {
      #team .head::after {
        display: none; } }
  #team .card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 32px; }
    #team .card h5 {
      font-size: 24px;
      margin: 0;
      margin-top: 15px; }
    #team .card p {
      margin-bottom: 15px;
      font-size: 18px;
      line-height: 1.64; }
    #team .card .read-bio {
      display: inline-flex;
      align-items: center;
      gap: 17px;
      align-self: flex-start;
      padding: 0 0 2px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: none;
      color: #000000;
      font-size: 18px;
      font-weight: 700;
      line-height: 32px; }
      #team .card .read-bio i {
        font-size: 12px; }
      #team .card .read-bio:hover, #team .card .read-bio:focus-visible {
        border-bottom-color: #84BD00; }
    #team .card a {
      color: #000000;
      margin-top: 15px;
      font-size: 18px; }

#sec-callout {
  padding: 150px 0;
  background-color: #202020;
  /* the design's callout headings run up to ~1300px; the copy stays narrower */ }
  #sec-callout h2 {
    max-width: 1310px; }
  #sec-callout p {
    max-width: 873px; }
  #sec-callout .bg-img {
    z-index: 0; }
  @media screen and (min-width: 1025px) {
    #sec-callout {
      padding: 272px 0 170px; } }

@media screen and (min-width: 1025px) {
  #sec-callout {
    padding-bottom: 256px; } }

/*-------------------------------------------
## Bio modal
--------------------------------------------*/
#bio-modal {
  --bs-modal-width: 1623px; }
  #bio-modal .modal-dialog {
    padding: 0 8px; }
  #bio-modal .modal-content {
    position: relative;
    padding: 96px 24px 48px;
    border: 0;
    border-radius: 10px;
    background-color: #FFFFFF; }
  #bio-modal .close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background-color: #84BD00;
    color: #FFFFFF;
    font-size: 14px; }
  #bio-modal .image-container {
    aspect-ratio: 674 / 850;
    border: 1px solid #BCBEC0; }
    #bio-modal .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  #bio-modal h2 {
    margin-bottom: 8px; }
  #bio-modal h3 {
    margin-bottom: 32px; }
  #bio-modal p {
    color: #6D6E71;
    line-height: 1.64; }
  #bio-modal blockquote {
    margin: 28px 0;
    padding: 0;
    border: 0;
    color: #6D6E71;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px; }
  @media screen and (min-width: 1025px) {
    #bio-modal .modal-content {
      padding: 190px 128px 128px 130px; }
    #bio-modal .close {
      top: 64px;
      right: 64px;
      width: 62px;
      height: 62px; }
    #bio-modal .content {
      padding-left: 32px; } }

section {
  /* heading line breaks follow the desktop design; narrower screens wrap naturally */ }
  section h2 br {
    display: none; }
  @media screen and (min-width: 1700px) {
    section h2 br {
      display: inline; } }