:root{

    --section-spacing:8rem;

    --section-spacing-large:10rem;

    --section-y:6rem;

    --section-gap:3rem;

}

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

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 9rem;
    padding-bottom: 11rem;
    background: linear-gradient(180deg, #000000, #02131b 100%);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at top right,
            rgba(var(--color-teal-rgb), .10),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(var(--color-red-rgb), .08),
            transparent 35%
        );
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    right: -250px;
    top: -200px;
    width: 700px;
    height: 700px;
    background:
        radial-gradient(
            circle,
            rgba(11, 148, 150, .06),
            transparent 70%
        );
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns:
        minmax(680px, 820px)
        minmax(420px, 520px);
    align-items: center;
    justify-content: space-between;
    gap: clamp(5rem, 8vw, 10rem);
}

.hero-copy {
    width: 100%;
    max-width: 780px;
}

.eyebrow{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:1.5rem;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--color-teal);

}

.eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--color-red);
    flex-shrink: 0;
}

.section-title{

    margin-bottom:1.25rem;

    line-height:1.12;

}

.section-intro{

    margin-bottom:0;

    max-width:620px;

    line-height:1.9;

}

.hero-copy h1 {
    font-size: clamp(4rem, 6vw, 5.8rem);
    line-height: .92;
    letter-spacing: -.055em;
    margin: 0 0 2.75rem;
    max-width: 760px;
}

.hero-copy p {
    max-width: 640px;
    font-size: 1.22rem;
    line-height: 1.9;
    margin-bottom: 3.5rem;
    color: var(--text-secondary);
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.75rem;
}

.hero-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.hero-panel {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    perspective: 1200px;
}

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .hero {
        padding-top: 11rem;
    }

    .hero-right {
        order: -1;
    }
}

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

.hero-board {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1.75rem;
    border-radius: 28px;
    background:
        linear-gradient(
            180deg,
            rgba(20, 25, 30, .96),
            rgba(12, 17, 21, .98)
        );
    border: 1px solid rgba(255, 255, 255, .05);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.hero-board:hover {
    border-color: rgba(255, 255, 255, .10);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, .35);
}

.board-line {
    width: 56px;
    height: 2px;
    background: #E31C3D;
}

.board-image {
    aspect-ratio: 9 / 7;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .015)
        );
    border: 1px solid rgba(255, 255, 255, .05);
    position: relative;
}

.board-image-inner {
    position: absolute;
    inset: 24px;
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.board-label {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #0B9496;
}

.board-placeholder {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    max-width: 260px;
    line-height: 1.5;
}

.board-meta h4 {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.board-meta p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 360px;
}

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

.hero-glow {
    position: absolute;
    right: -180px;
    top: -120px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(11, 148, 150, .08),
            transparent 70%
        );
    pointer-events: none;
}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
}

.scroll-indicator span {
    display: block;
    width: 2px;
    height: 60px;
    background: rgba(var(--color-white-rgb), .25);
    position: relative;
    overflow: hidden;
}

.scroll-indicator span::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
    100% {
        top: 100%;
    }
}

/* ==========================================================
   MANIFESTO
========================================================== */

.manifesto{

    padding:var(--section-y) 0;

    background:
        linear-gradient(
            180deg,
            #08131B,
            #0A161F
        );

}

.manifesto-grid{

    display:grid;

    /* Was hard px floors (560/680 + 380/460) that couldn't fit inside
       a normal ~1000-1100px browser window, forcing the 1100px
       breakpoint below to collapse to one column even on an ultrawide
       monitor if the window itself wasn't fully maximized. Fluid fr
       tracks scale down smoothly instead of hitting a wall. */
    grid-template-columns: 1fr 1.2fr;

    align-items:center;

    gap:clamp(2.5rem, 5vw, 5rem);

}

.manifesto-visual{

    /* Was a big 5rem top push left over from when this photo was
       portrait-oriented and needed extra height to balance the text.
       Now that the photo is landscape, that padding just added dead
       space — removed so the section can actually get shorter. */
    margin-right: calc(-1 * clamp(3rem, 6vw, 7rem));

}

