/* ====================================================
   MOVE THE MISSION — Hero, Impact & shared utilities
   Palette: #ff6a00 orange · #0d0d0d near-black · #fff
   ==================================================== */

:root{
    --mtm-orange:#ff6a00;
    --mtm-orange-deep:#e05800;
    --mtm-black:#0d0d0d;
    --mtm-font-display:'Montserrat',sans-serif;
    --mtm-font-script:'Great Vibes',cursive;
    --mtm-radius-pill:60px;
    --mtm-transition:.35s ease;
}

/* ===========================
   SKIP LINK (keyboard users)
=========================== */

.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--mtm-orange);
    color:#fff;
    padding:12px 22px;
    font-family:var(--mtm-font-display);
    font-weight:700;
    letter-spacing:1px;
    text-decoration:none;
    z-index:10000;
    border-radius:0 0 8px 0;
}

.skip-link:focus{
    left:0;
}

/* ====================================
   MOVE THE MISSION HERO
==================================== */

.mtm-hero{

    position:relative;

    min-height:100vh;
    min-height:100dvh; /* avoids mobile browser URL-bar jump */

    overflow:hidden;

    display:flex;
    align-items:center;

    padding:clamp(120px, 16vw, 180px) clamp(24px, 6vw, 70px) clamp(70px, 9vw, 90px);

    background:
        url("../image/movebg.png")
        center center/cover
        no-repeat;

}

/* ===========================
OVERLAY
=========================== */

.mtm-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.48) 35%,
        rgba(0,0,0,.12) 100%
    );

}

/* ===========================
CONTENT
=========================== */

.mtm-content{

    position:relative;

    z-index:5;

    max-width:650px;

}

.mtm-subtitle{

    color:var(--mtm-orange);

    font-family:var(--mtm-font-display);

    font-size:clamp(.85rem, 1.1vw, 1.05rem);

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.mtm-line{

    width:85px;

    height:3px;

    background:var(--mtm-orange);

    margin:18px 0 35px;

}

/* ==========================
TITLE
========================== */

.mtm-title{
    margin:20px 0;
    /* h1 now carries the page's single top-level heading */
}

.mtm-title-top{
    display:flex;
    align-items:center;
    gap:clamp(14px, 2.5vw, 22px);
    flex-wrap:wrap;
}

.move-word{

    font-size:clamp(2.75rem, 9.5vw, 7rem);
    font-weight:900;
    color:#fff;
    line-height:.88;
    letter-spacing:-2px;
    font-family:var(--mtm-font-display);

}

.mission-word{

    display:block;

    font-size:clamp(2.75rem, 9.5vw, 7rem);
    font-weight:900;
    color:#fff;
    line-height:.88;
    letter-spacing:-2px;
    font-family:var(--mtm-font-display);

}

.the-word{

    display:block;

    font-family:var(--mtm-font-script);

    color:var(--mtm-orange);

    font-size:clamp(1.9rem, 5.2vw, 4.7rem);

    margin-left:clamp(8px, 2vw, 28px);

    margin-top:-6px;

    margin-bottom:-18px;

}

.mtm-title-logo{

    width:clamp(64px, 11vw, 130px);
    height:clamp(64px, 11vw, 130px);

    object-fit:contain;

    position:relative;

    top:8px;      /* only a slight adjustment */

    left:-6px;

    margin:0;

    flex-shrink:0;

}

.mtm-tagline{

    margin-top:28px;

    color:#fff;

    font-size:clamp(.95rem, 1.4vw, 1.25rem);

    letter-spacing:2px;

    font-weight:700;

}

.mtm-tagline span{

    color:var(--mtm-orange);

    margin:0 8px;

}

.mtm-content p{

    margin-top:28px;

    color:rgba(255,255,255,.85);

    font-size:clamp(1rem, 1.3vw, 1.15rem);

    line-height:1.85;

    max-width:560px;

}



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

.mtm-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.btn-primary,
.btn-outline{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:16px 34px;

    min-height:54px;

    border-radius:var(--mtm-radius-pill);

    text-decoration:none;

    font-weight:700;

    transition:var(--mtm-transition);

}

.btn-primary{

    border:none;

    background:
    linear-gradient(
        90deg,
        #ff5a00,
        #ff8500
    );

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 35px rgba(255,102,0,.35);

}

.btn-outline{

    border:1px solid rgba(255,255,255,.2);

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);

    color:#fff;

}

.btn-outline:hover{

    background:#fff;

    color:#111;

}

.btn-primary:focus-visible,
.btn-outline:focus-visible{

    outline:2px solid #fff;

    outline-offset:3px;

}

