css
/*
 * =========================================================================
 * TEMPERWORKS — E-RECYCLING & TECHNOLOGY RECOVERY
 * =========================================================================
 *
 * Page-specific styles.
 *
 * Uses the authoritative TemperWorks brand variables from variables.css.
 *
 * Brand usage:
 *
 *   GOLD  = TemperWorks identity / value / recovery
 *   BLUE  = technology / technical work / workforce
 *   GREEN = reuse / sustainability / responsible recovery
 *
 * Scoped to:
 *
 *     .tw-erecycling-page
 *
 * =========================================================================
 */


/* =========================================================================
 * PAGE FOUNDATION
 * ========================================================================= */

.tw-erecycling-page {

    color: var(--text-primary);
    background: var(--bg-primary);

}


/*
 * Explicit typography protection.
 *
 * This prevents global theme styles from turning page text dark.
 */

.tw-erecycling-page h1,
.tw-erecycling-page h2,
.tw-erecycling-page h3,
.tw-erecycling-page h4,
.tw-erecycling-page h5,
.tw-erecycling-page h6 {

    color: var(--text-primary);

}


.tw-erecycling-page p,
.tw-erecycling-page li {

    color: var(--text-secondary);

}


.tw-erecycling-page strong {

    color: var(--text-primary);

}


.tw-erecycling-page a {

    color: var(--accent-blue);

}


.tw-erecycling-page a:hover {

    color: var(--accent-gold);

}


/* =========================================================================
 * CONTAINER
 * ========================================================================= */

.tw-erecycling-container {

    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;

}


/* =========================================================================
 * EYEBROW
 * ========================================================================= */

.tw-erecycling-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--accent-gold) !important;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

}


/* =========================================================================
 * HERO
 * ========================================================================= */

.tw-erecycling-hero {

    position: relative;

    padding: 110px 0 100px;

    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(77, 163, 255, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 68% 80%,
            rgba(61, 220, 151, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--bg-primary) 0%,
            var(--bg-panel) 100%
        );

    border-bottom: 1px solid rgba(77, 163, 255, 0.18);

}


.tw-erecycling-hero-content {

    max-width: 850px;

}


.tw-erecycling-hero h1 {

    margin: 0 0 28px;

    color: var(--text-primary) !important;

    font-size: clamp(2.8rem, 6vw, 5.2rem);

    line-height: 1.02;

    letter-spacing: -0.035em;

}


.tw-erecycling-hero-lead {

    max-width: 760px;

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: clamp(1.05rem, 2vw, 1.35rem);

    line-height: 1.75;

}


/* =========================================================================
 * HERO ACCENT
 * ========================================================================= */

.tw-erecycling-hero h1::after {

    content: "";

    display: block;

    width: 90px;

    height: 3px;

    margin-top: 28px;

    background:
        linear-gradient(
            90deg,
            var(--accent-gold),
            var(--accent-blue),
            var(--success)
        );

    border-radius: 2px;

}


/* =========================================================================
 * BUTTONS
 * ========================================================================= */

.tw-erecycling-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;

}


.tw-erecycling-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 22px;

    border: 1px solid rgba(77, 163, 255, 0.45);

    border-radius: 6px;

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-button-primary {

    color: #101010 !important;

    background: var(--accent-gold);

    border-color: var(--accent-gold);

}


.tw-erecycling-button-primary:hover {

    color: #101010 !important;

    background: #e2c36e;

    border-color: #e2c36e;

}


.tw-erecycling-button-secondary {

    color: var(--text-primary) !important;

    background: transparent;

    border-color: rgba(77, 163, 255, 0.55);

}


.tw-erecycling-button-secondary:hover {

    color: #ffffff !important;

    background: rgba(77, 163, 255, 0.10);

    border-color: var(--accent-blue);

}


.tw-erecycling-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(77, 163, 255, 0.08);

}


.tw-erecycling-button:focus-visible {

    outline: 2px solid var(--accent-gold);

    outline-offset: 4px;

}