.manifesto-copy {
    position: relative;
    z-index: 2;
    max-width: 640px;
    /* Pulls the text into the gap toward the photo so the two touch
       rather than sitting in two clean separate boxes. */
    margin-right: -2.5rem;
}

.manifesto-copy .section-title {
    margin-bottom: 2rem;
}

.manifesto-copy .section-intro {
    margin-bottom: 3rem;
}

.editorial-frame{

    max-width:100%;

    margin-left:auto;

}

.editorial-frame:hover {
    transform: translateY(-10px);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, .35);
}

.frame-line {
    width: 48px;
    height: 2px;
    background: var(--color-red);
    margin-bottom: 2rem;
}

.frame-image {
    /* Was 4/5 portrait — at the section's real width that made this
       one photo taller than the entire text column next to it,
       inflating the whole section's height. Landscape lets the
       section shrink to match the copy instead of being led by the
       photo. */
    aspect-ratio: 16/10;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .015)
        );
    border: 1px dashed rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .40);
    font-size: 1.1rem;
}

.frame-caption {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: .95rem;
}

@media (max-width: 700px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .manifesto-visual {
        order: -1;
        margin-right: 0;
    }
}

/* ==========================================================
   SERVICES OVERVIEW
========================================================== */

.services-overview{

    position:relative;

    overflow:hidden;

    padding:var(--section-y) 0;

    background:
        linear-gradient(
            180deg,
            #0D1820,
            #101B24
        );

}

/* services-bird-motif removed per feedback — reverted to plain
   solid-gradient background, no substitute texture for now. */

.services-overview .container-wide{

    position:relative;

    z-index:1;

}

.section-header{

    max-width:760px;

    margin-bottom:var(--section-gap);

}

.service-grid{

    display:grid;

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

    gap:1.75rem;

}

.service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: #171d22;
    border: 1px solid rgba(255, 255, 255, .05);
    min-height: 560px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.service-card::before {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-red);
    transition: width .35s ease;
}

.service-card:hover::before {
    width: 100%;
}

.service-card:hover {
    transform: translateY(-12px) scale(1.01);
    border-color: rgba(255, 255, 255, .10);
    box-shadow:
        0 45px 100px rgba(0, 0, 0, .40);
}

/* Breaks the three-identical-cards symmetry: the core offer (Brand &
   Website Design) sits visually larger and lifted above its siblings
   instead of the row reading as one uniform grid. */
.service-card-featured {
    transform: translateY(-1.75rem) scale(1.045);
    z-index: 2;
    border-color: rgba(11, 148, 150, .18);
}

.service-card-featured:hover {
    transform: translateY(-2.75rem) scale(1.055);
}

@media (max-width: 640px) {
    .service-card-featured {
        transform: none;
    }
    .service-card-featured:hover {
        transform: translateY(-12px) scale(1.01);
    }
}

.service-image {
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    overflow: hidden;
}

.service-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, .35)
        );
}

.service-image span {
    position: relative;
    z-index: 2;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-teal);
}

.strategy-image {
    background:
        linear-gradient(
            135deg,
            rgba(11, 148, 150, .12),
            rgba(0, 0, 0, .2)
        );
}

.web-image {
    background:
        linear-gradient(
            135deg,
            rgba(227, 28, 61, .10),
            rgba(0, 0, 0, .25)
        );
}

.social-image {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .05),
            rgba(11, 148, 150, .08)
        );
}

.service-content {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 220px;
}