/* ===========================
SCROLL CUE
=========================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:clamp(18px, 4vh, 35px);

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    z-index:10;

    text-decoration:none;

    animation:scrollBounce 2.6s ease-in-out infinite;

}

.circle{

    width:56px;

    height:56px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.3);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.05rem;

    transition:var(--mtm-transition);

}

.scroll-indicator:hover .circle,
.scroll-indicator:focus-visible .circle{

    background:var(--mtm-orange);

    border-color:var(--mtm-orange);

}

.scroll-indicator:focus-visible{

    outline:2px solid var(--mtm-orange);

    outline-offset:4px;

    border-radius:50%;

}

.scroll-indicator span{

    color:#fff;

    letter-spacing:4px;

    font-size:.75rem;

    font-weight:600;

}

@keyframes scrollBounce{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(8px); }
}

@media (max-width:520px){
    .scroll-indicator{ display:none; }
}

/* =====================================
   VERTICAL CTA ("UPCPI WEBSITE" tab)
===================================== */

.pp-side-tab{

    position:fixed;

    left:-10px;
    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:245px;

    background:linear-gradient(180deg,#ff7a00,#ff5b00);

    display:flex;
    flex-direction:column;
    align-items:center;

    text-decoration:none;

    color:#fff;

    z-index:999;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    opacity:0;

    animation:sideTabFade .8s ease-out 1.2s forwards;

    transition:
        left .35s ease,
        width .35s ease,
        opacity .35s ease;

}

.pp-side-tab.hide{

    opacity:0;

    pointer-events:none;

}

/* Hover / keyboard focus */

.pp-side-tab:hover,
.pp-side-tab:focus-visible{

    left:0;
    width:52px;

}

.pp-side-tab:focus-visible{

    outline:2px solid #fff;

    outline-offset:-4px;

}

/* Arrow */

.pp-side-tab i{

    margin-top:20px;

    font-size:1.4rem;

}

/* Vertical Text */

.pp-side-tab span{

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    margin-top:18px;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    white-space:nowrap;

}

/* Entrance Animation */

@keyframes sideTabFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

/* On phones, a left-edge tab can fight with the browser's
   edge-swipe-back gesture and is hard to reach with a thumb.
   Move it to a bottom-right pill instead. */
@media (max-width:768px){

    .pp-side-tab{
        left:auto;
        right:16px;
        top:auto;
        bottom:16px;
        transform:none;
        width:auto;
        height:auto;
        flex-direction:row;
        gap:10px;
        padding:14px 20px;
        border-radius:50px;
    }

    .pp-side-tab:hover,
    .pp-side-tab:focus-visible{
        right:16px;
        width:auto;
    }

    .pp-side-tab i{ margin-top:0; }

    .pp-side-tab span{
        writing-mode:horizontal-tb;
        transform:none;
        margin-top:0;
        font-size:.8rem;
    }

}

/*==========================
IMPACT SECTION
==========================*/

.impact-section{

    position:relative;

    background:url("../image/movebg2.png") center top no-repeat;

    background-size:cover;

    overflow:hidden;

    padding:clamp(90px, 12vw, 140px) 0 clamp(80px, 10vw, 130px);

}

/*==========================
OVERLAY
==========================*/

.impact-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.05);

}

/*==========================
CONTENT
==========================*/

.impact-content{

    position:relative;

    z-index:5;

    width:1250px;

    max-width:92%;

    margin:0 auto;

    text-align:center;

}

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

.impact-top{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:clamp(14px, 3vw, 35px);

    margin:0 0 30px;

    color:var(--mtm-orange);

    font-size:clamp(13px, 1.6vw, 24px);

    font-weight:700;

    letter-spacing:clamp(3px, 1vw, 12px);

    text-transform:uppercase;

}

.line{

    width:clamp(45px, 9vw, 130px);

    height:2px;

    background:var(--mtm-orange);

    position:relative;

}

.line::after{

    content:"";

    position:absolute;

    right:-2px;

    top:-2px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--mtm-orange);

    box-shadow:0 0 12px var(--mtm-orange);

}

/*==========================
MAIN HEADING
   (single <h2>, two visual
   lines via inner spans —
   keeps heading order valid)
==========================*/

.impact-heading{

    line-height:.88;

}

.impact-heading-text{
    margin:0;
}

.impact-heading-line1{

    display:block;

    color:#fff;

    font-size:clamp(3.4rem, 11vw, 9.375rem);

    font-weight:900;

    letter-spacing:-3px;

}

.impact-heading-line2{

    display:block;

    color:#fff;

    font-size:clamp(3.7rem, 12vw, 10rem);

    font-weight:900;

    letter-spacing:-4px;

    margin-top:-4px;

}