/* =========================================================================
 * SECTION HEADINGS
 * ========================================================================= */

.tw-erecycling-section-heading {

    max-width: 820px;

    margin-bottom: 46px;

}


.tw-erecycling-section-heading h2 {

    margin: 0 0 16px;

    color: var(--text-primary) !important;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.1;

    letter-spacing: -0.025em;

}


.tw-erecycling-section-heading p {

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: 1.05rem;

    line-height: 1.75;

}


/* =========================================================================
 * INTRO
 * ========================================================================= */

.tw-erecycling-intro {

    padding: 100px 0;

    background: var(--bg-primary);

}


.tw-erecycling-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(280px, 0.8fr);

    gap: 60px;

    align-items: start;

}


.tw-erecycling-intro-content p {

    margin: 0 0 22px;

    color: var(--text-secondary) !important;

    font-size: 1.02rem;

    line-height: 1.8;

}


.tw-erecycling-intro-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================================
 * REUSE CARD — GREEN
 * ========================================================================= */

.tw-erecycling-intro-card {

    padding: 32px;

    background: var(--bg-panel);

    border: 1px solid rgba(61, 220, 151, 0.42);

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-intro-card:hover {

    transform: translateY(-4px);

    background: var(--bg-panel-2);

    border-color: var(--success);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(61, 220, 151, 0.08);

}


.tw-erecycling-card-number {

    margin-bottom: 18px;

    color: var(--success) !important;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

}


.tw-erecycling-intro-card h3 {

    margin: 0 0 14px;

    color: var(--text-primary) !important;

    font-size: 1.35rem;

}


.tw-erecycling-intro-card p {

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: 0.96rem;

    line-height: 1.7;

}


/* =========================================================================
 * PROCESS
 * ========================================================================= */

.tw-erecycling-process {

    padding: 100px 0;

    background: var(--bg-panel);

    border-top: 1px solid rgba(77, 163, 255, 0.12);

    border-bottom: 1px solid rgba(77, 163, 255, 0.12);

}


.tw-erecycling-process-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

}


.tw-erecycling-process-card {

    position: relative;

    padding: 30px;

    background: var(--bg-panel-2);

    border: 1px solid rgba(77, 163, 255, 0.18);

    border-radius: 10px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-process-card:hover {

    transform: translateY(-4px);

    background: #22304a;

    border-color: rgba(77, 163, 255, 0.60);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(77, 163, 255, 0.07);

}


.tw-erecycling-process-number {

    margin-bottom: 18px;

    color: var(--accent-blue) !important;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

}


.tw-erecycling-process-card h3 {

    margin: 0 0 12px;

    color: var(--text-primary) !important;

    font-size: 1.3rem;

}


.tw-erecycling-process-card p {

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: 0.94rem;

    line-height: 1.7;

}


/*
 * Make the final recycling stage green.
 */

.tw-erecycling-process-card:nth-child(6) {

    border-color: rgba(61, 220, 151, 0.28);

}


.tw-erecycling-process-card:nth-child(6) .tw-erecycling-process-number {

    color: var(--success) !important;

}


.tw-erecycling-process-card:nth-child(6):hover {

    border-color: rgba(61, 220, 151, 0.60);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(61, 220, 151, 0.07);

}


/* =========================================================================
 * PHASE 0
 * ========================================================================= */

.tw-erecycling-phase {

    padding: 100px 0;

    background: var(--bg-primary);

}


.tw-erecycling-phase-panel {

    padding: 52px;

    background:
        linear-gradient(
            135deg,
            rgba(214, 178, 94, 0.08),
            rgba(77, 163, 255, 0.035)
        ),
        var(--bg-panel);

    border: 1px solid rgba(214, 178, 94, 0.42);

    border-radius: 12px;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.20);

}


.tw-erecycling-phase-heading h2 {

    margin: 0;

    color: var(--text-primary) !important;

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

}


