h1,
h2 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink)
}
.inner-page {
    background: var(--paper)
}

.inner-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40
}

.mind-hero {
    overflow: hidden;
    background: var(--green-900);
    color: #d4e8da
}

.mind-hero .page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
    min-height: 560px;
    gap: clamp(32px, 5vw, 80px);
    align-items: stretch
}

.mind-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 72px
}

.mind-hero h1 {
    max-width: 760px;
    margin: 24px 0 0;
    color: var(--paper);
    font-size: clamp(3.1rem, 5.5vw, 5.7rem);
    line-height: 1.05
}

.mind-hero .eyebrow {
    color: var(--green-300)
}

.mind-hero__content > p:last-child {
    max-width: 530px;
    margin: 28px 0 0;
    color: #d4e8da;
    font-size: 18px;
    line-height: 1.75
}

.mind-hero__visual {
    position: relative;
    min-height: 560px;
    margin: 0;
    overflow: hidden;
    background: var(--green-800)
}

.mind-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mind-section {
    padding: 104px 0;
    border-bottom: 1px solid var(--line)
}

.mind-section--soft {
    background: var(--mint)
}

.mind-section--dark {
    background: var(--green-900);
    color: #d4e8da
}

.mind-section--dark h2,
.mind-section--dark h3 {
    color: var(--paper)
}

.mind-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
    gap: 56px;
    align-items: end;
    margin-bottom: 56px
}

.mind-section__head h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.4rem, 4.8vw, 5rem);
    line-height: 1.02
}

.mind-section__head p {
    max-width: 500px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8
}

.mind-section--dark .mind-section__head p {
    color: #d4e8da
}

.mind-section__image {
    height: clamp(280px, 31vw, 440px);
    margin: 0 0 56px;
    overflow: hidden
}

.mind-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mind-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: clamp(48px, 8vw, 132px);
    align-items: start
}

.mind-copy p {
    max-width: 760px;
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.85
}

.mind-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.mind-stats div {
    min-height: 142px;
    padding: 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.mind-stats strong {
    display: block;
    color: var(--green-800);
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 300;
    line-height: 1
}

.mind-stats span {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5
}

.mind-rows {
    border-top: 1px solid var(--line)
}

.mind-row {
    display: grid;
    grid-template-columns: 70px minmax(190px, .75fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--line)
}

.mind-section--dark .mind-row {
    border-color: rgba(212, 232, 218, .22)
}

.mind-row__number {
    color: var(--green-500);
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 300;
    line-height: 1
}

.mind-row h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15
}

.mind-section--dark .mind-row h3 {
    color: var(--paper)
}

.mind-row p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75
}

.mind-section--dark .mind-row p {
    color: #d4e8da
}

.mind-row ul,
.mind-list,
.mind-checks,
.mind-docs,
.mind-points {
    display: grid;
    gap: 8px 28px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none
}

.mind-row ul {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.mind-row li,
.mind-list li,
.mind-checks li,
.mind-docs li,
.mind-points li {
    position: relative;
    padding-left: 17px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55
}

.mind-row li:before,
.mind-list li:before,
.mind-checks li:before,
.mind-docs li:before,
.mind-points li:before {
    position: absolute;
    top: .7em;
    left: 0;
    width: 7px;
    height: 1px;
    background: var(--green-500);
    content: ""
}

.mind-section--dark .mind-row li,
.mind-section--dark .mind-list li,
.mind-section--dark .mind-checks li,
.mind-section--dark .mind-docs li,
.mind-section--dark .mind-points li {
    color: #d4e8da
}

.mind-manufacturing {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 56px;
    align-items: start
}

.mind-subtitle {
    margin: 0 0 24px;
    color: var(--green-500);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase
}

.mind-process {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid rgba(212, 232, 218, .35)
}

.mind-process li {
    position: relative;
    min-height: 61px;
    padding: 18px 20px 18px 28px;
    border-bottom: 1px solid rgba(212, 232, 218, .2);
    color: var(--paper);
    font-family: var(--serif);
    font-size: 21px
}

.mind-process li:before {
    position: absolute;
    top: 27px;
    left: -4px;
    width: 7px;
    height: 7px;
    background: var(--green-300);
    content: ""
}

.mind-equipment {
    background: rgba(240, 247, 242, .08);
    border-top: 1px solid rgba(212, 232, 218, .3)
}

.mind-equipment li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(212, 232, 218, .2);
    list-style: none
}

.mind-equipment li > strong {
    color: var(--green-300);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 300
}

.mind-equipment b {
    display: block;
    margin-bottom: 5px;
    color: var(--paper);
    font-size: 16px;
    font-weight: 500
}

.mind-equipment span {
    display: block;
    color: #d4e8da;
    font-size: 15px;
    line-height: 1.6
}

.mind-quality {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
    gap: 56px;
    align-items: start
}