.impact-accent{

    color:var(--mtm-orange);

}

/*==========================
FEATURES
==========================*/

.impact-features{

    margin-top:clamp(40px, 7vw, 75px);

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:clamp(24px, 6vw, 90px);

}

.feature{

    display:flex;

    align-items:center;

    gap:18px;

    text-align:left;

}

.feature-icon{

    width:64px;

    height:64px;

    border:2px solid var(--mtm-orange);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--mtm-orange);

    font-size:26px;

    flex-shrink:0;

}

.feature h3{

    color:#fff;

    font-size:16px;

    margin:0;

    font-weight:700;

    text-transform:uppercase;

}

.feature p{

    color:#e6e6e6;

    margin-top:4px;

    font-size:15px;

    line-height:1.4;

}

@media (max-width:600px){

    .impact-features{
        flex-direction:column;
        align-items:flex-start;
        gap:22px;
    }

    .feature{
        width:100%;
        max-width:280px;
        margin:0 auto;
    }

}

/*==========================
DESCRIPTION
==========================*/

.impact-description{

    width:760px;

    max-width:100%;

    margin:clamp(36px, 6vw, 55px) auto 0;

    color:#fff;

    font-size:clamp(16px, 2vw, 20px);

    line-height:1.6;

}

/*==========================
BOTTOM CTA
   (normal flow now, not
   absolutely positioned —
   removes the old overlap
   risk on short viewports)
==========================*/

.impact-cta{

    max-width:850px;

    margin:clamp(50px, 8vw, 80px) auto 0;

    text-align:center;

}

.impact-cta h2{

    color:#fff;

    font-size:clamp(22px, 4vw, 48px);

    font-weight:700;

    line-height:1.2;

    margin:0 0 22px;

    letter-spacing:-.5px;

}

.impact-cta span{

    text-decoration:underline;

    text-decoration-color:var(--mtm-orange);

    text-decoration-thickness:4px;

    text-underline-offset:6px;

}

/*==========================
BUTTON
==========================*/

.impact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-top:10px;

    padding:18px 52px;

    min-height:54px;

    background:#000;

    color:#fff;

    border-radius:70px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:var(--mtm-transition);

}

.impact-btn:hover{

    background:var(--mtm-orange);

    transform:translateY(-5px);

}

.impact-btn:focus-visible{

    outline:2px solid var(--mtm-orange);

    outline-offset:3px;

}

/*==========================
MOBILE FINE-TUNING
   (most scaling is handled
   by clamp() above already)
==========================*/

@media (max-width:768px){

    .impact-description{
        max-width:320px;
        margin:32px auto 0;
    }

    .impact-cta h2{
        max-width:320px;
        margin:0 auto 18px;
    }

    .impact-btn{
        width:100%;
        max-width:280px;
    }

}

/* ===========================
RESPONSIVE — hero buttons
=========================== */

@media (max-width:480px){

    .mtm-buttons{
        flex-direction:column;
    }

    .btn-primary,
    .btn-outline{
        justify-content:center;
        width:100%;
    }

}

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

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

    .pp-side-tab{
        animation:none;
        opacity:1;
    }

    .scroll-indicator{
        animation:none;
    }

    .btn-primary,
    .btn-outline,
    .impact-btn{
        transition:none;
    }

    .btn-primary:hover,
    .impact-btn:hover{
        transform:none;
    }

}
/* ============================================================
   MOVE THE MISSION — Raffle Winner Section
   Loaded after movement.css, so it shares the --mtm-* tokens
   defined there (palette, fonts, transition, radius).
   ============================================================ */

/* ── Section shell ────────────────────────────────────────── */
.winner-section {
    position: relative;
    background: var(--mtm-black, #0d0d0d);
    overflow: hidden;
    padding: 100px 0 120px;
}

/* Subtle noise-free texture via CSS only */
.winner-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 106, 0, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255, 106, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* All children above overlay */
.winner-section > *:not(.winner-bg-overlay) {
    position: relative;
    z-index: 1;
}

/* ── Eyebrow ──────────────────────────────────────────────── */
.winner-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 44px;
}

.winner-eyebrow-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--mtm-orange, #ff6a00);
    text-transform: uppercase;
    white-space: nowrap;
}

.winner-eyebrow-line {
    flex: 0 0 80px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--mtm-orange, #ff6a00));
}

.winner-eyebrow-line:last-child {
    background: linear-gradient(90deg, var(--mtm-orange, #ff6a00), transparent);
}

/* ── Heading block ────────────────────────────────────────── */
.winner-heading-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 70px;
    padding: 0 24px;
}

.winner-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: rgba(255, 255, 255, 0.62); /* bumped from .4 for AA contrast */
    text-transform: uppercase;
    margin: 0 0 16px;
}