.service-content h3 {
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.service-content p {
    color: var(--text-secondary);
    line-height: 1.9;
}

/* Hidden until hover — gives the card a reason to feel interactive
   rather than just decorative, without cluttering the resting state. */
.service-outcome {
    display: block;
    max-height: 0;
    overflow: hidden;
    color: var(--color-teal);
    font-size: .88rem;
    font-style: italic;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease .05s;
}

.service-card:hover .service-outcome {
    max-height: 3rem;
    opacity: 1;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: auto;
}

.service-link {
    transition: gap .3s ease;
}

.service-card:hover .service-link {
    gap: 1rem;
}

.service-link span {
    transition: transform .3s ease;
}

.service-card:hover .service-link span {
    transform: translateX(8px);
}

.services-note{

    margin-top:2.5rem;

    text-align:center;

    font-size:1rem;

    color:var(--text-secondary);

}

@media (max-width: 640px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
    .service-card-featured {
        transform: none;
    }
}

/* ==========================================================
   FEATURED PROJECT
========================================================== */

.featured-project{

    padding:var(--section-y) 0;

    background:
        linear-gradient(
            180deg,
            #09121A,
            #0C161F
        );

}

@media(min-width:1200px){

    .featured-project{

        overflow:visible;

    }

}

.featured-grid{

    display:grid;

    /* Same fix as manifesto-grid: fixed px floors couldn't fit inside
       a normal (non-maximized) browser window, so the 1100px collapse
       below fired even on an ultrawide monitor. Fluid fr tracks scale
       down instead of hitting a hard wall. */
    grid-template-columns: 1.3fr 1fr;

    align-items:center;

    gap:clamp(2.5rem, 5vw, 5rem);

}

.featured-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.featured-copy{

    /* Was position:relative; left:-60px — a laptop-width hack that
       shoved this column left of its grid cell. On the wider container
       this read as visibly off-center rather than balanced, so it's
       gone; the grid's own gap/alignment does the spacing now. */
    z-index:2;

    max-width:660px;

}

.featured-copy .section-title{

    max-width:560px;

}

.featured-copy .section-intro{

    max-width:540px;

}

.featured-copy .btn{

    margin-top:.75rem;

}

.project-frame{

    width:100%;

    /* Was capped at 460px regardless of how much room the grid column
       actually had (up to 700px) — the showcase image never used the
       space available to it. Let it fill its column instead. */
    max-width:640px;

    padding:2rem;

    border-radius:28px;

    background:

        linear-gradient(
            180deg,
            rgba(23,29,34,.96),
            rgba(16,20,24,.98)
        );

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

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.project-frame:hover{

    transform:translateY(-10px);

    border-color:rgba(255,255,255,.10);

    box-shadow:
        0 45px 90px rgba(0,0,0,.35);

}

.project-header{

    margin-bottom:1.25rem;

}

/* Small "browser chrome" bar so the showcase image reads as a real
   device/browser rather than a flat rounded rectangle floating in
   space — same physical, tangible quality the hero mockup has. */
.project-browser-bar{

    display:flex;

    gap:.4rem;

    padding:.85rem 1rem;

    margin-bottom:.75rem;

    border-radius:10px 10px 0 0;

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

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

    border-bottom:none;

}

.project-browser-bar span{

    width:9px;

    height:9px;

    border-radius:50%;

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

}

.project-browser-bar span:first-child{

    background:rgba(227,28,61,.4);

}

.project-tag{

    display:inline-block;

    padding:.55rem 1rem;

    border-radius:999px;

    background:rgba(227,28,61,.12);

    color:var(--color-red);

    font-size:.72rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-weight:700;

}

.project-image{

    width:100%;

    aspect-ratio:16/10;

    border-radius:0 0 18px 18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    border:1px dashed rgba(255,255,255,.08);

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

    transition:
        transform .45s ease;

}

/* Replaces the old feature-bullet list (read like a spec sheet) with
   one confident claim, styled like a pull-quote rather than a spec. */
.project-claim{

    margin:2rem 0 2.5rem;

    padding-left:1.5rem;

    border-left:3px solid var(--color-red);

    max-width:480px;

    font-family:'Instrument Serif', Georgia, serif;

    font-style:italic;

    font-weight:400;

    font-size:1.45rem;

    line-height:1.5;

    color:#fff;

}

@media(max-width:700px){

    .featured-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

}

/* ==========================================================
   PORTFOLIO SHOWCASE
========================================================== */

.portfolio-showcase{

    padding:6rem 0;

    background:

        linear-gradient(
            180deg,
            #081018,
            #0d1820
        );

}

.portfolio-slider{

    display:grid;

    grid-template-columns:70px 1fr 70px;

    align-items:center;

    gap:2rem;

}

.portfolio-track{

    position:relative;

    overflow:hidden;

}

.portfolio-slide{

    display:none;

    position:relative;

}

.portfolio-slide.active{

    display:block;

    animation:fadeWin .6s ease;

}

/* Caption now sits directly on the photo (dark gradient wash behind
   it) instead of living in a separate text column beside it — the
   image carries the section instead of splitting attention with it. */
.portfolio-image{

    position:relative;

    width:100%;

    aspect-ratio:16/8;

    border-radius:28px;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

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

}

.portfolio-slide::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:62%;

    border-radius:0 0 28px 28px;

    background:linear-gradient(180deg, transparent, rgba(5,8,12,.94) 88%);

    pointer-events:none;

}

.portfolio-details{

    position:absolute;

    left:clamp(1.5rem, 4vw, 3rem);

    right:clamp(1.5rem, 4vw, 3rem);

    bottom:clamp(1.5rem, 3vw, 2.5rem);

    z-index:2;

    max-width:640px;

}

.portfolio-category{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--color-teal);

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.8rem;

}

