/**
 * Homepage section styles.
 *
 * Plain CSS, loaded alongside the compiled theme stylesheet, following the
 * same pattern as assets/extrusions/ and assets/domestic-manufacturing/.
 * Written this way so the sections render without a Tailwind rebuild, and so
 * every selector below is scoped to its own section wrapper and cannot reach
 * any other template.
 */

/* ---------------------------------------------------------------- shared */

.ss-section-rule {
    display: block;
    width: 46px;
    height: 3px;
    background: #cf0005;
    border: 0;
    margin: 16px 0 0;
}

.ss-section-cta {
    margin-top: 40px;
}

.ss-section-cta--center {
    text-align: center;
}

.ss-components,
.ss-dfm,
.ss-proof,
.ss-case-studies,
.ss-quality,
.ss-rfq {
    color: #fff;
    font-size: 1rem;
}

.ss-components p,
.ss-dfm p,
.ss-proof p,
.ss-case-studies p,
.ss-quality p,
.ss-rfq__intro-body p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    line-height: 1.778;
}

/* Proof and the case studies are title case in the design. */
.ss-components h2,
.ss-dfm h2,
.ss-quality h2,
.ss-rfq h2 {
    text-transform: uppercase;
}

/* Lato card headings (the base h3 is Barlow Condensed). */
.ss-components__item h3,
.ss-dfm__card h3,
.ss-dfm .ss-dfm__subtitle,
.ss-proof__stats-title,
.ss-proof__stat-value,
.ss-quality__card h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

/* ------------------------------------------- Components We Manufacture */

.ss-components {
    margin-top: 48px;
    margin-bottom: 48px;
}

.ss-components__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 48px;
}

.ss-components__intro-text {
    flex: 1 1 420px;
    min-width: 0;
}

.ss-components__intro-text h2 {
    margin: 0;
}

.ss-components__intro-text p:last-child {
    margin-bottom: 0;
}

.ss-components__intro-text .ss-section-rule {
    margin: 24px 0;
}

.ss-components__media {
    flex: 1 1 420px;
    min-width: 0;
    margin: 0;
    border-bottom: 7px solid #cf0005;
    line-height: 0;
}

.ss-components__media img {
    width: 100%;
    height: auto;
    display: block;
}

.ss-components__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px 32px;
}

.ss-components__item {
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
}

.ss-components__number {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.231;
    color: #454545;
}

.ss-components__item .ss-section-rule {
    margin: 20px 0 28px;
}

.ss-components__item h3 {
    font-size: 1.5rem;
    line-height: 1.067;
    margin: 0 0 20px;
}

.ss-components__item p {
    margin: 0;
}

/* -------------------------------------- Design for Manufacturability */

.ss-dfm {
    background: rgba(255, 255, 255, 0.03);
    padding: 56px 0;
    margin: 48px 0;
}

.ss-dfm h2 {
    margin: 0;
}

.ss-dfm .ss-dfm__subtitle {
    font-size: 1.5rem;
    line-height: 1.156;
    letter-spacing: 1px;
    color: #fff;
    margin: 8px 0 32px;
}

.ss-dfm__split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 52px;
    margin: 40px 0;
}

.ss-dfm__video {
    flex: 1 1 420px;
    min-width: 0;
}

.ss-dfm__aside {
    flex: 1 1 360px;
    min-width: 0;
}

.ss-dfm__aside h3 {
    font-size: 2.25rem;
    line-height: 1.167;
    margin: 0 0 24px;
}

.ss-dfm__aside p {
    margin: 0;
}

.ss-dfm__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 64px;
}

.ss-dfm__card {
    border-left: 4px solid #cf0005;
    padding-left: 28px;
}

.ss-dfm__card h3 {
    font-size: 1.5rem;
    line-height: 1.156;
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.ss-dfm__card p {
    margin: 0;
    max-width: 434px;
}

/* --------------------------------------------- video thumbnail + play */

.ss-video-thumb {
    position: relative;
    display: block;
    margin: 0;
    line-height: 0;
    background: #000;
}

.ss-video-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.ss-video-thumb__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #cf0005;
    display: grid;
    place-items: center;
    transition: background 0.3s ease-in-out;
}

.ss-video-thumb:hover .ss-video-thumb__play {
    background: #c90008;
}

.ss-video-thumb__play svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

.ss-case-studies .ss-video-thumb__play {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: 46px;
    height: 46px;
}

.ss-case-studies .ss-video-thumb__play svg {
    width: 17px;
    height: 17px;
}

.ss-case-studies .ss-video-thumb img {
    height: 255px;
    object-fit: cover;
}

/* ----------------------------------------------- Proof / Built to Last */

.ss-proof {
    margin-top: 48px;
    margin-bottom: 48px;
}

.ss-proof__title {
    text-align: center;
    margin-bottom: 40px;
}

.ss-proof__stats-title {
    font-size: 1.5rem;
    line-height: 1.156;
    letter-spacing: 1px;
    margin: 0 0 32px;
}

.ss-proof__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.ss-proof__stat {
    background: rgba(255, 255, 255, 0.02);
    border-top: 6px solid #cf0005;
    padding: 40px 20px;
}

.ss-proof__stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.156;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.ss-proof__stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    line-height: 1.778;
}

.ss-proof__panel {
    background: rgba(255, 255, 255, 0.02);
    padding: 32px;
    margin-top: 32px;
}

.ss-proof__panel h3 {
    font-size: 2.25rem;
    line-height: 1.167;
    text-transform: uppercase;
    margin: 0;
}

.ss-proof__panel-body {
    margin-top: 24px;
}

.ss-proof__panel-body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------ Manufacturing Solutions in Action */