.winner-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 0.92;
    letter-spacing: -2px;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.winner-title-accent {
    color: var(--mtm-orange, #ff6a00);
    /* Underline styled like site's text-decoration pattern */
    text-decoration: underline;
    text-decoration-color: rgba(255, 106, 0, 0.35);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.winner-intro {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
    max-width: 540px;
    margin: 0 auto;
}

/* ── Hero photo wrap ──────────────────────────────────────── */
.winner-hero-photo-wrap {
    position: relative;
    max-width: 560px;
    margin: 0 auto 90px;
    padding: 0 24px;
}

.winner-hero-figure {
    position: relative;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    /* Orange border accent */
    box-shadow:
        0 0 0 2px var(--mtm-orange, #ff6a00),
        0 30px 80px rgba(0, 0, 0, 0.7);
}

.winner-hero-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    transition: transform 0.6s ease;
}

.winner-hero-figure:hover .winner-hero-img {
    transform: scale(1.025);
}

/* ── WINNER stamp ─────────────────────────────────────────── */
.winner-stamp {
    position: absolute;
    top: 22px;
    right: -12px;
    background: var(--mtm-orange, #ff6a00);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    padding: 10px 22px;
    z-index: 10;
    /* Diagonal ribbon feel */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%);
    box-shadow: -4px 4px 14px rgba(255, 106, 0, 0.5);
}

/* ── Hero caption ─────────────────────────────────────────── */
.winner-hero-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 24px 24px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.7) 55%,
        transparent 100%
    );
    margin: 0;
}

.winner-hero-caption-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.winner-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--mtm-orange, #ff6a00);
}

.winner-hero-caption h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.winner-hero-caption p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0.5px;
}

/* ── Prize badge ──────────────────────────────────────────── */
.winner-prize-badge {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 100px;
    height: 100px;
    background: #111;
    border: 2px solid var(--mtm-orange, #ff6a00);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-shadow:
        0 0 0 4px rgba(255, 106, 0, 0.15),
        0 12px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.winner-prize-top {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mtm-orange, #ff6a00);
    display: block;
}

.winner-prize-vehicle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 3px 0 2px;
    display: block;
}

.winner-prize-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.48rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}

/* ── Story section ────────────────────────────────────────── */
.winner-story {
    max-width: 1200px;
    margin: 0 auto 90px;
    padding: 0 24px;
}

.winner-story-header {
    text-align: center;
    margin-bottom: 44px;
}

.winner-story-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--mtm-orange, #ff6a00);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.winner-story-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.winner-story-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

/* ── Photo grid ───────────────────────────────────────────── */
.winner-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}

/* Photo 1: spans full 12 cols, row 1 — wide landscape group shot */
.winner-grid-item:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Photo 2: spans 7 cols on row 2 */
.winner-grid-item:nth-child(2) {
    grid-column: 1 / 8;
    grid-row: 2;
}

/* Photo 3: spans 5 cols on row 2, portrait */
.winner-grid-item:nth-child(3) {
    grid-column: 8 / 13;
    grid-row: 2;
}

/* Photo 4: spans last 5 cols, row 3 — same column 8–13 */
.winner-grid-item:nth-child(4) {
    grid-column: 8 / 13;
    grid-row: 3;
}

/* Shared grid item styles */
.winner-grid-item {
    position: relative;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    background: #1a1a1a;
}

.winner-grid-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 220px;
    transition: transform 0.5s ease;
}

.winner-grid-item:nth-child(1) img {
    aspect-ratio: 16 / 7;
    min-height: unset;
}

.winner-grid-item:nth-child(2) img {
    aspect-ratio: 16 / 9;
}

.winner-grid-item:nth-child(3) img,
.winner-grid-item:nth-child(4) img {
    aspect-ratio: 3 / 4;
    min-height: unset;
}

.winner-grid-item:hover img {
    transform: scale(1.04);
}

/* Keyboard focus: figures are tabindex="0" in the HTML so
   keyboard users get the same caption reveal as mouse hover */
.winner-grid-item:focus-visible {
    outline: 2px solid var(--mtm-orange, #ff6a00);
    outline-offset: 3px;
}

/* Caption overlay */
.winner-grid-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin: 0;
}

.winner-grid-item:hover figcaption,
.winner-grid-item:focus-visible figcaption,
.winner-grid-item:focus-within figcaption {
    opacity: 1;
    transform: translateY(0);
}