.portfolio-details h3{

    font-size:2.25rem;

    margin-bottom:.75rem;

    color:#fff;

}

.portfolio-details p{

    line-height:1.7;

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

    max-width:520px;

}

.slider-arrow{

    width:56px;

    height:56px;

    border-radius:50%;

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

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

    color:#fff;

    cursor:pointer;

    transition:.3s ease;

}

.slider-arrow:hover{

    transform:translateY(-3px);

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

}

.portfolio-dots{

    display:flex;

    justify-content:center;

    gap:.6rem;

    margin-top:2.5rem;

}

.slider-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    border:none;

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

    cursor:pointer;

    padding:0;

    transition:all .3s ease;

}

.slider-dot:hover{

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

}

.slider-dot.active{

    width:26px;

    border-radius:999px;

    background:var(--color-red);

}

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

.process-section{

    padding:6rem 0 5rem;

    background:

        linear-gradient(
            180deg,
            #0b141b,
            #091018
        );

}

.process-timeline{

    position:relative;

    display:grid;

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

    gap:2rem;

    margin-top:5rem;

}

/* Slight rising slant instead of a dead-flat line — small thing, but
   it's what keeps this from reading as a stock "roadmap" graphic. */
.timeline-line{

    position:absolute;

    top:34px;

    left:0;

    right:0;

    height:2px;

    transform:rotate(-.6deg);

    background:

        rgba(255,255,255,.08);

}

.timeline-fill{

    position:absolute;

    top:34px;

    left:0;

    width:0;

    height:2px;

    transform:rotate(-.6deg);

    transform-origin:left center;

    background:var(--color-red);

    transition:width .2s ease-out;

}

/* Steps stagger up/down instead of sitting in a rigid single row —
   echoes the trust-strip's hand-placed tilt rather than a corporate
   milestone tracker. */
.process-step{

    position:relative;

    padding-top:4rem;

}

.process-step:nth-child(2){ transform:translateY(1.5rem); }
.process-step:nth-child(3){ transform:translateY(-1rem); }
.process-step:nth-child(4){ transform:translateY(2.25rem); }

/* Oversized translucent numeral behind the heading, same visual
   language as the About page's studio-wall step numbers — a
   recurring signature instead of a one-off circle badge. */
.step-number{

    position:absolute;

    top:-1.8rem;

    left:-.25rem;

    font-size:5.5rem;

    font-weight:800;

    line-height:1;

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

    transition:color .35s ease;

    pointer-events:none;

}

.process-step:hover .step-number,
.process-step.active .step-number{

    color:rgba(227,28,61,.22);

}