.mind-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.mind-list li {
    padding-top: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.mind-list li:before {
    top: 11px
}

.mind-quality__control {
    padding: 32px;
    background: var(--green-800);
    color: #d4e8da
}

.mind-quality__control h3 {
    margin: 0 0 20px;
    color: var(--paper);
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 300
}

.mind-checks {
    margin: 0
}

.mind-checks li {
    color: #d4e8da
}

.mind-checks li:before {
    background: var(--green-300)
}

.mind-certification {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
    gap: 56px;
    align-items: center;
    padding: 48px;
    background: var(--mint);
    border-left: 6px solid var(--green-500)
}

.mind-certification h3 {
    margin: 0 0 18px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400
}

.mind-certification p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75
}

.mind-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0
}

.mind-docs li {
    color: var(--ink);
    font-weight: 500
}

.application-feature {
    margin-bottom: 64px
}



.application-feature__copy h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 4.6vw, 3rem);
    line-height: 1.2
}

.application-feature__copy p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8
}

.application-map {
    border-top: 1px solid var(--line)
}

.application-map__row {
    display: grid;
    grid-template-columns: 100px minmax(170px, .9fr) minmax(170px, 1fr) minmax(170px, 1fr);
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: start
}

.application-map__row .application-map__icon img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.application-map__row h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1
}

.application-map__row p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6
}

.application-map__row p + p {
    margin-top: 7px
}

.application-map__label {
    display: block;
    margin-bottom: 10px;
    color: var(--green-500);
    font-size: .875rem;
    letter-spacing: 1.3px;
    text-transform: uppercase
}

.application-map__products {
    color: var(--green-800) !important;
    font-weight: 500
}

.mind-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
    gap: 56px;
    align-items: end;
    padding: 56px;
    background: var(--green-800);
    color: #d4e8da
}

.mind-cta h2 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--paper);
    font-size: clamp(1.5rem, 4.5vw, 3rem);
    line-height: 1.2
}

.mind-cta p {
    max-width: 620px;
    margin: 0;
    color: #d4e8da;
    font-size: 17px;
    line-height: 1.75
}

.mind-cta a {
    justify-self: end;
    background: var(--green-300);
    color: var(--green-900)
}

.mind-cta a:hover {
    background: var(--paper);
    color: var(--green-900)
}

.oem-stages {
    border-top: 1px solid var(--line)
}

.oem-stages__image {
    height: clamp(280px, 32vw, 430px);
    margin: 32px 0;
    overflow: hidden
}

.oem-stages__image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oem-stage {
    display: grid;
    grid-template-columns: 70px minmax(200px, .75fr) minmax(0, 1.5fr);
    gap: 24px;
    padding: 36px 0;
    border-bottom: 1px solid var(--line)
}

.oem-stage__number {
    color: var(--green-500);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 300
}

.oem-stage h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1
}

.oem-stage p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75
}

.oem-stage .mind-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px
}

.oem-stage .mind-points li {
    color: var(--muted)
}

.oem-test-path {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: sample-step
}

.oem-test-path li {
    min-height: 88px;
    padding: 14px;
    border-top: 2px solid var(--green-500);
    background: var(--mint);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.4;
    counter-increment: sample-step
}

.oem-test-path li::before {
    display: block;
    margin-bottom: 8px;
    color: var(--green-500);
    content: counter(sample-step, decimal-leading-zero)
}

@media (max-width: 991.98px) {
    .mind-hero .page-shell,
    .mind-section__head,
    .mind-profile,
    .mind-manufacturing,
    .mind-quality,
    .mind-certification,
    .mind-cta {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .mind-hero .page-shell {
        min-height: 0;
        gap: 0
    }

    .mind-hero__content {
        padding-block: 64px
    }

    .mind-hero__visual {
        min-height: 400px
    }

    .application-map__row {
        grid-template-columns: 180px minmax(0, 1fr)
    }

    .mind-row,
    .oem-stage {
        grid-template-columns: 60px minmax(190px, .8fr) minmax(0, 1.2fr)
    }

    .oem-test-path {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .mind-cta a {
        justify-self: start
    }
}

@media (max-width: 767.98px) {
    .mind-section {
        padding: 80px 0
    }

    .mind-hero h1 {
        font-size: clamp(2.9rem, 10vw, 4.3rem)
    }

    .mind-hero__content {
        padding-block: 56px
    }

    .mind-hero__content > p:last-child {
        margin-top: 22px;
        font-size: 16px
    }

    .mind-hero__visual {
        min-height: 270px
    }

    .mind-row,
    .oem-stage{
        grid-template-columns: 1fr;
        gap: 12px
    }

    .oem-test-path {
        grid-template-columns: 1fr 1fr
    }

    .mind-row__number,
    .oem-stage__number {
        font-size: 26px
    }

    .mind-row ul,
    .mind-list,
    .mind-docs,
    .oem-stage .mind-points {
        grid-template-columns: 1fr
    }

    .mind-stats {
        grid-template-columns: 1fr 1fr
    }

    .mind-certification,
    .mind-cta {
        padding: 32px 24px
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important
    }
}

.about-section {
    padding: 88px 0;
    scroll-margin-top: 80px
}

.about-section--soft {
    background: var(--mint)
}

.about-profile,
.about-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 80px);
    align-items: start
}

.about-profile__images {
    display: grid;
    gap: 16px
}

.about-profile__images img {
    display: block;
    width: 100%;
    object-fit: cover
}