.winner-grid-item figcaption span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: block;
}

/* ── Quote block ──────────────────────────────────────────── */
.winner-quote-block {
    max-width: 760px;
    margin: 0 auto 90px;
    padding: 0 24px;
}

.winner-quote-inner {
    border-left: 3px solid var(--mtm-orange, #ff6a00);
    padding: 32px 40px;
    background: rgba(255, 106, 0, 0.04);
    border-radius: 0 6px 6px 0;
    position: relative;
}

.winner-quote-icon {
    font-size: 1.8rem;
    color: rgba(255, 106, 0, 0.25);
    margin-bottom: 16px;
}

.winner-quote {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.55;
    margin: 0 0 20px;
    font-style: normal;
    letter-spacing: -0.2px;
}

.winner-cite {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-style: normal;
}

.winner-cite span {
    color: var(--mtm-orange, #ff6a00);
}

/* ── Bottom CTA ───────────────────────────────────────────── */
.winner-cta-block {
    text-align: center;
    padding: 0 24px;
}

.winner-cta-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.winner-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 50px;
    background: var(--mtm-orange, #ff6a00);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 60px;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.winner-cta-btn:hover {
    background: var(--mtm-orange-deep, #e05800);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(255, 106, 0, 0.35);
}

.winner-cta-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.winner-cta-btn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.winner-cta-btn:hover i {
    transform: translateX(4px);
}

/* ============================================================
   TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .winner-section {
        padding: 80px 0 100px;
    }

    /* Stack photo grid to 2 columns */
    .winner-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 8px;
    }

    .winner-grid-item:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .winner-grid-item:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2;
    }

    .winner-grid-item:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .winner-grid-item:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .winner-grid-item:nth-child(1) img {
        aspect-ratio: 16 / 8;
    }

    .winner-grid-item:nth-child(4) img {
        aspect-ratio: 16 / 9;
        min-height: unset;
    }

    .winner-quote-inner {
        padding: 28px 28px;
    }
}

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .winner-section {
        padding: 60px 0 80px;
    }

    .winner-eyebrow {
        gap: 14px;
        margin-bottom: 32px;
    }

    .winner-eyebrow-line {
        flex: 0 0 40px;
    }

    .winner-eyebrow-text {
        font-size: 0.65rem;
        letter-spacing: 4px;
    }

    .winner-heading-block {
        margin-bottom: 44px;
    }

    .winner-title {
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .winner-title-accent {
        text-decoration-thickness: 3px;
        text-underline-offset: 5px;
    }

    .winner-intro {
        font-size: 0.95rem;
    }

    .winner-hero-photo-wrap {
        max-width: 100%;
        padding: 0 20px;
        margin-bottom: 60px;
    }

    .winner-prize-badge {
        width: 80px;
        height: 80px;
        top: -14px;
        left: -6px;
    }

    .winner-prize-vehicle {
        font-size: 0.62rem;
    }

    .winner-hero-caption h3 {
        font-size: 1.25rem;
    }

    /* On mobile: always show captions (no hover) */
    .winner-grid-item figcaption {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stack to single column */
    .winner-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .winner-grid-item:nth-child(1),
    .winner-grid-item:nth-child(2),
    .winner-grid-item:nth-child(3),
    .winner-grid-item:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .winner-grid-item:nth-child(1) img {
        aspect-ratio: 4 / 3;
    }

    .winner-grid-item:nth-child(2) img {
        aspect-ratio: 4 / 3;
    }

    .winner-grid-item:nth-child(3) img,
    .winner-grid-item:nth-child(4) img {
        aspect-ratio: 4 / 3;
        min-height: unset;
    }

    .winner-story {
        margin-bottom: 60px;
        padding: 0 16px;
    }

    .winner-quote-inner {
        padding: 24px 20px;
    }

    .winner-quote {
        font-size: 1rem;
    }

    .winner-cta-btn {
        padding: 16px 36px;
        font-size: 0.85rem;
        letter-spacing: 2px;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ============================================================
   SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .winner-stamp {
        font-size: 0.6rem;
        letter-spacing: 3px;
        padding: 8px 16px;
        right: -8px;
    }

    .winner-story-header {
        margin-bottom: 28px;
    }

    .winner-quote-inner {
        padding: 20px 16px;
    }

    .winner-quote-icon {
        font-size: 1.4rem;
    }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .winner-hero-img,
    .winner-grid-item img,
    .winner-grid-item figcaption,
    .winner-cta-btn,
    .winner-cta-btn i {
        transition: none;
    }

    .winner-hero-figure:hover .winner-hero-img,
    .winner-grid-item:hover img {
        transform: none;
    }
}