.process-step h3{

    position:relative;

    margin-bottom:1rem;

    font-size:1.6rem;

}

.process-step p{

    position:relative;

    color:var(--text-secondary);

    line-height:1.8;

}

@media (max-width:900px){
    .process-step:nth-child(2),
    .process-step:nth-child(3),
    .process-step:nth-child(4){
        transform:none;
    }
}

/* ==========================================================
   WALL OF WINS
========================================================== */

.wins-section{

    position:relative;

    /* Was 8rem top/bottom plus a 360px-tall stage — took up almost a
       full screen. Trimmed to roughly half that footprint. */
    padding:3.5rem 0;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #071018,
            #05080c
        );

}

/* Full-bleed background photo. Sits behind an image-slot placeholder
   until Mieke uploads a real one via Backstage (Images tab, slot
   "home-testimonial-bg") — site-images.js swaps this element's
   inline background-image the moment an upload exists, so nothing
   further needs to change here once she does. */
.wins-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=2400&q=60");
    background-size:cover;
    background-position:center;
}

.wins-bg-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(5,8,12,.86), rgba(5,8,12,.93));
}

.wins-section .container{
    position:relative;
    z-index:2;
}

.wins-stage{

    position:relative;

    min-height:200px;

    /* Centered rather than left-aligned like the Process section right
       below it — both sections otherwise share the same .container
       left edge, which read as one straight line running through the
       page. Centering this one breaks that alignment. */
    text-align:center;

}

.wins-label{

    display:flex;

    justify-content:center;

    margin-bottom:1.5rem;

}

.wins-slider{

    position:relative;

}

.win-slide{

    display:none;

    max-width:900px;

    margin:0 auto;

    animation:fadeWin .8s ease;

}

.win-slide.active{

    display:block;

}

.quote-mark{

    display:inline-block;

    color:var(--color-red);

    font-size:5rem;

    line-height:1;

    margin-bottom:2rem;

}

.win-slide h2{

    font-family:'Instrument Serif', Georgia, serif;

    font-style:italic;

    font-weight:400;

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

    line-height:1.15;

    max-width:900px;

    margin:0 auto 2rem;

}

.win-slide p{

    position:relative;

    display:inline-block;

    padding-left:2.5rem;

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

    font-size:.8rem;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.win-slide p::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:1.75rem;

    height:1px;

    background:var(--color-red);

}

.wins-dots{

    display:flex;

    justify-content:center;

    gap:.6rem;

    margin-top:3rem;

}

@keyframes fadeWin{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

    }

/* ==========================================================
FINAL CTA
========================================================== */

.final-cta{

    position:relative;

    padding:9rem 0 10rem;

    overflow:hidden;

    background:

    radial-gradient(

        circle at top,

        rgba(233,42,74,.08),

        transparent 45%

    ),

    linear-gradient(

        180deg,

        #070b0f,

        #020304

    );

}

.final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.015),

        transparent

    );

    pointer-events:none;

}

/* Full-bleed background photo, same pattern as .wins-bg — placeholder
   until Mieke uploads a real one via Backstage (slot "home-cta-bg"). */
.final-cta-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2400&q=60");
    background-size:cover;
    background-position:center;
}

.final-cta-bg-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at top, rgba(233,42,74,.10), transparent 45%),
        linear-gradient(180deg, rgba(7,11,15,.90), rgba(2,3,4,.94));
}

.final-cta-content{

    position:relative;

    z-index:3;

    max-width:820px;

    margin:0 auto;

    text-align:center;

}

.final-cta .eyebrow{

    justify-content:center;

    margin-bottom:2rem;

}

.final-cta h2{

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

    line-height:.95;

    margin-bottom:2.5rem;

    max-width:900px;

    margin-inline:auto;

}

.final-cta p{

    max-width:700px;

    margin:0 auto;

    color:var(--text-secondary);

    font-size:1.15rem;

    line-height:2;

}

.cta-actions{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    margin-top:4rem;

    flex-wrap:wrap;

}