/* Elements - Components Start */
/* ------------------------------------------------*/

/* ==================================================
   DBETA Logo
   Purpose:
   - Horizontal logo lockup
   - Uses Funnel Display for a sharper brand feel
   - Keeps alignment clean and system-led
================================================== */

.db-logo {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .db-logo {
    gap: 1.4rem;
  }
}

.db-logo__image {
  display: block;
  width: 5.6rem;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .db-logo__image {
    width: 5.6rem;
  }
}

.db-logo__text {
  font: normal var(--fw-semibold) 1.9rem/1 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-bright);
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) {
  .db-logo__text {
    font-size: 1.9rem;
  }
}


/* ==================================================
   Section Title Component
   Purpose:
   - Reusable section heading wrapper
   - Supports different spacing variations
   - Used before grids, blocks, horizontal layouts, and controls
================================================== */

.db-section-title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.4rem;
  text-align: left;
  margin-bottom: 2rem;
}

.db-section-title.h2-only {
  margin-bottom: 6.2rem;
}

.db-section-title.no-controls {
  margin-bottom: 6rem;
}

.db-section-title.title-large {
  gap: 4.2rem;
}

.db-section-title.pre-grid {
  margin-bottom: 12rem;
}

.db-section-title.pre-block {
  margin-bottom: 4.4rem;
}

