/* About Us page component. These rules are independent of Home and Design Sections. */

/* Hero */
.dm-about__hero {
    align-items: center;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    isolation: isolate;
    justify-content: center;
    min-height: var(--dm-about__hero-min-height, clamp(350px, calc(337.6761px + 3.2864vw), 385px));
    overflow: hidden;
    padding: 32px 24px;
    position: relative;
    text-align: center;
}

.dm-about__hero-image,
.dm-about__hero-video {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.dm-about__hero-image {
    object-fit: cover;
    transition: opacity .35s ease;
    z-index: 0;
}

.dm-about__hero::before {
    background: #000;
    content: '';
    inset: 0;
    opacity: .55;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.dm-about__hero-video {
    border: 0;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 0;
}

.dm-about__hero-video--youtube {
    height: max(100%, 56.25vw);
    left: 50%;
    max-width: none;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 177.7778vh);
}

.dm-about__hero--video-ready .dm-about__hero-video--ready {
    opacity: 1;
}

.dm-about__hero--video-ready .dm-about__hero-image {
    opacity: 0;
}

.dm-about__hero-content {
    max-width: 960px;
    position: relative;
    z-index: 2;
}

.dm-about__hero-eyebrow,
.dm-about__hero-breadcrumb {
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.dm-about__hero-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-about__hero-breadcrumb a,
.dm-about__hero-breadcrumb a:visited {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.dm-about__hero-breadcrumb a:hover,
.dm-about__hero-breadcrumb a:focus-visible {
    color: var(--dm-brand);
}

.dm-about__hero-title {
    color: inherit;
    font-size: clamp(32px, calc(20.7324px + 3.0047vw), 64px);
    font-weight: 700;
    line-height: 1.12;
    margin: 0;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .dm-about__hero-image,
    .dm-about__hero-video {
        transition: none;
    }
}


/* Story */

.dm-about__story {
    display: flex;
    justify-content: center;
    padding-block: clamp(30px, calc(12.39437px + 4.69484vw), 80px);
    padding-inline: 20px;
}

.dm-about__story .dm-about__story-inner {
    align-items: start;
    box-sizing: border-box;
    display: flex;
    gap: var(--dm-about__story-gap, clamp(16px, calc(10.3662px + 1.5023vw), 32px));
    margin: 0;
    max-width: 1170px;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.dm-about__story.dm-about__story--surface-muted { background: #f0f0f0; }

.dm-about__story.dm-about__story--align-start .dm-about__story-inner { align-items: start; }
.dm-about__story.dm-about__story--align-end .dm-about__story-inner { align-items: end; }

.dm-about__story .dm-about__story-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.dm-about__story .dm-about__story-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-block-start: clamp(20px, calc(16.47887px + 0.93897vw), 30px);
}

.dm-about__story .dm-about__story-button {
    align-items: center;
    border-radius:var(--dm-button-radius);
    box-sizing: border-box;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    justify-content: center;
    line-height: 1.4;
    min-height: 40px;
    min-width: 132px;
    padding: 15px 20px;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.dm-about__story .dm-about__story-button--primary,
.dm-about__story .dm-about__story-button--primary:visited {
    background: var(--dm-brand);
    color: #fff;
}

.dm-about__story .dm-about__story-button--secondary,
.dm-about__story .dm-about__story-button--secondary:visited {
    background: #D8ECFD;
    color: var(--dm-brand);
}

.dm-about__story .dm-about__story-button--primary:hover,
.dm-about__story .dm-about__story-button--primary:focus {
    background: var(--dm-brand-hover);
    border-color: var(--dm-brand-hover);
    color: #fff;
}
.dm-about__story .dm-about__story-button--secondary:hover,
.dm-about__story .dm-about__story-button--secondary:focus {
    background: #C2E1FA;
    color: var(--dm-brand);
}
.dm-about__story .dm-about__story-button[data-show-button='false'] { display: none; }

.dm-about__story .dm-about__story-media {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: #ededed;
    border-radius: var(--dm-about__story-media-radius, clamp(5px, calc(3.2394px + .4695vw), 10px));
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

.dm-about__story.dm-about__story--ratio-16-9 .dm-about__story-media { aspect-ratio: 16 / 9; }
.dm-about__story.dm-about__story--ratio-4-3 .dm-about__story-media { aspect-ratio: 4 / 3; }
.dm-about__story.dm-about__story--ratio-1-1 .dm-about__story-media { aspect-ratio: 1; }
.dm-about__story.dm-about__story--ratio-auto .dm-about__story-media { aspect-ratio: auto; min-height: 280px; }
.dm-about__story .dm-about__story-media[data-show-image='false'] { display: none; }

.dm-about__story .dm-about__story-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dm-about__story.dm-about__story--fit-cover .dm-about__story-image { object-fit: cover; }
.dm-about__story.dm-about__story--fit-contain .dm-about__story-image { object-fit: contain; }

.dm-about__story.dm-about__story--stacked .dm-about__story-media,
.dm-about__story.dm-about__story--split .dm-about__story-media { display: none; }

.dm-about__story.dm-about__story--split .dm-about__story-inner {
    align-items: start;
}

.dm-about__story.dm-about__story--split .dm-about__story-text {
    column-gap: var(--dm-about__story-gap, clamp(16px, calc(10.3662px + 1.5023vw), 32px));
    flex-flow: row wrap;
    width: 100%;
}
.dm-about__story.dm-about__story--split .dm-about__story-title {
    flex: 0 0 calc(45% - (var(--dm-about__story-gap, clamp(16px, calc(10.3662px + 1.5023vw), 32px)) / 2));
    margin-block-end: 0;
}
.dm-about__story.dm-about__story--split .dm-about__story-copy {
    flex: 0 0 calc(55% - (var(--dm-about__story-gap, clamp(16px, calc(10.3662px + 1.5023vw), 32px)) / 2));
}
.dm-about__story.dm-about__story--split .dm-about__story-actions {
    flex: 0 0 calc(55% - (var(--dm-about__story-gap, clamp(16px, calc(10.3662px + 1.5023vw), 32px)) / 2));
    margin-left: auto;
}

.dm-about__story.dm-about__story--media-left .dm-about__story-inner { flex-direction: row-reverse; }

.dm-about__story.dm-about__story--text-center { text-align: center; }
.dm-about__story.dm-about__story--text-center .dm-about__story-actions { justify-content: center; }
.dm-about__story.dm-about__story--text-center .dm-about__story-title,
.dm-about__story.dm-about__story--text-center .dm-about__story-copy { margin-inline: auto; }

@media (max-width: 767px) {
    .dm-about__story .dm-about__story-inner,
    .dm-about__story.dm-about__story--media-left .dm-about__story-inner {
        flex-direction: column;
    }
    .dm-about__story .dm-about__story-text,
    .dm-about__story .dm-about__story-media { flex-basis: auto; width: 100%; }
    .dm-about__story.dm-about__story--split .dm-about__story-text { flex-direction: column; }
    .dm-about__story.dm-about__story--split .dm-about__story-title,
    .dm-about__story.dm-about__story--split .dm-about__story-copy,
    .dm-about__story.dm-about__story--split .dm-about__story-actions {
        flex-basis: auto;
        margin-left: 0;
        width: auto;
    }
    .dm-about__story.dm-about__story--split .dm-about__story-title { margin-block-end: clamp(16px, calc(13.1831px + 0.7512vw), 24px); }
    .dm-about__story .dm-about__story-button { width: 100%; }
}


/* Partners */
.dm-about__partners {
    background: #202020;
    box-sizing: border-box;
    color: #fff;
    padding: clamp(32px, calc(9.4648px + 6.0094vw), 96px) 24px;
    width: 100%;
}

.dm-about__partners-inner {
    margin: 0 auto;
    max-width: 1152px;
}

.dm-about__partners-header {
    margin: 0 auto clamp(28px, 3vw, 40px);
    max-width: 900px;
    text-align: center;
}

.dm-about__partners-title {
    color: inherit;
    font-size: clamp(32px, calc(29.1831px + 0.7512vw), 40px);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    max-width: none;
    width: 100%;
}

.dm-about__partners-description {
    color: #ddd;
    font-size: clamp(16px, calc(14.5915px + 0.3756vw), 20px);
    line-height: 1.5;
    margin: 16px 0 0;
}

.dm-about__partners-logos {
    display: grid;
    gap: clamp(12px, 1.5vw, 20px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dm-about__partners-logo {
    align-items: center;
    aspect-ratio: 2 / 1;
    background: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    padding: 0;
}

.dm-about__partners-logo img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .dm-about__partners-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .dm-about__partners-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Certifications */
.dm-about__certifications {
    background: #f5f5f5;
    box-sizing: border-box;
    color: inherit;
    overflow: hidden;
    padding-block: clamp(30px, 5vw, 80px);
    width: 100%;
}

.dm-about__certifications:not(:has(.dm-about__certifications-card)) {
    display: none;
}

.dm-about__certifications .dm-about__certifications-inner {
    margin: 0 auto;
    max-width: 1152px;
    padding-inline: 20px;
}

.dm-about__certifications-header {
    max-width: 720px;
    min-width: 0;
    margin-block-end: 24px;
}

.dm-about__certifications-eyebrow {
    align-items: center;
    color: #888888;
    display: flex;
    font-size: clamp(12px, calc(11.2958px + .1878vw), 14px);
    gap: 7px;
    letter-spacing: .04em;
    line-height: 1.4;
    margin: 0;
    margin-block-end: clamp(8px, calc(5.1831px + .7512vw), 16px);
    text-transform: uppercase;
}

.dm-about__certifications-eyebrow::before {
    background: var(--dm-brand);
    content: '';
    flex: 0 0 12px;
    height: 2px;
}

.dm-about__certifications-title {
    color: inherit;
    font-size: clamp(28px, calc(23.7746px + 1.1268vw), 40px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.08;
    margin: 0;
    margin-block-end: clamp(16px, calc(13.1831px + 0.7512vw), 24px);
}

.dm-about__certifications-description {
    color: inherit;
    font-size: clamp(16px, calc(14.5915px + .3756vw), 20px);
    line-height: 1.55;
    margin: 0;
}

.dm-about__certifications .dm-about__carousel {
    overflow: visible;
    padding-block: 0;
}

.dm-about__slider--certifications .dm-about__carousel-card {
    background: transparent;
    border-radius: 0;
    color: inherit !important;
    display: block;
    flex: 0 0 min(275px, calc(100vw - 48px));
    height: auto;
    overflow: visible;
}

.dm-about__slider--certifications .dm-about__carousel-controls {
    margin-top: 26px;
}

.dm-about__certifications-card {
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
}

.dm-about__certifications-media {
    align-items: center;
    aspect-ratio: 3 / 4;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: clamp(16px, 2.2vw, 24px);
    position: relative;
}

.dm-about__certifications-media::after {
    border: 1px solid rgba(32, 35, 39, .12);
    content: '';
    inset: clamp(16px, 2.2vw, 24px);
    pointer-events: none;
    position: absolute;
}

.dm-about__certifications-image {
    background: transparent;
    box-shadow: none;
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.dm-about__certifications-card-body {
    align-items: flex-start;
    display: block;
    margin-block-start: 24px;
}

.dm-about__certifications-card-title {
    color: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    text-align: center;
}

.dm-about__certifications-card-title-link,
.dm-about__certifications-card-title-link:visited {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    text-decoration: none;
}

.dm-about__certifications-card-title-link::before {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGZpbGw9IiNkNTAwMzIiIGQ9Ik0zLjc1IDE1YTIuNSAyLjUgMCAwIDEgMCA1SDIuNXYxLjI1YS43NS43NSAwIDAgMS0xLjUgMHYtNS41YS43NS43NSAwIDAgMSAuNzUtLjc1ek0yLjUgMTguNWgxLjI1YTEgMSAwIDEgMCAwLTJIMi41ek05LjI1IDE1QTIuNzUgMi43NSAwIDAgMSAxMiAxNy43NXYxLjVBMi43NSAyLjc1IDAgMCAxIDkuMjUgMjJoLTEuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXYtNS41YS43NS43NSAwIDAgMSAuNzUtLjc1em0tLjc1IDUuNWguNzVjLjY5IDAgMS4yNS0uNTYgMS4yNS0xLjI1di0xLjVjMC0uNjktLjU2LTEuMjUtMS4yNS0xLjI1SDguNXptOC4yNS01LjVhLjc1Ljc1IDAgMCAxIDAgMS41SDE0LjVWMThoMS43NWEuNzUuNzUgMCAwIDEgMCAxLjVIMTQuNXYxLjc1YS43NS43NSAwIDAgMS0xLjUgMHYtNS41YS43NS43NSAwIDAgMSAuNzUtLjc1ek0xMiA4YTIgMiAwIDAgMCAyIDJoNnYxMGEyIDIgMCAwIDEtMiAyaC0yLjY3YTEuNzQgMS43NCAwIDAgMCAuMTctLjc1di0uNzVoLjc1YTEuNzUgMS43NSAwIDAgMCAxLjEwMi0zLjExQTEuNzQ4IDEuNzQ4IDAgMCAwIDE2Ljc1IDE0aC0zYTEuNzUgMS43NSAwIDAgMC0xLjY4NCAxLjI3NUEzLjc0IDMuNzQgMCAwIDAgOS4yNSAxNGgtMS41Yy0uNjkgMC0xLjI4Ny40MDEtMS41NzEuOTgyQTMuNSAzLjUgMCAwIDAgNCAxNC4wMVY0YTIgMiAwIDAgMSAyLTJoNnptNy41LjVIMTRhLjUuNSAwIDAgMS0uNS0uNVYyLjV6Ii8+PC9zdmc+") center / contain no-repeat;
    content: '';
    flex: 0 0 20px;
    height: 22px;
    width: 20px;
}

.dm-about__certifications-card-title-link:hover,
.dm-about__certifications-card-title-link:focus-visible {
    color: var(--dm-brand);
}

/* Carousel */
.dm-about__carousel { overflow: hidden; padding-block: clamp(30px, 6vw, 80px); }
.dm-about__carousel-track { --industry-gutter: max(24px, calc((100vw - 1170px) / 2)); display: flex; gap: 20px; margin-inline: calc(50% - 50vw); overflow-x: auto; padding-block: 20px; padding-inline: var(--industry-gutter); scroll-behavior: smooth; scroll-padding-inline: var(--industry-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; }
.dm-about__carousel-track::-webkit-scrollbar { display: none; }
.dm-about__carousel-card { background-color: #0078d2; background-image: linear-gradient(0deg, rgba(0, 83, 150, .93), transparent 55%); background-repeat: no-repeat; border-radius: 9px; color: #fff !important; display: flex; flex: 0 0 clamp(300px, calc(280px + 7.6vw), 450px); height: clamp(282px, 14vw, 300px); overflow: hidden; position: relative; scroll-snap-align: start; text-decoration: none !important; }
.dm-about__carousel-card:last-child { scroll-snap-align: end; }
.dm-about__carousel-card:has(> img) { background-image: none; }
.dm-about__carousel-card:has(> img)::before { background: linear-gradient(0deg, rgba(0, 83, 150, .93), transparent 55%); content: ''; inset: 0; position: absolute; z-index: 1; }
.dm-about__carousel-card > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.dm-about__carousel-controls { align-items: center; display: flex; justify-content: center; margin-top: 35px; position: relative; }
.dm-about__carousel-controls[hidden] { display: none; }
.dm-about__carousel-dots { display: flex; gap: 8px; }
.dm-about__carousel-dots button { align-items: center; background: transparent; border: 0; cursor: pointer; display: inline-flex; flex: none; height: 24px; justify-content: center; min-height: 24px; padding: 0; width: auto; }
.dm-about__carousel-dots button::before { background: #d6dee8; border-radius: 10px; content: ''; display: block; height: 8px; transition: width .42s cubic-bezier(.22, 1, .36, 1), background-color .25s ease; width: 8px; }
.dm-about__carousel-dots button[aria-current="true"]::before { background: #0878cb; width: 20px; }
.dm-about__carousel-dots button:focus-visible { outline: 2px solid #0878cb; outline-offset: 4px; }
.dm-about__carousel-arrows { display: flex; gap: 11px; position: absolute; right: 0; }
.dm-about__carousel .dm-about__carousel-arrows button { align-items: center; background: #fff; border: 1px solid #e4eaf0; border-radius: 50%; color: #252d36; cursor: pointer; display: inline-flex; height: 42px; justify-content: center; min-height: 42px; padding: 0; width: 42px; }
.dm-about__carousel-arrows button::before { border-right: 2px solid currentColor; border-top: 2px solid currentColor; content: ''; display: block; height: 8px; width: 8px; }
.dm-about__carousel-arrows button:first-child::before { transform: rotate(-135deg); }
.dm-about__carousel-arrows button:last-child::before { transform: rotate(45deg); }
.dm-about__carousel-arrows button:hover:not(:disabled) { background: #0078d2; border-color: #0078d2; color: #fff; }
.dm-about__carousel-arrows button:focus-visible { outline: 2px solid #0878cb; outline-offset: 2px; }
.dm-about__carousel-arrows button:disabled { color: #aab2bb; cursor: default; }


.dm-about__story-title { margin: 0; }
.dm-about__story-copy { margin: 10px 0 0; }
.dm-about__story-copy > :first-child { margin-block-start: 0; }
.dm-about__story-copy > :last-child { margin-block-end: 0; }

@media (max-width: 900px) { .dm-about__carousel-card { flex-basis: calc((min(1170px, 100vw - 48px) - 20px) / 2); } }
@media (max-width: 799px) { .dm-about__carousel .dm-about__carousel-arrows { display: none; } }
@media (max-width: 640px) { .dm-about__carousel-card { flex-basis: 84%; } .dm-about__carousel-track { --industry-gutter: 18px; } .dm-about__carousel-dots { gap: 5px; } .dm-about__carousel-dots button::before { height: 7px; width: 7px; } .dm-about__carousel-dots button[aria-current="true"]::before { width: 20px; } }