.ss-case-studies {
    margin-top: 48px;
    margin-bottom: 48px;
}

.ss-case-studies__head {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 40px;
}

.ss-case-studies__head h2 {
    flex: 1 1 320px;
    margin: 0;
}

.ss-case-studies__head-text {
    flex: 1 1 420px;
}

.ss-case-studies__head-text p:last-child {
    margin-bottom: 0;
}

.ss-case-studies__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 32px;
}

.ss-case-studies__card {
    display: flex;
    flex-direction: column;
}

.ss-case-studies__card h3 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 0.95;
    margin: 16px 0;
}

.ss-case-studies__subtitle {
    display: block;
    font-size: 1.25rem;
    line-height: 1.333;
    margin-bottom: 24px;
}

.ss-case-studies__link {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 8px;
    color: #cf0005;
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ss-case-studies__link:hover,
.ss-case-studies__link:focus {
    color: #fff;
}

/* ------------------------------------------------------- Quality cards */

.ss-quality {
    margin-top: 48px;
    margin-bottom: 48px;
}

.ss-quality__head {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 40px;
    margin-bottom: 40px;
}

.ss-quality__head h2 {
    flex: 1 1 320px;
    margin: 0;
}

.ss-quality__head-text {
    flex: 1 1 420px;
}

.ss-quality__head-text p:last-child {
    margin-bottom: 0;
}

.ss-quality__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.ss-quality__card {
    background: rgba(255, 255, 255, 0.02);
    border-top: 5px solid #cf0005;
    padding: 28px 24px;
}

.ss-quality__card h3 {
    font-size: 1.5rem;
    line-height: 1.423;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
}

.ss-quality__card h3 a {
    color: inherit;
    text-decoration: none;
}

.ss-quality__card h3 a:hover,
.ss-quality__card h3 a:focus {
    color: #cf0005;
}

.ss-quality__card p {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.455;
    letter-spacing: -0.5px;
}

/* ------------------------------------------------------- Final RFQ form */

.ss-rfq {
    background: rgba(245, 245, 245, 0.05);
    padding: 56px 0;
    margin: 48px 0 0;
    scroll-margin-top: 120px;
}

.ss-rfq__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.ss-rfq__intro {
    flex: 1 1 360px;
    min-width: 0;
}

.ss-rfq__intro h2 {
    margin: 0;
}

.ss-rfq__intro-body {
    margin-top: 28px;
}

.ss-rfq__intro-body p:last-child {
    margin-bottom: 0;
}

.ss-rfq__form {
    flex: 1 1 480px;
    min-width: 0;
}

/* ------------------------------------------------------- breakpoints */

@media (min-width: 640px) {
    .ss-components__grid,
    .ss-proof__stats,
    .ss-quality__grid,
    .ss-dfm__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-case-studies__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ss-components,
    .ss-proof,
    .ss-case-studies,
    .ss-quality {
        margin-top: 64px;
        margin-bottom: 64px;
    }

    .ss-dfm {
        margin: 64px 0;
        padding: 72px 0;
    }

    .ss-components__intro {
        flex-wrap: nowrap;
        gap: 64px;
        margin-bottom: 56px;
    }

    .ss-components__intro-text {
        flex: 0 1 650px;
    }

    .ss-components__media {
        flex: 0 1 567px;
        margin-left: auto;
    }

    .ss-components__grid,
    .ss-case-studies__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ss-proof__stats,
    .ss-quality__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ss-components .ss-section-cta {
        margin-top: 64px;
    }

    .ss-dfm__split {
        flex-wrap: nowrap;
    }

    .ss-dfm__video {
        flex: 0 0 52%;
    }

    .ss-dfm__cards {
        column-gap: 160px;
    }

    .ss-proof__title {
        margin-bottom: 56px;
    }

    .ss-proof__panel {
        padding: 40px;
    }

    .ss-case-studies__head {
        flex-wrap: nowrap;
        gap: 40px;
    }

    .ss-case-studies__head h2 {
        flex: 0 0 calc(47.5% - 40px);
    }

    .ss-quality__head {
        flex-wrap: nowrap;
    }

    .ss-quality__head h2 {
        flex: 0 0 35%;
    }

    .ss-rfq {
        padding: 72px 0;
    }
}

/* Desktop type sizes from the design (1440 frame). */
@media (min-width: 1280px) {
    .ss-components__intro-text h2 {
        font-size: 4.5rem;
        line-height: 1.056;
    }

    .ss-components__intro-text .ss-section-rule {
        margin: 40px 0;
    }

    .ss-components__item {
        min-height: 340px;
    }

    .ss-components__item h3 {
        font-size: 1.875rem;
    }

    .ss-section-cta .btn {
        font-size: 1.8125rem;
        padding: 1.5rem 2.875rem;
    }

    .ss-dfm .ss-dfm__subtitle,
    .ss-dfm__card h3,
    .ss-proof__stats-title,
    .ss-proof__stat-value {
        font-size: 2rem;
    }

    .ss-dfm__aside h3,
    .ss-proof__panel h3 {
        font-size: 3rem;
    }

    .ss-proof__stat {
        min-height: 242px;
        padding: 56px 20px 32px;
    }

    .ss-case-studies__card h3 {
        font-size: 2.5rem;
    }

    .ss-case-studies__subtitle {
        font-size: 1.5rem;
    }

    .ss-case-studies__link {
        font-size: 1.375rem;
    }

    .ss-quality__card {
        min-height: 363px;
        padding: 46px 29px 32px;
    }

    .ss-quality__card h3 {
        font-size: 1.625rem;
        letter-spacing: -1px;
    }

    .ss-quality__card p {
        font-size: 1.375rem;
        letter-spacing: -1px;
    }
}