.db-section-title.no-margin {
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .db-section-title {
    margin-bottom: 8rem;
  }

  .db-section-title.h2-only {
    margin-bottom: 6.6rem;
  }

  .db-section-title.no-controls {
    margin-bottom: 7rem;
  }

  .db-section-title.pre-grid {
    margin-bottom: 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title {
    margin-bottom: 6.7rem;
  }

  .db-section-title.no-controls {
    margin-bottom: 6.7rem;
  }

  .db-section-title.no-margin-desktop {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title.title-large {
    gap: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .db-section-title {
    gap: 4.2rem;
    margin-bottom: 6.7rem;
  }
}

.db-section-title__text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}

@media only screen and (min-width: 1600px) {
  .db-section-title__text {
    gap: 2.6rem;
  }
}

.db-section-title__controls {
  position: relative;
}


/* ==================================================
   Section Title Image Link
   Purpose:
   - Used when section heading includes linked image / badge / logo
================================================== */

.db-section-title__image-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.db-section-title__image-link svg,
.db-section-title__image-link img {
  width: 140px;
  height: auto;
}

@media only screen and (min-width: 1600px) {
  .db-section-title__image-link svg,
  .db-section-title__image-link img {
    width: 160px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__title.card-split-title {
    margin-top: -1.6rem;
    max-width: 700px;
  }
}


/* ==================================================
   Section Description
   Purpose:
   - Keeps supporting copy readable with controlled line length
================================================== */

.db-section-title__descr {
  padding-right: 6rem;
  margin-top: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .db-section-title__descr {
    margin-top: 1.8rem;
    max-width: 620px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__descr {
    margin-top: 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .db-section-title__descr {
    margin-top: 2.5rem;
  }
}


/* ==================================================
   Section Controls
   Purpose:
   - Button / CTA group inside section title component
================================================== */

.db-section-title__controls {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.2rem;
}

.db-section-title__controls.pre-title {
  margin-top: 3.2rem;
}

@media only screen and (min-width: 768px) {
  .db-section-title__controls.pre-title {
    margin-top: 2.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__controls {
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 4.2rem;
  }

  .db-section-title__controls.pre-title {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .db-section-title__controls {
    margin-top: 4.2rem;
  }
}


/* ==================================================
   Horizontal Section Title Variant
   Purpose:
   - Used when title, description, and controls sit in a wider row layout
================================================== */

@media only screen and (min-width: 1200px) {
  .db-section-title__hrtitle {
    padding-right: 6rem;
    margin-bottom: 0;
  }
}

.db-section-title__hrdescr {
  margin-top: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .db-section-title__hrdescr {
    padding-right: 6rem;
    margin-top: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__hrdescr {
    margin-top: 0;
    padding-top: 0.7rem;
  }
}

.db-section-title__hrcontrols {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.2rem;
}

.db-section-title__hrcontrols.pre-title {
  margin-top: 3.2rem;
}

@media only screen and (min-width: 768px) {
  .db-section-title__hrcontrols.pre-title {
    margin-top: 2.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__hrcontrols {
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-top: 1.7rem;
    margin-top: 0;
  }

  .db-section-title__hrcontrols.pre-title {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .db-section-title__hrcontrols {
    padding-top: 1.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-section-title__hrparagraph {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .db-section-title__hrparagraph {
    margin-top: 5.3rem;
  }
}


/* ==================================================
   Data List
   Purpose:
   - Structured label/value pairs
   - Good for contact info, metadata, system details, stats
================================================== */

.db-data-list {
  position: relative;
}

.db-data-list__column {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.8rem;
  margin-bottom: 2.8rem;
}

.db-data-list__column:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .db-data-list__column {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .db-data-list__column {
    gap: 3.4rem;
  }
}

.db-data-list__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
}

.db-data-list__name {
  font: normal var(--fw-medium) 1.4rem/1.2 var(--_font-default);
  color: var(--t-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.db-data-list__content {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.db-data-list__content a {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--st-medium)), to(var(--st-medium))), -webkit-gradient(linear, left top, right top, from(var(--accent)), to(var(--accent)));
  background: -moz-linear-gradient(left, var(--st-medium), var(--st-medium)), -moz-linear-gradient(left, var(--accent), var(--accent));
  background: linear-gradient(to right, var(--st-medium), var(--st-medium)), linear-gradient(to right, var(--accent), var(--accent));
  -moz-background-size: 100% 1px, 0 1px;
       background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
     -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
          transition: background-size 400ms, color 300ms;
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
}

.no-touch .db-data-list__content a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
       background-size: 0 1px, 100% 1px;
  -webkit-transform-origin: bottom left;
     -moz-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
}


/* ==================================================
   Avatars Group
   Purpose:
   - Grouped people / team / testimonial avatar display
================================================== */

.db-avatars-group {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}

@media only screen and (min-width: 1200px) {
  .db-avatars-group {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .db-avatars-group.align-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
       -moz-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
  }
}

.db-avatars-group__text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.db-avatars-group__text p,
.db-avatars-group__text a {
  line-height: 1.2;
  color: var(--t-medium);
  font-size: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .db-avatars-group__text p,
  .db-avatars-group__text a {
    font-size: 2.2rem;
  }
}

.db-avatars {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.db-avatars.align-right {
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: right;
}

.db-avatars__item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 50%;
       border-radius: 50%;
  overflow: hidden;
  margin-left: -2.2rem;
}

.db-avatars__item:first-of-type {
  margin-left: 0;
}

.db-avatars__item.small {
  width: 4.6rem;
  height: 4.6rem;
  margin-left: -1.4rem;
}

.db-avatars__item.small:first-of-type {
  margin-left: 0;
}

.db-avatars__item img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .db-avatars__item.small {
    width: 5.6rem;
    height: 5.6rem;
    margin-left: -1.6rem;
  }
}

.db-avatars__icon {
  width: 4rem;
  height: auto;
}

.db-avatars__icon.small {
  width: 3rem;
  height: auto;
}


/* ==================================================
   Preview Hover
   Purpose:
   - Overlay state for previews / project cards
   - Typo fixed: fbackdrop-filter -> backdrop-filter
================================================== */

.db-preview-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  opacity: 0;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  -webkit-transition: -webkit-backdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
          transition: backdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier);
}

.db-preview-hover__icon {
  display: block;
  width: 10rem;
}

.db-preview-hover__icon.icon-small {
  width: 8rem;
}

.db-preview-hover__icon img {
  width: 100%;
  height: auto;
}

.db-preview-hover__text {
  font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent);
  color: var(--pt-t-light-bright);
}


/* ==================================================
   Counter Component
   Purpose:
   - Reusable statistic / number display layout
================================================== */

.db-counter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}

.db-counter.small {
  gap: 2rem;
}

.db-counter.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .db-counter.align-end {
    -webkit-box-align: end;
       -moz-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    text-align: right;
  }
}

.db-counter__descr {
  max-width: 250px;
}


/* ==================================================
   Button Group
   Purpose:
   - Responsive CTA group
================================================== */

.db-btngroup {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.db-btngroup.centered {
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media only screen and (min-width: 576px) {
  .db-btngroup {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
  }
}


/* ==================================================
   Divider Media
   Purpose:
   - Large image/video divider blocks
================================================== */

.db-divider {
  position: relative;
  -moz-border-radius: var(--_radius-l);
       border-radius: var(--_radius-l);
  overflow: hidden;
  height: 460px;
}

@media only screen and (min-width: 768px) {
  .db-divider {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-divider {
    height: 760px;
  }

  .db-divider.divider-hero-01 {
    padding-top: 14rem;
  }
}

@media only screen and (min-width: 1600px) {
  .db-divider {
    height: 930px;
  }
}

.db-divider__image {
  position: relative;
  width: 100%;
  height: 460px;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
       background-size: cover;
  overflow: hidden;
}

.db-divider__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .db-divider__image {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-divider__image {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .db-divider__image {
    height: 930px;
  }
}

.db-divider__video {
  position: relative;
  width: 100%;
  height: 460px;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
       background-size: cover;
  overflow: hidden;
}

.db-divider__video video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center center;
  -moz-background-size: contain;
       background-size: contain;
  -o-object-fit: cover;
     object-fit: cover;
}

.db-divider__video img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .db-divider__video {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-divider__video {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .db-divider__video {
    height: 930px;
  }
}

.db-divider__trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}


/* ==================================================
   Project Item
   Purpose:
   - Project preview card and project media display
================================================== */

.db-project-item__media {
  position: relative;
  display: block;
  margin-bottom: 1.4rem;
  height: 460px;
}

@media only screen and (min-width: 768px) {
  .db-project-item__media {
    height: 600px;
    margin-bottom: 2.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-project-item__media {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .db-project-item__media {
    height: 930px;
  }
}

.db-project-item__preview {
  position: relative;
  width: 100%;
  height: 460px;
  -moz-border-radius: var(--_radius-l);
       border-radius: var(--_radius-l);
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
       background-size: cover;
}

@media only screen and (min-width: 768px) {
  .db-project-item__preview {
    height: 600px;
  }
}

@media only screen and (min-width: 1200px) {
  .db-project-item__preview {
    height: 760px;
  }
}

@media only screen and (min-width: 1600px) {
  .db-project-item__preview {
    height: 930px;
  }
}

.db-project-item__tags {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.6rem 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .db-project-item__tags {
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .db-project-item__tags {
    gap: 1.4rem;
  }
}

.db-project-item__promo {
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .db-project-item__promo {
    padding: 0 4rem;
  }
}

.db-project-item__name a {
  display: inline;
  font: normal var(--fw-medium) 2.2rem/1.25 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-medium);
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--accent)), to(var(--accent)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--accent), var(--accent));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--accent), var(--accent));
  -moz-background-size: 100% 1px, 0 1px;
       background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
     -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
          transition: background-size 300ms, color 300ms;
}

.no-touch .db-project-item__name a:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
       background-size: 0 1px, 100% 1px;
}

.db-project-item__name a span {
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
}

.db-project-item__name.small a {
  font-size: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .db-project-item__name a {
    font-size: 3rem;
  }

  .db-project-item__name.small a {
    font-size: 2.2rem;
  }
}


/* ==================================================
   Links Lines
   Purpose:
   - Large row-based navigation links
   - Blue accent appears on hover as intelligence signal
================================================== */

.db-links-lines {
  position: relative;
}

@media (hover) and (prefers-reduced-motion: no-preference) {
  .db-links-lines > .db-links-lines__item {
    -webkit-transition: opacity 0.3s ease;
       -moz-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
  }

  .db-links-lines:hover > .db-links-lines__item:not(:hover) {
    opacity: 0.2;
  }
}

.db-links-lines__item {
  position: relative;
  display: block;
  margin-top: -2px;
}

.db-links-lines__item:first-of-type {
  margin-top: 0;
}

.db-links-lines__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.db-links-lines__link {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 3rem 0;
  overflow: hidden;
}

.no-touch .db-links-lines__link:hover .db-links-lines__title {
  color: var(--accent);
  -webkit-transform: translateX(1rem);
     -moz-transform: translateX(1rem);
      -ms-transform: translateX(1rem);
          transform: translateX(1rem);
}

.no-touch .db-links-lines__link:hover .db-links-lines__icon i {
  color: var(--accent);
}

.no-touch .db-links-lines__link:hover .db-links-lines__icon i::before {
  -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
     -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
          animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp;
}

.db-links-lines__title {
  position: relative;
  color: var(--t-bright);
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
     -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
          transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier);
}

.db-links-lines__icon {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 3rem;
  -webkit-transform: translateX(0) rotate(0deg);
     -moz-transform: translateX(0) rotate(0deg);
      -ms-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
     -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
          transition: transform var(--_animspeed-medium) var(--_animbezier);
}

.db-links-lines__icon i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier);
     -moz-transition: color var(--_animspeed-medium) var(--_animbezier);
          transition: color var(--_animspeed-medium) var(--_animbezier);
}