.tw-erecycling-phase-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.85fr);

    gap: 60px;

    margin-top: 42px;

}


.tw-erecycling-phase-content p {

    margin: 0 0 20px;

    color: var(--text-secondary) !important;

    font-size: 1rem;

    line-height: 1.8;

}


.tw-erecycling-phase-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================================
 * PHASE 0 CHECKLIST — GREEN
 * ========================================================================= */

.tw-erecycling-phase-list {

    display: grid;

    gap: 12px;

}


.tw-erecycling-phase-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    background: rgba(61, 220, 151, 0.035);

    border: 1px solid rgba(61, 220, 151, 0.16);

    border-radius: 7px;

    color: var(--text-secondary) !important;

    font-size: 0.94rem;

    line-height: 1.5;

}


.tw-erecycling-phase-item span:first-child {

    flex: 0 0 auto;

    color: var(--success) !important;

    font-weight: 700;

}


.tw-erecycling-phase-item:hover {

    background: rgba(61, 220, 151, 0.07);

    border-color: rgba(61, 220, 151, 0.38);

}


/* =========================================================================
 * MATERIALS
 * ========================================================================= */

.tw-erecycling-materials {

    padding: 100px 0;

    background: var(--bg-panel);

}


.tw-erecycling-material-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

}


.tw-erecycling-material-card {

    padding: 28px;

    background: var(--bg-panel-2);

    border: 1px solid rgba(214, 178, 94, 0.18);

    border-radius: 10px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-material-card:hover {

    transform: translateY(-4px);

    background: #22304a;

    border-color: rgba(214, 178, 94, 0.55);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);

}


.tw-erecycling-material-card h3 {

    margin: 0 0 12px;

    color: var(--accent-gold) !important;

    font-size: 1.15rem;

}


.tw-erecycling-material-card p {

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: 0.92rem;

    line-height: 1.7;

}


/* =========================================================================
 * LEARNING / WORKFORCE — BLUE
 * ========================================================================= */

.tw-erecycling-learning {

    padding: 100px 0;

    background: var(--bg-primary);

}


.tw-erecycling-learning-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, 0.8fr);

    gap: 60px;

    align-items: start;

}


.tw-erecycling-learning-content h2 {

    margin: 0 0 22px;

    color: var(--text-primary) !important;

    font-size: clamp(2rem, 4vw, 3.1rem);

    line-height: 1.1;

}


.tw-erecycling-learning-content p {

    max-width: 760px;

    margin: 0 0 20px;

    color: var(--text-secondary) !important;

    font-size: 1rem;

    line-height: 1.8;

}


.tw-erecycling-learning-content p:last-child {

    margin-bottom: 0;

}


.tw-erecycling-learning-card {

    padding: 32px;

    background: var(--bg-panel);

    border: 1px solid rgba(77, 163, 255, 0.42);

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-learning-card:hover {

    transform: translateY(-4px);

    background: var(--bg-panel-2);

    border-color: var(--accent-blue);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(77, 163, 255, 0.08);

}


.tw-erecycling-learning-card .tw-erecycling-card-number {

    color: var(--accent-blue) !important;

}


.tw-erecycling-learning-card h3 {

    margin: 0 0 14px;

    color: var(--text-primary) !important;

    font-size: 1.35rem;

}


.tw-erecycling-learning-card p {

    margin: 0;

    color: var(--text-secondary) !important;

    font-size: 0.96rem;

    line-height: 1.7;

}


/* =========================================================================
 * FUTURE FOUNDATION — GREEN
 * ========================================================================= */

.tw-erecycling-foundation {

    padding: 100px 0;

    background: var(--bg-panel);

}


.tw-erecycling-foundation-panel {

    max-width: 900px;

    margin: 0 auto;

    padding: 52px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(61, 220, 151, 0.045),
            rgba(77, 163, 255, 0.025)
        ),
        var(--bg-panel-2);

    border: 1px solid rgba(61, 220, 151, 0.35);

    border-radius: 12px;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.tw-erecycling-foundation-panel:hover {

    transform: translateY(-3px);

    border-color: rgba(61, 220, 151, 0.65);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(61, 220, 151, 0.07);

}


.tw-erecycling-foundation-panel .tw-erecycling-eyebrow {

    color: var(--success) !important;

}


.tw-erecycling-foundation-panel h2 {

    margin: 0 0 24px;

    color: var(--text-primary) !important;

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

}


.tw-erecycling-foundation-panel p {

    max-width: 760px;

    margin: 0 auto 18px;

    color: var(--text-secondary) !important;

    font-size: 1rem;

    line-height: 1.8;

}


.tw-erecycling-foundation-panel p:last-child {

    margin-bottom: 0;

}


/* =========================================================================
 * CLOSING
 * ========================================================================= */

.tw-erecycling-closing {

    padding: 110px 0;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(214, 178, 94, 0.10),
            transparent 38%
        ),
        radial-gradient(
            circle at 30% 60%,
            rgba(61, 220, 151, 0.045),
            transparent 30%
        ),
        var(--bg-primary);

    border-top: 1px solid rgba(214, 178, 94, 0.14);

}