.about-profile__media .mind-stats {
    margin-top: 24px
}

.about-profile__media .mind-stats div {
    min-height: 118px
}

.about-profile__copy .eyebrow {
    margin: 0 0 20px;
    color: var(--green-500);
    font-size: 14px;
    line-height: 1.5
}

.about-profile h1,
.about-section h2 {
    margin: 0 0 28px;
    font-size: clamp(2.6rem, 4.2vw, 4.3rem);
    line-height: 1.08
}

.about-section .mind-copy > p {
    font-size: 17px;
    line-height: 1.8
}

.about-section .mind-copy > p:last-child {
    margin-bottom: 0
}

.about-split {
    align-items: center
}

.about-split__visual {
    margin: 0
}

.about-split__visual img {
    display: block;
    width: 100%;
    object-fit: cover
}

.about-split__visual--laboratory img {
    aspect-ratio: 4 / 3
}

.about-split__visual figcaption {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px
}

.about-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 64px;
    margin-top: 56px
}

.about-capabilities__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: start;
    gap: 12px 16px;
    padding-top: 24px;
    border-top: 1px solid #c6dacb
}

.about-capabilities__item > span {
    color: var(--green-500);
    font-size: 18px
}

.about-capabilities__item h3,
.about-quality__tests h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2
}

.about-capabilities__item p,
.about-capabilities__item ul {
    grid-column: 2
}

.about-capabilities__item p,
.about-capabilities__item ul,
.about-equipment__card p,
.about-quality__tests p,
.about-quality__tests ul {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7
}

.about-capabilities__item ul,
.about-quality__tests ul {
    padding-left: 20px
}

.about-heading {
    margin-bottom: 40px
}

.about-heading p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8
}

.about-manufacturing__image {
    margin: 0 0 40px
}

.about-manufacturing__image img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center 55%
}

.about-manufacturing,
.about-quality {
    display: grid;
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
    gap: 40px;
    align-items: start
}

.about-manufacturing h3,
.about-quality__control h3 {
    margin: 0 0 24px;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400
}

.about-manufacturing__process,
.about-quality__control {
    padding: 32px;
    background: var(--green-800);
    color: var(--paper)
}

.about-manufacturing__process h3,
.about-quality__control h3 {
    color: var(--paper)
}

.about-flow {
    margin: 0;
    padding: 0;
    list-style: none
}

.about-flow li {
    font-size: 17px;
    line-height: 1.5
}

.about-flow span {
    display: block;
    padding: 8px 0;
    color: #a2d1b0;
    font-size: 24px;
    line-height: 1
}

.about-equipment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

.about-equipment__card {
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--mint)
}

.about-equipment__card:last-child {
    grid-column: 1 / -1
}

.about-equipment__card h4 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2
}

.about-quality {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 56px
}

.about-quality__tests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px
}

.about-quality__tests article {
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.about-quality__tests article:last-child {
    grid-column: 1 / -1
}

.about-quality__tests h3 {
    margin-bottom: 14px
}

.about-quality__control .about-flow span {
    padding-block: 16px
}

.about-split__visual--certifications img {
    aspect-ratio: 1.8;
    object-position: 80% center
}

.about-split--certifications h2 {
    font-size: clamp(2.4rem, 3.5vw, 3.8rem)
}

.about-documents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 0 0 24px;
    padding-left: 20px;
    color: var(--green-800);
    font-size: 16px;
    line-height: 1.6
}

@media (max-width: 991.98px) {
    .about-page .site-header__menu {
        transform: none;
        opacity: 0;
        transition: opacity .2s ease, visibility .2s ease
    }

    .about-page .site-header__menu.is-open {
        opacity: 1
    }

    .about-profile,
    .about-split,
    .about-manufacturing,
    .about-quality {
        grid-template-columns: 1fr
    }

    .about-profile__media {
        max-width: 720px
    }

    .about-profile__copy {
        grid-row: 1
    }

    .about-profile__images {
        grid-template-columns: 1.5fr 1fr
    }

    .about-profile__images img{
        height: 100%;
        aspect-ratio: 1.5
    }

    .about-profile__media .mind-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .about-profile__media .mind-stats div {
        padding: 20px
    }

    .about-profile__media .mind-stats strong {
        font-size: 32px
    }

    .about-capabilities {
        gap: 32px
    }
}

@media (max-width: 767.98px) {
    .about-section {
        padding: 60px 0
    }

    .about-page .site-footer__main {
        --bs-gutter-x: 40px
    }

    .about-profile,
    .about-split,
    .about-quality {
        gap: 32px
    }

    .about-capabilities,
    .about-equipment,
    .about-quality__tests,
    .about-documents {
        grid-template-columns: 1fr
    }

    .about-profile__media .mind-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .about-profile__images {
        grid-template-columns: 1fr
    }

    .about-profile__images img {
        aspect-ratio: 1.6
    }

    .about-capabilities {
        margin-top: 40px
    }

    .about-manufacturing__process,
    .about-quality__control,
    .about-equipment__card {
        padding: 24px
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page .site-header__menu {
        transition: none
    }
}