/* ==================================================
   Check List
   Purpose:
   - Readable feature / benefit lists
   - Uses body font for clarity
================================================== */

.db-check-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}

.db-check-list li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.2rem;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-default);
  color: var(--t-medium);
}


/* ==================================================
   Floating Image
   Purpose:
   - Absolute positioned visual layer / background asset
================================================== */

.db-floating-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.db-floating-img.floating-bg {
  overflow: hidden;
  z-index: -1;
}

.db-floating-img__item {
  position: absolute;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: auto;
  bottom: 20%;
  right: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .db-floating-img__item {
    bottom: 4rem;
    right: 6rem;
    width: 600px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .db-floating-img__item {
    width: 46%;
  }
}

@media only screen and (min-width: 1600px) {
  .db-floating-img__item {
    right: 9rem;
    width: 40%;
  }
}


/* ==================================================
   Sector Component
   Purpose:
   - Modern fluid section for sector / audience statements
   - Uses fluid spacing and typography tokens
================================================== */

.db-sector {
  position: relative;
  padding-top: clamp(0.6rem, 4vw + 3rem, 0.8rem);
  padding-bottom: clamp(7.7rem, 5vw + 4rem, 9.1rem);
}

.db-sector__title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.db-sector__title span {
  font: normal var(--fw-medium) var(--fs-h1-small)/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

.db-sector__text {
  margin: clamp(1.6rem, 1rem + 2vw, 2.4rem) auto 0;
  width: 100%;
  max-width: 72ch;
  text-align: center;
  /* Same as .db-section-title__subhead / body supporting text — one consistent
     colour and size for supporting paragraphs across the site. */
  color: var(--t-medium);
  font-size: var(--fs-body);
  text-wrap: pretty;
}
/* Override the .t-large utility (its `p.t-large` rule is more specific than the
   base and forces --t-bright + --fs-body-large): hold the shared supporting
   colour and size so the sector lead reads the same as the subhead. */
.db-sector__text.t-large {
  color: var(--t-medium);
  font-size: var(--fs-body);
}

/* Section-title component headings — one consistent fluid scale everywhere the
   .db-sector title is used (homepage "Three steps…" and "Built for businesses…"
   section headers, the comparison-table heading, etc.). They previously used
   the full h2 scale (up to 80px) — bigger than the peer section headings and
   crowding the top bar. Now they match the intro/pinned headings. */
.db-sector__title h1,
.db-sector__title h2,
.db-sector__title h3 {
  font-size: clamp(3.2rem, 0.4rem + 3.9vw, 7.6rem);
  line-height: 1.1;
}

/* "How It Compares" table section — even rhythm: an even gap under the heading,
   and a proper gap before the table (it previously sat flush against the
   paragraph, 0px). */
#how-it-compares .db-sector__title + .db-sector__text {
  margin-top: clamp(2rem, 1.2rem + 1.6vw, 3.4rem);
}
#how-it-compares .db-sector__text + .table-responsive-custom {
  margin-top: clamp(3.2rem, 2rem + 2.4vw, 5.2rem);
}