.tw-erecycling-closing-content {

    max-width: 850px;

    margin: 0 auto;

}


.tw-erecycling-closing h2 {

    margin: 0 0 20px;

    color: var(--text-primary) !important;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.05;

    letter-spacing: -0.03em;

}


.tw-erecycling-closing p {

    max-width: 720px;

    margin: 0 auto 30px;

    color: var(--text-secondary) !important;

    font-size: 1.05rem;

    line-height: 1.8;

}


/* =========================================================================
 * WATERMARK
 * ========================================================================= */

/*
 * The watermark is intentionally kept subtle, but must remain visible
 * against the dark E-Recycling backgrounds.
 *
 * This does not alter the watermark's positioning.
 */

.tw-erecycling-page .tw-watermark,
.tw-erecycling-page .site-watermark,
.tw-erecycling-page .watermark {

    opacity: 0.22;

    color: rgba(230, 237, 247, 0.70);

    pointer-events: none;

}


/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */

@media (max-width: 900px) {

    .tw-erecycling-process-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .tw-erecycling-material-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .tw-erecycling-intro-grid,
    .tw-erecycling-phase-grid,
    .tw-erecycling-learning-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}


@media (max-width: 700px) {

    .tw-erecycling-container {

        width: min(100% - 28px, 1180px);

    }

    .tw-erecycling-hero {

        padding: 80px 0 75px;

    }

    .tw-erecycling-intro,
    .tw-erecycling-process,
    .tw-erecycling-phase,
    .tw-erecycling-materials,
    .tw-erecycling-learning,
    .tw-erecycling-foundation {

        padding: 75px 0;

    }

    .tw-erecycling-closing {

        padding: 85px 0;

    }

    .tw-erecycling-process-grid,
    .tw-erecycling-material-grid {

        grid-template-columns: 1fr;

    }

    .tw-erecycling-phase-panel,
    .tw-erecycling-foundation-panel {

        padding: 32px 24px;

    }

    .tw-erecycling-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .tw-erecycling-button {

        width: 100%;

    }

}


@media (max-width: 420px) {

    .tw-erecycling-hero h1 {

        font-size: 2.35rem;

    }

    .tw-erecycling-section-heading h2,
    .tw-erecycling-learning-content h2 {

        font-size: 1.9rem;

    }

    .tw-erecycling-closing h2 {

        font-size: 2.15rem;

    }

}


/* =========================================================================
 * REDUCED MOTION
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    .tw-erecycling-button,
    .tw-erecycling-intro-card,
    .tw-erecycling-learning-card,
    .tw-erecycling-process-card,
    .tw-erecycling-material-card,
    .tw-erecycling-foundation-panel {

        transition: none;

    }

}