/* ==================================================
   Features Promo
   Purpose:
   - Feature / service promo sections
   - Supports content + image layouts
================================================== */

.db-features-promo,
.db-features-promo__item {
  position: relative;
}

.db-features-promo {
  padding-top: 0;
  padding-bottom: 4rem;
}

@media only screen and (min-width: 768px) {
  .db-features-promo {
    padding-top: 10.8rem;
    padding-bottom: 10.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-features-promo__item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.db-features-structural_strategy__content {
  margin-bottom: 5rem;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .db-features-structural_strategy__content {
    max-width: 600px;
    margin: 0 auto 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-features-structural_strategy__content {
    max-width: 100%;
    margin: 0;
    padding-bottom: 1.7rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .db-features-structural_strategy__content {
    padding-bottom: 3.2rem;
  }
}

.db-features-structural_strategy__img {
  padding-left: 0;
  max-width: 500px;
}

.db-features-promo__content {
  margin-bottom: 5rem;
  text-align: center;
}

.db-features-promo__content span {
  color: var(--t-bright);
}

/* Space between stacked paragraphs (e.g. the Continuity section body). Uses the
   adjacent-sibling selector so single-paragraph promos like the Introduction are
   unaffected. */
.db-features-promo__content p + p {
  margin-top: 1.6rem;
}


/* System-led list style
   Blue square acts as the "intelligence node" from the DBETA identity. */

.db-features-promo__content ul {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.8rem;
  padding: 0;
  margin: 2rem 0 0;
}

.db-features-promo__content li {
  position: relative;
  padding-left: 2rem;
  color: var(--t-medium);
}

.db-features-promo__content li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--accent);
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (min-width: 768px) {
  .db-features-promo__content {
    max-width: 600px;
    margin: 0 auto 5rem;
  }

  .db-features-promo__content ul {
    gap: 1rem;
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .db-features-promo__content {
    max-width: 700px;
    margin: 0;
    padding-bottom: 1.7rem;
    text-align: left;
  }
}

@media only screen and (min-width: 1600px) {
  .db-features-promo__content {
    padding-bottom: 3.2rem;
  }

  .db-features-promo__content ul {
    gap: 1rem;
    font-size: 2.2rem;
  }
}

.db-features-promo__image {
  padding-left: 0;
}
.db-features-promo__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Two-column intro: side-by-side from ≥992 + fluid text/image ────────────
   Previously the text/image columns only sat side by side at ≥1200 (Bootstrap
   col-xl-5) and stacked below that, and the heading used the full section h2
   scale (up to ~72px) which was oversized for the column. Lay the two columns
   out as a robust flex row from 992 (independent of the col-* classes, which
   render inconsistently here), left-align the copy, and scale the heading
   fluidly so it fits the column yet still grows on large screens. The image
   fills its flex column, so it scales with the layout automatically. */
@media only screen and (min-width: 992px) {
  .db-features-promo .row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: clamp(3rem, 6vw, 8rem);
  }
  .db-features-promo .row > .db-features-promo__item {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .db-features-promo__content {
    /* Cap the reading measure so lines stay in the comfortable ~60–66ch range
       instead of stretching the full (wide) column on large screens. Only bites
       above ~1650px; narrower columns fill as before. */
    max-width: 66rem;
    margin: 0;
    text-align: left;
  }
  .db-features-promo .db-features-promo__content .db-pinned__title,
  .db-features-promo .db-features-promo__content h2,
  .db-features-promo .db-features-promo__content p {
    text-align: left;
  }
  .db-features-promo__content .db-pinned__title,
  .db-features-promo__content h2 {
    font-size: clamp(3.2rem, 0.4rem + 3.9vw, 7.6rem);
    line-height: 1.08;
  }
}
@media only screen and (min-width: 1200px) {
  .db-features-promo .row {
    gap: clamp(8rem, 12vw, 18rem);
  }
}

/* ------------------------------------------------*/
/* Elements - Components End */
/* ------------------------------------------------*/