/* =========================================================
   THE CONSOLE ROOM
   MAIN STYLESHEET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #02060a;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 5%;

    z-index: 10;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.95),
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0)
    );
}


/* ---------------------------------------------------------
   HEADER LOGO
   --------------------------------------------------------- */

.site-logo {
    display: block;
    width: 175px;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}


/* ---------------------------------------------------------
   CONSOLE BUTTONS
   --------------------------------------------------------- */

.main-nav a,
.hero-book {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 145px;
    min-height: 50px;

    padding: 9px 18px;

    color: #111111;

    background: linear-gradient(
        to bottom,
        #fffdf5 0%,
        #eee8dc 40%,
        #d4ccbd 75%,
        #bcb3a5 100%
    );

    border: 5px solid #151515;
    border-radius: 3px;
    outline: 1px solid #494949;

    text-decoration: none;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;

    letter-spacing: 0.5px;

    text-shadow: 0 1px 0 rgba(255,255,255,0.7);

    box-shadow:
        0 4px 0 #050505,
        0 8px 12px rgba(0,0,0,0.9),
        inset 0 2px 2px rgba(255,255,255,1),
        inset 0 -3px 4px rgba(0,0,0,0.2);

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        filter 0.2s ease;
}


/* OUTER BLACK SWITCH HOUSING */

.main-nav a::before,
.hero-book::before {
    content: "";

    position: absolute;
    inset: -11px;

    border-radius: 5px;
    border: 2px solid #292929;

    box-shadow:
        inset 0 0 0 2px #070707,
        inset 0 2px 2px rgba(255,255,255,0.12),
        0 2px 3px rgba(0,0,0,0.8);

    pointer-events: none;
}


/* BUTTON HOVER */

.main-nav a:hover,
.hero-book:hover {
    color: #000000;
    filter: brightness(1.12);

    box-shadow:
        0 4px 0 #050505,
        0 8px 16px rgba(231,170,50,0.35),
        inset 0 2px 2px rgba(255,255,255,1),
        inset 0 -3px 4px rgba(0,0,0,0.18);
}


/* BUTTON PRESSED */

.main-nav a:active,
.hero-book:active {
    transform: translateY(4px);

    box-shadow:
        0 1px 0 #050505,
        0 2px 3px rgba(0,0,0,0.9),
        inset 0 3px 5px rgba(0,0,0,0.3);
}


/* ---------------------------------------------------------
   RED BOOK TICKETS BUTTON
   --------------------------------------------------------- */

.main-nav .book-button {
    color: white;

    background: linear-gradient(
        to bottom,
        #e2574e 0%,
        #bd3330 40%,
        #921f20 75%,
        #681414 100%
    );

    border-color: #291010;

    text-shadow: 0 1px 2px black;
}

.main-nav .book-button:hover {
    color: white;
    filter: brightness(1.18);

    box-shadow:
        0 4px 0 #050505,
        0 8px 18px rgba(220,40,40,0.55),
        inset 0 2px 2px rgba(255,255,255,0.5);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 750px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #000;
}


/* ---------------------------------------------------------
   HERO VIDEO
   --------------------------------------------------------- */

.hero-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* ---------------------------------------------------------
   HERO DARK GRADIENT
   --------------------------------------------------------- */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.96) 0%,
            rgba(0,0,0,0.82) 18%,
            rgba(0,0,0,0.48) 40%,
            rgba(0,0,0,0.08) 68%,
            rgba(0,0,0,0.05) 100%
        ),

        linear-gradient(
            0deg,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.2) 28%,
            rgba(0,0,0,0.15) 70%,
            rgba(0,0,0,0.65) 100%
        );
}


/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.hero-content {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1500px;

    margin: 0 auto;

    padding-top: 110px;
}


/* BE A HERO */

.hero-small {
    color: #e7aa32;

    font-size: 19px;
    font-weight: 600;

    letter-spacing: 5px;

    margin-bottom: 12px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   STEP INSIDE
   Smaller than before
   --------------------------------------------------------- */

.hero-heading {
    color: white;

    font-size: clamp(
        38px,
        4vw,
        68px
    );

    font-weight: 800;

    line-height: 1;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 16px;

    text-shadow:
        0 4px 12px rgba(0,0,0,0.9);
}


/* ---------------------------------------------------------
   LARGE HERO LOGO
   --------------------------------------------------------- */

.hero-logo {
    display: block;

    width: min(750px, 70vw);

    max-width: 100%;

    height: auto;

    margin-bottom: 24px;

    filter:
        drop-shadow(0 3px 6px rgba(0,0,0,0.9))
        drop-shadow(0 0 12px rgba(80,160,220,0.15));
}


/* ---------------------------------------------------------
   HERO DESCRIPTION
   --------------------------------------------------------- */

.hero-description {
    max-width: 430px;

    margin-top: 8px;

    color: #e2e2e2;

    font-size: 18px;

    line-height: 1.55;

    text-shadow:
        0 2px 5px rgba(0,0,0,0.9);
}


/* ---------------------------------------------------------
   HERO BOOK BUTTON
   --------------------------------------------------------- */

.hero-book {
    margin-top: 34px;

    min-width: 250px;
    min-height: 56px;

    font-size: 15px;

    letter-spacing: 1.5px;
}

.hero-book:hover {
    box-shadow:
        0 4px 0 #050505,
        0 8px 18px rgba(231,170,50,0.45),
        inset 0 2px 2px rgba(255,255,255,1),
        inset 0 -3px 4px rgba(0,0,0,0.18);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .main-nav {
        gap: 18px;
    }

    .main-nav a {
        min-width: 110px;

        padding: 8px 12px;

        font-size: 11px;
    }

    .site-logo {
        width: 180px;
    }

    .hero-logo {
        width: 430px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .site-header {
        padding: 18px 6%;
    }

    .main-nav {
        display: none;
    }

    .site-logo {
        width: 170px;
    }

    .hero {
        min-height: 700px;
    }

    .hero-content {
        width: 88%;
        padding-top: 100px;
    }

    .hero-overlay {
        background:

            linear-gradient(
                90deg,
                rgba(0,0,0,0.9),
                rgba(0,0,0,0.35)
            ),

            linear-gradient(
                0deg,
                rgba(0,0,0,0.9),
                rgba(0,0,0,0.1)
            );
    }

    .hero-small {
        font-size: 15px;
    }

    .hero-heading {
        font-size: 44px;
    }

    .hero-logo {
        width: 360px;
    }

    .hero-description {
        font-size: 16px;
        max-width: 360px;
    }

    .hero-book {
        min-width: 220px;
    }
}


@media (max-width: 600px) {

    .hero-heading {
        font-size: 36px;
    }

    .hero-logo {
        width: 300px;
    }

    .hero-content {
        padding-top: 80px;
    }

    .site-logo {
        width: 145px;
    }

}

/* =========================================================
   WHO WILL YOU VISIT WITH?
   ========================================================= */


.visit-section {

    position: relative;

    width: 100%;

    padding: 55px 5% 70px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(19, 45, 62, 0.28),
            transparent 45%
        ),

        #02060a;

    border-top:
        1px solid rgba(220, 170, 70, 0.18);

}


/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

.section-title {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

}


.section-title span {

    height: 1px;

    flex: 1;

    max-width: 180px;

    background:

        linear-gradient(
            to right,
            transparent,
            #b8862d
        );

}


.section-title span:last-child {

    background:

        linear-gradient(
            to left,
            transparent,
            #b8862d
        );

}


.section-title h2 {

    color: white;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 4px;

    text-align: center;

    white-space: nowrap;

}


/* ---------------------------------------------------------
   FOUR OPTIONS
   --------------------------------------------------------- */

.visit-options {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    display: grid;

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

    gap: 50px;

}


/* ---------------------------------------------------------
   INDIVIDUAL OPTION
   --------------------------------------------------------- */

.visit-option {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;

    color: white;

}


/* ---------------------------------------------------------
   ROUND IMAGE
   --------------------------------------------------------- */

.visit-roundel {

    position: relative;

    width: 190px;

    height: 190px;

    padding: 5px;

    border-radius: 50%;

    background:

        linear-gradient(
            145deg,
            #fff1bd 0%,
            #cf9c3c 35%,
            #755018 65%,
            #e8bd60 100%
        );

    box-shadow:

        0 0 0 3px #151515,

        0 0 0 4px
        rgba(230,180,75,0.6),

        0 0 18px
        rgba(226,172,61,0.35),

        0 8px 20px
        rgba(0,0,0,0.8);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.visit-roundel::after {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.35);

    pointer-events: none;

}


.visit-roundel img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


/* ---------------------------------------------------------
   ROUND IMAGE HOVER
   --------------------------------------------------------- */

.visit-option:hover .visit-roundel {

    transform:
        translateY(-6px)
        scale(1.035);

    box-shadow:

        0 0 0 3px #151515,

        0 0 0 4px
        rgba(244,199,93,0.95),

        0 0 30px
        rgba(244,193,72,0.65),

        0 14px 24px
        rgba(0,0,0,0.9);

}


/* ---------------------------------------------------------
   TITLES
   --------------------------------------------------------- */

.visit-option h3 {

    margin-top: 22px;

    color: white;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.visit-option p {

    margin-top: 6px;

    color: #d8d8d8;

    font-size: 14px;

    letter-spacing: 0.5px;

}


/* ---------------------------------------------------------
   SMALL GOLD ARROW ON HOVER
   --------------------------------------------------------- */

.visit-option p::after {

    content: "›";

    display: inline-block;

    margin-left: 7px;

    color: #e7aa32;

    font-size: 18px;

    transform:
        translateX(0);

    transition:
        transform 0.2s ease;

}


.visit-option:hover p::after {

    transform:
        translateX(5px);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .visit-options {

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

        gap:
            55px 40px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .visit-section {

        padding:
            45px 7% 60px;

    }


    .section-title {

        gap: 12px;

    }


    .section-title h2 {

        font-size: 14px;

        letter-spacing: 2px;

        white-space: normal;

    }


    .section-title span {

        max-width: 60px;

    }


    .visit-options {

        grid-template-columns:
            1fr 1fr;

        gap:
            45px 20px;

    }


    .visit-roundel {

        width: 130px;

        height: 130px;

    }


    .visit-option h3 {

        font-size: 12px;

        letter-spacing: 1px;

    }


    .visit-option p {

        font-size: 12px;

    }

}

/* =========================================================
   OFFICIAL TRAILER
   ========================================================= */

.trailer-section {

    width: 100%;

    padding: 20px 5% 70px;

    background: #02060a;

}


/* TRAILER FRAME */

.trailer-wrapper {

    position: relative;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid rgba(220,170,70,0.35);

    background: #000;

    box-shadow:

        0 0 0 4px rgba(0,0,0,0.8),

        0 0 25px rgba(220,170,70,0.12),

        0 18px 50px rgba(0,0,0,0.8);

}


/* YOUTUBE VIDEO */

.trailer-wrapper iframe {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border: 0;

}


/* TABLET */

@media (max-width: 900px) {

    .trailer-section {

        padding:
            10px 4% 55px;

    }

}


/* MOBILE */

@media (max-width: 600px) {

    .trailer-section {

        padding:
            10px 0 45px;

    }

    .trailer-wrapper {

        border-left: 0;
        border-right: 0;

    }

}

/* =========================================================
   EXPLORE THE CONSOLE ROOM
   ========================================================= */

.gallery-preview-section {

    width: 100%;

    padding: 15px 0 75px;

    background:

        radial-gradient(
            circle at center,
            rgba(15, 35, 50, 0.20),
            transparent 55%
        ),

        #02060a;

}


/* ---------------------------------------------------------
   GALLERY STRIP
   --------------------------------------------------------- */

.gallery-strip {

    display: grid;

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

    width: 100%;

    background: #000;

    border-top:
        1px solid rgba(220,170,70,0.25);

    border-bottom:
        1px solid rgba(220,170,70,0.25);

}


/* ---------------------------------------------------------
   INDIVIDUAL GALLERY IMAGE
   --------------------------------------------------------- */

.gallery-item {

    position: relative;

    display: block;

    height: 230px;

    overflow: hidden;

    border-right:
        1px solid rgba(255,255,255,0.08);

}


.gallery-item:last-child {

    border-right: none;

}


.gallery-item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;

}


/* DARK OVERLAY */

.gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.08);

    transition:
        background 0.4s ease;

}


/* ---------------------------------------------------------
   GALLERY HOVER
   --------------------------------------------------------- */

.gallery-item:hover img {

    transform: scale(1.08);

    filter:
        brightness(1.12)
        contrast(1.04);

}


.gallery-item:hover::after {

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

}


/* ---------------------------------------------------------
   FULL GALLERY BUTTON
   --------------------------------------------------------- */

.gallery-button-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 35px;

}


/* ---------------------------------------------------------
   STANDARD CONSOLE BUTTON
   This can now be reused elsewhere on the website
   --------------------------------------------------------- */

.console-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 230px;

    min-height: 50px;

    padding: 10px 26px;

    color: #111;

    background:

        linear-gradient(
            to bottom,
            #fffdf5 0%,
            #eee8dc 40%,
            #d4ccbd 75%,
            #bcb3a5 100%
        );

    border: 5px solid #151515;

    border-radius: 3px;

    outline:
        1px solid #494949;

    text-decoration: none;

    text-transform: uppercase;

    font-weight: 800;

    font-size: 13px;

    letter-spacing: 1px;

    text-shadow:
        0 1px 0
        rgba(255,255,255,0.8);

    box-shadow:

        0 4px 0 #050505,

        0 8px 12px
        rgba(0,0,0,0.9),

        inset 0 2px 2px
        rgba(255,255,255,1),

        inset 0 -3px 4px
        rgba(0,0,0,0.2);

    transition:
        transform 0.1s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;

}


.console-button::before {

    content: "";

    position: absolute;

    inset: -11px;

    border-radius: 5px;

    border:
        2px solid #292929;

    box-shadow:

        inset 0 0 0 2px #070707,

        inset 0 2px 2px
        rgba(255,255,255,0.12),

        0 2px 3px
        rgba(0,0,0,0.8);

    pointer-events: none;

}


.console-button:hover {

    filter:
        brightness(1.12);

    box-shadow:

        0 4px 0 #050505,

        0 8px 18px
        rgba(231,170,50,0.35),

        inset 0 2px 2px
        rgba(255,255,255,1),

        inset 0 -3px 4px
        rgba(0,0,0,0.18);

}


.console-button:active {

    transform:
        translateY(4px);

    box-shadow:

        0 1px 0 #050505,

        0 2px 3px
        rgba(0,0,0,0.9),

        inset 0 3px 5px
        rgba(0,0,0,0.3);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .gallery-strip {

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

    }


    .gallery-item {

        height: 230px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gallery-preview-section {

        padding-bottom: 60px;

    }


    .gallery-strip {

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

    }


    .gallery-item {

        height: 180px;

    }


    .gallery-button-wrapper {

        margin-top: 30px;

    }


    .console-button {

        min-width: 200px;

        font-size: 12px;

    }

}

/* =========================================================
   WHAT VISITORS ARE SAYING
   ========================================================= */

.reviews-section {

    width: 100%;

    padding: 10px 5% 80px;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(25, 45, 60, 0.20),
            transparent 55%
        ),

        #02060a;

}


/* ---------------------------------------------------------
   REVIEW GRID
   --------------------------------------------------------- */

.reviews-grid {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;

}


/* ---------------------------------------------------------
   REVIEW CARD
   --------------------------------------------------------- */

.review-card {

    position: relative;

    min-height: 240px;

    padding: 35px 32px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        linear-gradient(
            145deg,
            rgba(15,22,28,0.95),
            rgba(5,10,14,0.98)
        );

    border:
        1px solid rgba(207,157,61,0.32);

    box-shadow:

        inset 0 0 25px
        rgba(255,255,255,0.015),

        0 12px 30px
        rgba(0,0,0,0.55);

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

}


/* GOLD QUOTE MARK */

.review-card::before {

    content: "“";

    position: absolute;

    top: 12px;
    left: 18px;

    color:
        rgba(207,157,61,0.28);

    font-family: Georgia, serif;

    font-size: 72px;

    line-height: 1;

}


/* ---------------------------------------------------------
   STARS
   --------------------------------------------------------- */

.review-stars {

    margin-bottom: 20px;

    color: #e7aa32;

    font-size: 20px;

    letter-spacing: 4px;

}


/* ---------------------------------------------------------
   REVIEW TEXT
   --------------------------------------------------------- */

.review-card blockquote {

    max-width: 330px;

    color: #f2f2f2;

    font-size: 18px;

    line-height: 1.55;

    font-style: normal;

}


/* ---------------------------------------------------------
   REVIEW NAME
   --------------------------------------------------------- */

.review-name {

    margin-top: 22px;

    color: #9ca5ab;

    font-size: 11px;

    letter-spacing: 2px;

}


/* ---------------------------------------------------------
   REVIEW HOVER
   --------------------------------------------------------- */

.review-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(231,170,50,0.65);

    box-shadow:

        0 0 22px
        rgba(231,170,50,0.10),

        0 18px 35px
        rgba(0,0,0,0.7);

}


/* ---------------------------------------------------------
   READ MORE BUTTON
   --------------------------------------------------------- */

.reviews-button-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 38px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .reviews-grid {

        grid-template-columns:
            1fr;

        max-width: 600px;

    }


    .review-card {

        min-height: 200px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .reviews-section {

        padding:
            5px 7% 65px;

    }


    .review-card {

        padding:
            30px 22px;

    }


    .review-card blockquote {

        font-size: 16px;

    }

}

/* =========================================================
   READY TO FLY - CINEMATIC VERSION
   ========================================================= */

.ready-section {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            ellipse at 82% 45%,
            rgba(27, 79, 115, 0.30) 0%,
            rgba(10, 35, 55, 0.15) 30%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 20% 50%,
            rgba(176, 126, 40, 0.06),
            transparent 45%
        ),
        linear-gradient(
            110deg,
            #010509 0%,
            #020910 45%,
            #061522 100%
        );

    border-top: 1px solid rgba(218, 164, 67, 0.28);
    border-bottom: 1px solid rgba(218, 164, 67, 0.22);
}


/* subtle atmospheric texture */

.ready-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,0.025) 0 1px,
            transparent 2px
        );

    background-size: 55px 55px;

    opacity: 0.7;

    pointer-events: none;
}


/* gold glow line at top */

.ready-section::after {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 70%;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(221, 166, 67, 0.15),
            rgba(221, 166, 67, 0.7),
            rgba(221, 166, 67, 0.15),
            transparent
        );

    box-shadow:
        0 0 15px rgba(221,166,67,0.2);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.ready-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1350px;

    min-height: 520px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.82fr;

    align-items: center;

    gap: 90px;

    padding: 55px 0;
}


/* ---------------------------------------------------------
   LEFT SIDE
   --------------------------------------------------------- */

.ready-text {
    position: relative;

    padding-left: 25px;
}


/* small gold decorative line */

.ready-text::before {
    content: "";

    display: block;

    width: 90px;
    height: 2px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            90deg,
            #e1a83d,
            rgba(225,168,61,0)
        );

    box-shadow:
        0 0 10px rgba(225,168,61,0.35);
}


.ready-text h2 {
    color: #f7f7f5;

    font-size: clamp(
        44px,
        4.7vw,
        72px
    );

    font-weight: 300;

    line-height: 0.98;

    letter-spacing: 6px;

    text-transform: uppercase;

    text-shadow:
        0 3px 15px rgba(0,0,0,0.95),
        0 0 35px rgba(65,125,165,0.08);
}


.ready-text p {
    margin-top: 22px;
    margin-bottom: 38px;

    color: #bac4cb;

    font-size: 17px;

    font-weight: 400;

    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   IMAGE AREA
   --------------------------------------------------------- */

.ready-image {
    position: relative;

    width: 100%;
    max-width: 520px;

    justify-self: end;

    padding: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(220,170,70,0.75),
            rgba(220,170,70,0.08) 35%,
            rgba(75,125,155,0.15) 65%,
            rgba(220,170,70,0.55)
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,0.65),
        0 0 35px rgba(30,90,130,0.12);

    transform: rotate(0.5deg);
}


/* inner dark frame */

.ready-image::before {
    content: "";

    position: absolute;

    inset: 7px;

    z-index: 2;

    border:
        1px solid rgba(255,255,255,0.13);

    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.45);

    pointer-events: none;
}


/* atmospheric glow behind photo */

.ready-image::after {
    content: "";

    position: absolute;

    z-index: -1;

    width: 115%;
    height: 115%;

    top: -7.5%;
    left: -7.5%;

    background:
        radial-gradient(
            ellipse,
            rgba(35,100,145,0.22),
            transparent 65%
        );

    filter: blur(15px);
}


.ready-image img {
    display: block;

    width: 100%;
    height: 350px;

    object-fit: cover;
    object-position: center;

    filter:
        contrast(1.05)
        saturate(0.9)
        brightness(0.9);
}


/* ---------------------------------------------------------
   RED BOOKING CONSOLE BUTTON
   --------------------------------------------------------- */

.red-console-button {
    min-width: 290px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #db5148 0%,
            #b42b29 42%,
            #861b1d 72%,
            #5c1012 100%
        );

    border-color: #241010;

    font-size: 14px;
    letter-spacing: 1.4px;

    text-shadow:
        0 1px 2px #000;

    box-shadow:
        0 4px 0 #030303,
        0 8px 16px rgba(0,0,0,0.8),
        0 0 20px rgba(190,35,35,0.12),
        inset 0 2px 2px rgba(255,255,255,0.4),
        inset 0 -3px 4px rgba(0,0,0,0.3);
}


.red-console-button:hover {
    color: white;

    filter: brightness(1.18);

    box-shadow:
        0 4px 0 #030303,
        0 8px 20px rgba(0,0,0,0.8),
        0 0 28px rgba(220,45,40,0.45),
        inset 0 2px 2px rgba(255,255,255,0.5);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .ready-content {
        gap: 45px;

        grid-template-columns:
            1fr 0.9fr;
    }

    .ready-text {
        padding-left: 0;
    }

    .ready-text h2 {
        letter-spacing: 4px;
    }

    .ready-image img {
        height: 310px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .ready-section {
        min-height: auto;
    }

    .ready-content {
        min-height: auto;

        grid-template-columns: 1fr;

        text-align: center;

        gap: 50px;

        padding:
            65px 0 0;
    }

    .ready-text {
        padding: 0;
    }

    .ready-text::before {
        margin:
            0 auto 25px;
    }

    .ready-text h2 {
        font-size: 43px;

        line-height: 1.05;

        letter-spacing: 3px;
    }

    .ready-text p {
        font-size: 15px;
    }

    .red-console-button {
        min-width: 250px;
    }

    .ready-image {
        width: 90%;

        max-width: 430px;

        justify-self: center;

        transform: none;
    }

    .ready-image img {
        height: 300px;
    }
}

/* =========================================================
   VISIT / CONTACT SECTION
   ========================================================= */

.contact-section {

    position: relative;

    width: 100%;

    padding: 80px 5% 90px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(14, 45, 66, 0.30),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #02070c 0%,
            #010407 100%
        );

    border-top:
        1px solid rgba(218,164,67,0.20);

}


/* ---------------------------------------------------------
   THREE COLUMN LAYOUT
   --------------------------------------------------------- */

.contact-inner {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr 0.8fr 1.15fr;

    gap: 55px;

}


/* ---------------------------------------------------------
   EACH PANEL
   --------------------------------------------------------- */

.contact-panel {

    position: relative;

    padding: 10px 25px 20px;

}


.contact-panel:not(:last-child) {

    border-right:
        1px solid rgba(255,255,255,0.08);

}


/* ---------------------------------------------------------
   SMALL SECTION HEADINGS
   --------------------------------------------------------- */

.section-mini-title {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

}


.section-mini-title span {

    width: 45px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #d9a13e,
            transparent
        );

}


.section-mini-title h2 {

    color: #e9edf0;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 3px;

    white-space: nowrap;

}


/* =========================================================
   MAP
   ========================================================= */

.map-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    padding: 5px;

    background:

        linear-gradient(
            145deg,
            rgba(218,164,67,0.65),
            rgba(30,40,48,0.2),
            rgba(218,164,67,0.25)
        );

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

}


.map-frame iframe {

    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(0.65)
        brightness(0.72)
        contrast(1.15)
        saturate(0.7);

}


.location-details {

    margin-top: 25px;

    color: #cbd1d5;

    font-size: 15px;

    line-height: 1.65;

}


.location-details strong {

    color: white;

    letter-spacing: 1px;

}


.telephone {

    margin-top: 18px;

}


.telephone a {

    color: #e3ad46;

    text-decoration: none;

    font-size: 18px;

    letter-spacing: 1px;

}


.telephone a:hover {

    color: white;

}


.small-link {

    display: inline-block;

    margin-top: 18px;

    color: #dca642;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 2px;

}


.small-link:hover {

    color: white;

}


/* =========================================================
   OPENING HOURS
   ========================================================= */

.hours-panel {

    text-align: center;

}


.hours-panel .section-mini-title {

    justify-content: center;

}


.open-days {

    color: #dfe4e7;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;

}


.opening-times {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin:
        25px auto 20px;

    max-width: 180px;

}


.opening-time {

    position: relative;

    padding: 13px 18px;

    color: white;

    background:

        linear-gradient(
            180deg,
            #17191a,
            #080909
        );

    border:
        1px solid rgba(216,164,69,0.38);

    box-shadow:

        inset 0 1px 1px
        rgba(255,255,255,0.08),

        0 5px 12px
        rgba(0,0,0,0.5);

}


.opening-time span {

    font-size: 22px;

    letter-spacing: 3px;

}


.booking-note {

    color: #8e999f;

    font-size: 12px;

    letter-spacing: 1px;

}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.instagram-block {

    margin-top: 42px;

    padding-top: 32px;

    border-top:
        1px solid rgba(255,255,255,0.08);

}


.instagram-block h3 {

    color: white;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 10px;

}


.instagram-handle {

    display: inline-block;

    color: #e3a941;

    text-decoration: none;

    font-size: 15px;

    margin-bottom: 20px;

}


.instagram-handle:hover {

    color: white;

}


.qr-link {

    display: block;

    width: 145px;

    margin: 0 auto;

}


.instagram-qr {

    display: block;

    width: 100%;
    height: auto;

    padding: 7px;

    background: white;

    border:
        1px solid rgba(220,170,70,0.35);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.6);

}


.qr-caption {

    margin-top: 12px;

    color: #87939a;

    font-size: 10px;

    letter-spacing: 1px;

}


/* =========================================================
   ENQUIRY FORM
   ========================================================= */

.enquiry-intro {

    margin-bottom: 26px;

    color: #aeb8be;

    font-size: 14px;

    line-height: 1.6;

}


.contact-form {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.form-group label {

    color: #aeb8be;

    font-size: 10px;

    letter-spacing: 2px;

}


.form-group input,
.form-group textarea {

    width: 100%;

    padding: 13px 14px;

    color: white;

    background:

        linear-gradient(
            180deg,
            rgba(5,10,14,0.95),
            rgba(8,14,18,0.95)
        );

    border:
        1px solid rgba(216,164,69,0.45);

    outline: none;

    font-family: inherit;

    font-size: 14px;

    box-shadow:

        inset 0 2px 5px
        rgba(0,0,0,0.65);

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

}


.form-group textarea {

    resize: vertical;

    min-height: 150px;

}


.form-group input:focus,
.form-group textarea:focus {

    border-color: #e3aa3e;

    box-shadow:

        0 0 10px
        rgba(220,164,65,0.15),

        inset 0 2px 5px
        rgba(0,0,0,0.65);

}


/* ---------------------------------------------------------
   SEND BUTTON
   --------------------------------------------------------- */

.form-submit-button {

    margin-top: 8px;

    width: 100%;

    cursor: pointer;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .contact-inner {

        grid-template-columns:
            1fr 1fr;

    }


    .enquiry-panel {

        grid-column:
            1 / -1;

        max-width: 700px;

        width: 100%;

        margin: 20px auto 0;

    }


    .contact-panel {

        border-right: none !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .contact-section {

        padding:
            60px 6% 70px;

    }


    .contact-inner {

        grid-template-columns:
            1fr;

        gap: 60px;

    }


    .contact-panel {

        padding:
            0;

    }


    .section-mini-title {

        justify-content: center;

    }


    .location-panel {

        text-align: center;

    }


    .map-frame {

        aspect-ratio:
            1 / 1;

    }


    .enquiry-panel {

        grid-column:
            auto;

        margin: 0;

    }

}

/* =========================================================
   FINAL FOOTER
   ========================================================= */

.site-footer {

    width: 100%;

    padding:
        45px 5% 25px;

    background:
        linear-gradient(
            180deg,
            #010407 0%,
            #000 100%
        );

    border-top:
        1px solid rgba(218,164,67,0.18);

    color: #aeb7bc;

}


/* ---------------------------------------------------------
   FEATURE STRIP
   --------------------------------------------------------- */

.footer-features {

    width: 100%;

    max-width: 1350px;

    margin: 0 auto 35px;

    display: grid;

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

    gap: 0;

    border-top:
        1px solid rgba(255,255,255,0.06);

    border-bottom:
        1px solid rgba(255,255,255,0.06);

}


.footer-feature {

    min-height: 90px;

    padding:
        18px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-align: left;

    border-right:
        1px solid rgba(255,255,255,0.07);

}


.footer-feature:last-child {

    border-right: none;

}


.footer-icon {

    flex-shrink: 0;

    color: #dca440;

    font-size: 26px;

    line-height: 1;

    text-shadow:
        0 0 12px rgba(220,164,64,0.18);

}


.footer-feature strong {

    color: #e8ecee;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 1.4px;

    line-height: 1.4;

}


/* ---------------------------------------------------------
   DISCLAIMER
   --------------------------------------------------------- */

.footer-disclaimer {

    max-width: 950px;

    margin:
        0 auto 20px;

    text-align: center;

}


.footer-disclaimer p {

    color: #899399;

    font-size: 9px;

    line-height: 1.5;

}


/* ---------------------------------------------------------
   LEGAL LINKS
   --------------------------------------------------------- */

.footer-links {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;

}


.footer-links a {

    color: #d4d9dc;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 1.7px;

    transition:
        color 0.2s ease;

}


.footer-links a:hover {

    color: #dca440;

}


.footer-links span {

    color:
        rgba(255,255,255,0.18);

}


/* ---------------------------------------------------------
   COPYRIGHT
   --------------------------------------------------------- */

.footer-bottom {

    text-align: center;

}


.footer-bottom p {

    color: #626c72;

    font-size: 8px;

    letter-spacing: 0.8px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .footer-features {

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

    }


    .footer-feature {

        border-bottom:
            1px solid rgba(255,255,255,0.06);

    }


    .footer-feature:nth-child(2n) {

        border-right: none;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-footer {

        padding:
            35px 6% 22px;

    }


    .footer-features {

        grid-template-columns:
            1fr;

    }


    .footer-feature {

        min-height: 70px;

        justify-content: flex-start;

        border-right: none;

    }


    .footer-links {

        gap: 9px;

    }


    .footer-links span {

        display: none;

    }


    .footer-links a {

        width: 100%;

        text-align: center;

    }

}

/* =========================================================
   INTERNAL PAGE BACKGROUND
   ========================================================= */

.inner-page {
    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0, 4, 8, 0.62),
            rgba(0, 4, 8, 0.78)
        ),
        url("../images/roundelspackground.jpeg");

    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;

    background-attachment: fixed;
}


/* extra dark layer for readability */

.inner-page::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,0.04),
            rgba(0,0,0,0.28)
        );
}


/* keeps page content above the dark overlay */

.inner-page-content {
    position: relative;

    z-index: 1;

    width: 90%;

    max-width: 1300px;

    margin: 0 auto;

    padding: 100px 0 100px;
}


.inner-page-content h1 {
    color: white;

    font-size: 72px;

    letter-spacing: 5px;
}


.inner-page-content p {
    margin-top: 20px;

    color: #d9dde0;

    font-size: 20px;
}
/* =========================================================
   THE GAME - HERO
   ========================================================= */

.game-hero {
    min-height: auto;

    display: flex;
    align-items: center;

    padding: 50px 0 65px;
}


/* TWO COLUMN LAYOUT */

.game-hero-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 80px;

    align-items: center;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.game-hero-copy {
    max-width: 650px;
}


.game-kicker {
    margin-bottom: 14px;

    color: #e3aa3e;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.game-hero h1 {
    margin: 0;

    color: white;

    font-size: clamp(
        68px,
        7vw,
        120px
    );

    font-weight: 700;

    line-height: 0.9;

    letter-spacing: 7px;

    text-transform: uppercase;

    text-shadow:
        0 5px 20px rgba(0,0,0,0.9);
}


.game-intro {
    max-width: 600px;

    margin: 30px 0 38px;

    color: #e0e4e7;

    font-size: 20px;

    line-height: 1.65;

    letter-spacing: 0.3px;

    text-shadow:
        0 2px 7px rgba(0,0,0,0.95);
}


/* =========================================================
   RIGHT SIDE - TEASER
   ========================================================= */

.game-teaser {
    width: 100%;

    max-width: 720px;

    justify-self: end;
}


/* SMALL GOLD LABEL */

.game-teaser-label {
    margin-bottom: 12px;

    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    text-align: center;

    text-transform: uppercase;
}


/* GOLD CINEMATIC FRAME */

.game-teaser-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    padding: 6px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f0cf79 0%,
            #9b6d24 25%,
            #3c2b13 50%,
            #b9832e 75%,
            #e8c66f 100%
        );

    box-shadow:
        0 0 0 4px rgba(0,0,0,0.75),
        0 0 28px rgba(218,164,67,0.18),
        0 18px 45px rgba(0,0,0,0.75);
}


/* INNER DARK EDGE */

.game-teaser-frame::before {
    content: "";

    position: absolute;

    inset: 6px;

    z-index: 2;

    pointer-events: none;

    border:
        1px solid rgba(255,255,255,0.16);

    box-shadow:
        inset 0 0 24px rgba(0,0,0,0.35);
}


/* YOUTUBE PLAYER */

.game-teaser-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .game-hero-grid {
        gap: 45px;

        grid-template-columns:
            1fr 1fr;
    }

    .game-hero h1 {
        font-size: 72px;
    }

    .game-intro {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .game-hero {
        padding:
            40px 0 70px;
    }

    .game-hero-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

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

    .game-hero h1 {
        font-size: 62px;

        letter-spacing: 4px;
    }

    .game-intro {
        font-size: 17px;

        line-height: 1.55;
    }

    .game-teaser {
        max-width: 100%;

        justify-self: stretch;
    }

}

/* =========================================================
   HOW THE GAME WORKS
   ========================================================= */

.game-steps-section {
    width: 100%;

    padding: 0px 0 90px;
}


/* ---------------------------------------------------------
   FOUR STEP GRID
   --------------------------------------------------------- */

.game-steps-grid {
    width: 100%;

    display: grid;

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

    gap: 26px;
}


/* ---------------------------------------------------------
   STEP CARD
   --------------------------------------------------------- */

.game-step-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(12,18,22,0.96),
            rgba(4,8,11,0.98)
        );

    border:
        1px solid rgba(220,170,70,0.32);

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

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.game-step-image {
    position: relative;

    height: 225px;

    overflow: hidden;

    background: #000;
}


.game-step-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(0.82)
        contrast(1.08)
        saturate(0.88);

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* dark cinematic gradient on image */

.game-step-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.03),
            rgba(0,0,0,0.12) 55%,
            rgba(0,0,0,0.75) 100%
        );
}


/* ---------------------------------------------------------
   STEP NUMBER
   --------------------------------------------------------- */

.game-step-number {
    position: absolute;

    z-index: 2;

    bottom: 14px;
    left: 16px;

    color: #e1aa45;

    font-size: 28px;

    font-weight: 300;

    letter-spacing: 3px;

    text-shadow:
        0 2px 6px rgba(0,0,0,0.9);
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.game-step-copy {
    padding:
        24px 22px 28px;
}


.game-step-copy h3 {
    color: #f2f3f4;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1.35;

    text-transform: uppercase;
}


.game-step-copy p {
    margin-top: 14px;

    color: #aeb7bc;

    font-size: 14px;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.game-step-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(229,176,73,0.68);

    box-shadow:
        0 0 24px rgba(220,170,70,0.09),
        0 22px 40px rgba(0,0,0,0.72);
}


.game-step-card:hover .game-step-image img {
    transform:
        scale(1.06);

    filter:
        brightness(0.98)
        contrast(1.08)
        saturate(0.95);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .game-steps-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .game-steps-section {
        padding-bottom: 70px;
    }


    .game-steps-grid {
        grid-template-columns:
            1fr;

        gap: 28px;
    }


    .game-step-image {
        height: 240px;
    }


    .game-step-copy {
        padding:
            22px 20px 26px;
    }

}
/* =========================================================
   GAME STORY INTRO - BACKGROUND IMAGE VERSION
   ========================================================= */

.game-story-intro {
    position: relative;

    max-width: 950px;

    margin: 0 auto 55px;

    padding: 15px 42px 46px;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(0,0,0,0.78),
            rgba(0,0,0,0.90)
        ),
        url("../images/boxbkgd.jpg");

    background-size: cover;
    background-position: center;

    border:
        1px solid rgba(220,170,70,0.34);

    box-shadow:
        0 16px 35px rgba(0,0,0,0.55),
        0 0 24px rgba(220,170,70,0.08);
}


/* ---------------------------------------------------------
   MAIN GOLD INTRO LINE
   --------------------------------------------------------- */

.game-story-lead {
    color: #e3aa3e;

    font-size: 28px;

    font-weight: 600;

    letter-spacing: 1.5px;

    line-height: 1.35;
}


/* ---------------------------------------------------------
   CAST / SPECIALLY RECORDED TEXT
   --------------------------------------------------------- */

.game-story-sublead {
    margin-top: 10px;

    color: #e3aa3e;

    font-size: 19px;

    line-height: 1.5;

    letter-spacing: 0.6px;
}


/* ---------------------------------------------------------
   THE STORY HEADING
   --------------------------------------------------------- */

.game-story-intro h3 {
    margin-top: 34px;

    color: #e3aa3e;

    font-size: 25px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   STORY BODY TEXT
   --------------------------------------------------------- */

.game-story-intro > p:not(.game-story-lead):not(.game-story-sublead):not(.game-story-credit) {
    margin-top: 20px;

    color: #f4f5f5;

    font-size: 18px;

    line-height: 1.75;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.95);
}


/* ---------------------------------------------------------
   CREDIT
   --------------------------------------------------------- */

.game-story-credit {
    margin-top: 30px;

    color: #d7dce0;

    font-size: 12px;

    letter-spacing: 1px;

    font-style: italic;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .game-story-intro {
        padding: 30px 24px;

        margin-bottom: 45px;
    }

    .game-story-lead {
        font-size: 22px;
    }

    .game-story-sublead {
        font-size: 16px;
    }

    .game-story-intro h3 {
        font-size: 21px;
    }

    .game-story-intro > p:not(.game-story-lead):not(.game-story-sublead):not(.game-story-credit) {
        font-size: 16px;
    }

}

/* =========================================================
   NO SPOILERS
   ========================================================= */

.no-spoilers-section {
    width: 100%;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 70px;

    align-items: center;

    padding: 45px 0 90px;
}


/* IMAGE */

.no-spoilers-image {
    position: relative;

    overflow: hidden;

    padding: 6px;

    background:
        linear-gradient(
            145deg,
            #e6c36c,
            #88601f 35%,
            #392912 65%,
            #d9a747
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,0.65),
        0 0 25px rgba(220,170,70,0.12);
}


.no-spoilers-image img {
    display: block;

    width: 100%;

    height: 390px;

    object-fit: cover;

    filter:
        brightness(0.78)
        contrast(1.1)
        saturate(0.85);
}


/* COPY */

.no-spoilers-copy {
    max-width: 560px;
}


.no-spoilers-copy h2 {
    margin-top: 8px;

    color: white;

    font-size: clamp(
        34px,
        3.8vw,
        58px
    );

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: 3px;
}


.no-spoilers-copy p:not(.game-kicker) {
    margin-top: 22px;

    color: #d5dadd;

    font-size: 17px;

    line-height: 1.7;
}


/* MOBILE */

@media (max-width: 800px) {

    .no-spoilers-section {
        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 70px;
    }

    .no-spoilers-image img {
        height: 300px;
    }

    .no-spoilers-copy {
        max-width: 100%;
    }

}
/* =========================================================
   BEFORE YOU PLAY
   ========================================================= */

.before-play-section {
    width: 100%;
    padding: 20px 0 90px;
}


/* ---------------------------------------------------------
   FIVE INFORMATION PANELS
   --------------------------------------------------------- */

.before-play-grid {
    width: 100%;

    display: grid;

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

    gap: 22px;
}


/* ---------------------------------------------------------
   INDIVIDUAL INFORMATION PANEL
   --------------------------------------------------------- */

.before-play-item {
    position: relative;

    padding: 28px 24px;

    background:
        linear-gradient(
            180deg,
            rgba(10,16,20,0.94),
            rgba(4,8,11,0.98)
        );

    border:
        1px solid rgba(220,170,70,0.28);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,0.45);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ---------------------------------------------------------
   PANEL NUMBER
   --------------------------------------------------------- */

.before-play-number {
    color: #e3aa3e;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 16px;
}


/* ---------------------------------------------------------
   PANEL TITLE
   --------------------------------------------------------- */

.before-play-item h3 {
    color: white;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1.7px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   PANEL BODY TEXT
   --------------------------------------------------------- */

.before-play-item p {
    margin-top: 12px;

    color: #aeb7bc;

    font-size: 14px;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   PANEL HOVER
   --------------------------------------------------------- */

.before-play-item:hover {
    transform: translateY(-5px);

    border-color:
        rgba(227,170,62,0.58);

    box-shadow:
        0 0 20px
        rgba(227,170,62,0.06),

        0 18px 32px
        rgba(0,0,0,0.6);
}


/* =========================================================
   SENSORY INFORMATION PANEL
   ========================================================= */

.sensory-item {
    border-color:
        rgba(227,170,62,0.48);

    background:
        linear-gradient(
            180deg,
            rgba(25,18,7,0.94),
            rgba(8,8,7,0.98)
        );
}


.sensory-item .before-play-number {
    color: #e3aa3e;
}


.sensory-item h3 {
    color: #e3aa3e;
}


.sensory-item p {
    color: #d9dde0;
}


/* =========================================================
   FINAL GAME BOOKING CTA
   ========================================================= */

.game-final-cta {
    position: relative;

    width: 100%;

    margin-top: 10px;

    padding:
        75px 30px 85px;

    overflow: hidden;

    text-align: center;

    background:

        radial-gradient(
            circle at center,
            rgba(25,70,105,0.30),
            transparent 48%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(218,164,67,0.07),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            rgba(3,8,12,0.88),
            rgba(1,4,7,0.97)
        );

    border-top:
        1px solid
        rgba(220,170,70,0.22);

    border-bottom:
        1px solid
        rgba(220,170,70,0.18);
}


/* GOLD LINE */

.game-final-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 55%;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,170,62,0.65),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(227,170,62,0.18);
}


/* ---------------------------------------------------------
   CLOCK IS TICKING
   --------------------------------------------------------- */

.game-final-cta .game-kicker {
    margin-bottom: 12px;

    color: #e3aa3e;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   CTA HEADLINE
   --------------------------------------------------------- */

.game-final-cta h2 {
    max-width: 900px;

    margin:
        10px auto 0;

    color: white;

    font-size: clamp(
        38px,
        4.5vw,
        66px
    );

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow:
        0 4px 14px
        rgba(0,0,0,0.9);
}


/* ---------------------------------------------------------
   CTA SUPPORTING TEXT
   --------------------------------------------------------- */

.game-final-cta > p:not(.game-kicker) {
    margin-top: 18px;

    margin-bottom: 36px;

    color: #c4ccd1;

    font-size: 17px;

    line-height: 1.5;

    letter-spacing: 0.5px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .before-play-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 850px) {

    .before-play-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .before-play-section {
        padding:
            10px 0 70px;
    }


    .before-play-grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .before-play-item {
        padding:
            24px 22px;
    }


    .game-final-cta {
        padding:
            55px 20px 65px;
    }


    .game-final-cta h2 {
        font-size: 40px;

        letter-spacing: 2px;
    }


    .game-final-cta > p:not(.game-kicker) {
        font-size: 15px;
    }

}

/* =========================================================
   SCANNER PAGE
   ========================================================= */

.scanner-content {
    position: relative;

    z-index: 1;

    width: 90%;

    max-width: 1450px;

    margin: 0 auto;

    padding:
        125px 0 100px;
}


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

.scanner-intro {
    max-width: 850px;

    padding:
        45px 0 45px;
}


.scanner-status {
    color: #e3aa3e;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.scanner-intro h1 {
    margin-top: 8px;

    color: white;

    font-size: clamp(
        72px,
        9vw,
        135px
    );

    font-weight: 300;

    line-height: 0.9;

    letter-spacing: 10px;

    text-transform: uppercase;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,0.9);
}


.scanner-intro-text {
    max-width: 650px;

    margin-top: 28px;

    color: #d9dfe2;

    font-size: 19px;

    line-height: 1.65;
}


/* =========================================================
   SCANNER FILTER BUTTONS
   ========================================================= */

.scanner-filters {
    width: 100%;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 25px;

    padding:
        25px 0 60px;
}


.scanner-filters a {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 150px;

    min-height: 48px;

    padding:
        9px 18px;

    color: #111;

    background:
        linear-gradient(
            to bottom,
            #fffdf5,
            #eee8dc 40%,
            #d4ccbd 75%,
            #bcb3a5
        );

    border:
        5px solid #151515;

    outline:
        1px solid #494949;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 4px 0 #050505,
        0 8px 12px rgba(0,0,0,0.8),
        inset 0 2px 2px rgba(255,255,255,1),
        inset 0 -3px 4px rgba(0,0,0,0.2);

    transition:
        transform 0.1s ease,
        filter 0.2s ease;
}


.scanner-filters a:hover {
    filter: brightness(1.15);
}


.scanner-filters a:active {
    transform:
        translateY(4px);
}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.scanner-gallery-section {
    padding:
        20px 0 90px;
}


.scanner-section-copy {
    margin:
        -15px auto 35px;

    text-align: center;

    color: #aeb7bc;

    font-size: 15px;

    letter-spacing: 1px;
}


/* =========================================================
   MASONRY STYLE GALLERY
   ========================================================= */

.scanner-gallery {
    width: 100%;

    display: grid;

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

    grid-auto-rows: 190px;

    gap: 10px;
}


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

.scanner-photo {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    cursor: pointer;

    background: #000;

    border:
        1px solid rgba(220,170,70,0.3);

    appearance: none;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,0.5);
}


.scanner-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(0.86)
        contrast(1.06)
        saturate(0.9);

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


.scanner-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255,255,255,0.05);

    pointer-events: none;
}


/* WIDER IMAGES */

.scanner-photo-wide {
    grid-column:
        span 2;
}


/* TALLER IMAGES */

.scanner-photo-tall {
    grid-row:
        span 2;
}


/* HOVER */

.scanner-photo:hover img {
    transform:
        scale(1.05);

    filter:
        brightness(1)
        contrast(1.06)
        saturate(1);
}


.scanner-photo:hover {
    border-color:
        rgba(227,170,62,0.7);
}


/* =========================================================
   FULL SCREEN LIGHTBOX
   ========================================================= */

.scanner-lightbox {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,0.96);

    backdrop-filter:
        blur(5px);
}


.scanner-lightbox.active {
    display: flex;
}


.scanner-lightbox img {
    display: block;

    max-width: 88vw;
    max-height: 88vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border:
        2px solid rgba(220,170,70,0.45);

    box-shadow:
        0 0 50px rgba(0,0,0,0.9);
}


/* CLOSE BUTTON */

.scanner-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    color: white;

    background: transparent;

    border: none;

    font-size: 48px;

    cursor: pointer;
}


/* PREVIOUS / NEXT */

.scanner-lightbox-prev,
.scanner-lightbox-next {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.4);

    border:
        1px solid rgba(227,170,62,0.35);

    width: 55px;
    height: 70px;

    font-size: 48px;

    cursor: pointer;
}


.scanner-lightbox-prev {
    left: 25px;
}


.scanner-lightbox-next {
    right: 25px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .scanner-gallery {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .scanner-content {
        width: 92%;

        padding-top: 110px;
    }


    .scanner-intro h1 {
        font-size: 60px;

        letter-spacing: 6px;
    }


    .scanner-gallery {
        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows: 150px;
    }


    .scanner-photo-wide {
        grid-column:
            span 2;
    }


    .scanner-lightbox-prev,
    .scanner-lightbox-next {
        width: 40px;
        height: 55px;

        font-size: 34px;
    }

}

/* =========================================================
   SCANNER SECTION TEXT - CONSISTENT STYLING
   ========================================================= */

/* Main section headings:
   PRESENT DAY / 2026 / 2025 / STUDIO BUILD */

.scanner-gallery-section .section-title {
    margin-bottom: 22px;
}

.scanner-gallery-section .section-title h2 {
    color: #ffffff;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 4px;

    line-height: 1.2;

    text-align: center;
}


/* Gold divider lines either side of heading */

.scanner-gallery-section .section-title span {
    height: 1px;

    max-width: 180px;

    background:
        linear-gradient(
            to right,
            transparent,
            #b8862d
        );
}

.scanner-gallery-section .section-title span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #b8862d
        );
}


/* ---------------------------------------------------------
   DESCRIPTION BENEATH PRESENT DAY
   --------------------------------------------------------- */

.scanner-section-copy {
    max-width: 760px;

    margin:
        -5px auto 38px;

    text-align: center;

    color: #aeb7bc;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   2026 / 2025 / STUDIO BUILD INTRO
   --------------------------------------------------------- */

.scanner-year-intro {
    max-width: 760px;

    margin:
        -5px auto 38px;

    text-align: center;
}


/* Gold subtitle such as
   THE FINAL TRANSFORMATION */

.scanner-year-kicker {
    margin-bottom: 8px;

    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* Main description underneath */

.scanner-year-intro p:not(.scanner-year-kicker) {
    margin: 0;

    color: #aeb7bc;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 1px;
}


/* =========================================================
   SPACING BETWEEN ARCHIVE SECTIONS
   ========================================================= */

.scanner-gallery-section {
    padding:
        25px 0 75px;
}


/* Give every section after the first a consistent gap */

.scanner-gallery-section + .scanner-gallery-section {
    padding-top: 55px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .scanner-gallery-section .section-title h2 {
        font-size: 15px;

        letter-spacing: 2.5px;
    }

    .scanner-section-copy,
    .scanner-year-intro p:not(.scanner-year-kicker) {
        font-size: 14px;

        line-height: 1.6;
    }

    .scanner-year-kicker {
        font-size: 11px;

        letter-spacing: 2px;
    }

}

/* =========================================================
   COORDINATES PAGE
   ========================================================= */

.coordinates-page {
    position: relative;

    min-height: 100vh;

    background: #02060a;

    color: white;

    overflow-x: hidden;
}


/* ---------------------------------------------------------
   FULL PAGE LOOPING VIDEO
   --------------------------------------------------------- */

.coordinates-video {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -3;
}


/* ---------------------------------------------------------
   DARK CINEMATIC OVERLAY
   --------------------------------------------------------- */

.coordinates-overlay {
    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

       linear-gradient(

            180deg,

            rgba(0,4,8,0.48) 0%,

            rgba(0,4,8,0.60) 45%,

            rgba(0,4,8,0.74) 100%

        ),

        radial-gradient(

            circle at 50% 20%,

            rgba(15,45,65,0.06),

            rgba(0,0,0,0.22)

        );
}


/* ---------------------------------------------------------
   MAIN PAGE CONTENT
   --------------------------------------------------------- */

.coordinates-content {
    position: relative;

    z-index: 1;

    width: 100%;

    padding-top: 125px;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.coordinates-intro {
    width: 90%;

    max-width: 1400px;

    margin: 0 auto;

    padding:
        45px 0 55px;
}


.coordinates-intro h1 {
    margin-top: 8px;

    color: white;

    font-size: clamp(
        65px,
        8vw,
        120px
    );

    font-weight: 300;

    line-height: 0.9;

    letter-spacing: 9px;

    text-transform: uppercase;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,0.95);
}


.coordinates-intro > p:last-child {
    max-width: 650px;

    margin-top: 26px;

    color: #d7dde1;

    font-size: 18px;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   CONTACT AREA TRANSPARENCY
   --------------------------------------------------------- */

.coordinates-contact {
    background:

        linear-gradient(
            180deg,
            rgba(1,5,8,0.72),
            rgba(1,4,7,0.88)
        );

    backdrop-filter:
        blur(3px);
}


/* =========================================================
   WHAT3WORDS
   ========================================================= */

.what3words-block {
    margin-top: 28px;

    padding:
        20px 22px;

    background:

        linear-gradient(
            180deg,
            rgba(12,18,22,0.92),
            rgba(4,8,11,0.96)
        );

    border:
        1px solid rgba(220,170,70,0.35);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,0.45);
}


.what3words-label {
    margin-bottom: 8px;

    color: #e3aa3e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}


.what3words-link {
    color: white;

    text-decoration: none;

    font-size: 19px;

    letter-spacing: 1px;

    transition:
        color 0.2s ease;
}


.what3words-link:hover {
    color: #e3aa3e;
}


.what3words-note {
    margin-top: 7px;

    color: #87939a;

    font-size: 11px;

    letter-spacing: 0.6px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .coordinates-content {
        padding-top: 105px;
    }


    .coordinates-intro {
        padding:
            35px 0 45px;
    }


    .coordinates-intro h1 {
        font-size: 52px;

        letter-spacing: 5px;
    }


    .coordinates-intro > p:last-child {
        font-size: 16px;
    }


    .what3words-link {
        font-size: 17px;
    }

}
/* =========================================================
   SHOP PAGE - NEW VERSION
   ========================================================= */

.shop-page-content {
    position: relative;

    z-index: 1;

    width: 90%;

    max-width: 1350px;

    margin: 0 auto;

    padding:
        125px 0 100px;
}


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

.shop-hero {
    max-width: 850px;

    padding:
        40px 0 55px;
}


.shop-status {
    color: #e3aa3e;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.shop-hero h1 {
    margin-top: 8px;

    color: white;

    font-size: clamp(
        70px,
        8vw,
        125px
    );

    font-weight: 300;

    line-height: 0.9;

    letter-spacing: 9px;

    text-transform: uppercase;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,0.9);
}


.shop-hero-copy {
    max-width: 650px;

    margin-top: 26px;

    color: #d9dfe2;

    font-size: 18px;

    line-height: 1.65;
}


/* =========================================================
   PRE-ORDER NOTICE
   ========================================================= */

.preorder-notice {
    max-width: 1050px;

    margin:
        0 auto 85px;

    padding:
        38px 45px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(23,17,7,0.95),
            rgba(7,7,7,0.98)
        );

    border:
        1px solid rgba(227,170,62,0.48);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.55);
}


.preorder-kicker {
    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 10px;
}


.preorder-notice h2 {
    color: white;

    font-size: 28px;

    font-weight: 400;

    letter-spacing: 4px;

    margin-bottom: 22px;
}


.preorder-notice > p:not(.preorder-kicker) {
    max-width: 800px;

    margin:
        12px auto 0;

    color: #d8dde0;

    font-size: 16px;

    line-height: 1.65;
}


.preorder-payment-line {
    margin-top: 28px;

    padding-top: 22px;

    color: #d8dde0;

    font-size: 13px;

    letter-spacing: 1.4px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.preorder-payment-line span {
    color: #e3aa3e;

    font-weight: 600;

    letter-spacing: 2px;
}


/* =========================================================
   FEATURED BOOK
   ========================================================= */

.shop-featured-section {
    padding-bottom: 90px;
}


.shop-featured-product {
    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap: 70px;

    align-items: center;

    padding: 45px;

    background:
        linear-gradient(
            135deg,
            rgba(12,19,24,0.96),
            rgba(3,8,11,0.98)
        );

    border:
        1px solid rgba(220,170,70,0.36);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.58);
}


/* ---------------------------------------------------------
   BOOK IMAGE
   --------------------------------------------------------- */

.shop-featured-image {
    position: relative;

    max-width: 380px;

    justify-self: center;

    padding: 7px;

    background:
        linear-gradient(
            145deg,
            #e6c36c,
            #835c20 35%,
            #372711 65%,
            #d6a443
        );
}


.shop-featured-image img {
    display: block;

    width: 100%;

    height: auto;
}


.shop-product-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    padding:
        8px 11px;

    color: #111;

    background: #e3aa3e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   BOOK COPY
   --------------------------------------------------------- */

.shop-featured-copy {
    max-width: 600px;
}


.shop-product-kicker {
    color: #e3aa3e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.shop-featured-copy h2 {
    margin-top: 10px;

    color: white;

    font-size: clamp(
        40px,
        5vw,
        68px
    );

    font-weight: 300;

    letter-spacing: 4px;
}


.shop-featured-copy > p:not(.shop-product-kicker) {
    margin:
        22px 0 32px;

    color: #c5cdd1;

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   COMING SOON
   ========================================================= */

.shop-coming-section {
    padding:
        10px 0 90px;
}


.shop-coming-intro {
    max-width: 700px;

    margin:
        -5px auto 40px;

    text-align: center;

    color: #aeb7bc;

    font-size: 15px;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.shop-product-grid {
    display: grid;

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

    gap: 24px;
}


/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */

.shop-product-card {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(10,16,20,0.95),
            rgba(4,8,11,0.99)
        );

    border:
        1px solid rgba(220,170,70,0.25);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,0.45);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE AREA
   --------------------------------------------------------- */

.shop-product-image {
    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(28,65,85,0.30),
            transparent 55%
        ),

        #060a0d;

    border-bottom:
        1px solid rgba(220,170,70,0.18);
}


.shop-placeholder {
    color: rgba(227,170,62,0.75);

    font-size: 12px;

    letter-spacing: 4px;
}


/* ---------------------------------------------------------
   PRODUCT INFO
   --------------------------------------------------------- */

.shop-product-info {
    padding:
        26px 24px 30px;
}


.shop-product-info h3 {
    margin-top: 8px;

    color: white;

    font-size: 16px;

    line-height: 1.45;

    letter-spacing: 1.8px;
}


.shop-product-info > p:not(.shop-product-kicker):not(.shop-product-detail) {
    margin-top: 15px;

    color: #aeb7bc;

    font-size: 14px;

    line-height: 1.6;
}


.shop-product-detail {
    margin-top: 10px;

    color: #e3aa3e;

    font-size: 12px;

    letter-spacing: 1px;
}


.shop-coming-label {
    display: inline-block;

    margin-top: 22px;

    padding:
        8px 11px;

    color: #e3aa3e;

    border:
        1px solid rgba(227,170,62,0.45);

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   PRE-ORDER SYSTEM PREVIEW
   ========================================================= */

.shop-order-preview {
    margin-top: 20px;

    padding:
        65px 45px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(4,10,14,0.88),
            rgba(2,5,8,0.96)
        );

    border-top:
        1px solid rgba(220,170,70,0.22);

    border-bottom:
        1px solid rgba(220,170,70,0.18);
}


.shop-order-preview h2 {
    margin-top: 10px;

    color: white;

    font-size: clamp(
        32px,
        4vw,
        52px
    );

    font-weight: 300;

    letter-spacing: 4px;
}


.shop-order-preview > p:not(.shop-status):not(.shop-order-smallprint) {
    max-width: 760px;

    margin:
        22px auto 38px;

    color: #c3cbd0;

    font-size: 16px;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   FOUR STEPS
   --------------------------------------------------------- */

.shop-order-steps {
    display: grid;

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

    gap: 20px;
}


.shop-order-step {
    padding:
        26px 20px;

    background:
        rgba(6,12,16,0.92);

    border:
        1px solid rgba(220,170,70,0.22);
}


.shop-order-step span {
    color: #e3aa3e;

    font-size: 11px;

    letter-spacing: 2px;
}


.shop-order-step strong {
    display: block;

    margin-top: 12px;

    color: white;

    font-size: 12px;

    letter-spacing: 1.7px;
}


.shop-order-step p {
    margin-top: 10px;

    color: #9da8ae;

    font-size: 13px;

    line-height: 1.55;
}


.shop-order-smallprint {
    margin-top: 28px;

    color: #78848a;

    font-size: 11px;

    letter-spacing: 1px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .shop-product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .shop-order-steps {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .shop-page-content {
        width: 92%;

        padding-top: 110px;
    }


    .shop-hero h1 {
        font-size: 54px;

        letter-spacing: 5px;
    }


    .preorder-notice {
        padding:
            28px 22px;
    }


    .preorder-notice h2 {
        font-size: 22px;

        letter-spacing: 2px;
    }


    .shop-featured-product {
        grid-template-columns:
            1fr;

        gap: 40px;

        padding:
            28px 22px;
    }


    .shop-featured-copy {
        text-align: center;

        margin: 0 auto;
    }


    .shop-product-grid {
        grid-template-columns:
            1fr;
    }


    .shop-order-preview {
        padding:
            50px 20px;
    }


    .shop-order-steps {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   PRODUCT CARDS - FIXED CONSISTENT LAYOUT
   ========================================================= */

.shop-product-card {
    display: flex;
    flex-direction: column;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(10,16,20,0.95),
            rgba(4,8,11,0.99)
        );

    border:
        1px solid rgba(220,170,70,0.25);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,0.45);
}


/* =========================================================
   IMAGE BOX
   ========================================================= */

.shop-product-image {
    width: 100%;
    height: 220px;

    flex: 0 0 220px;

    display: flex;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(28,65,85,0.30),
            transparent 55%
        ),
        #060a0d;

    border-bottom:
        1px solid rgba(220,170,70,0.18);
}


/* =========================================================
   REAL PRODUCT IMAGES
   ========================================================= */

.shop-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 14px;

    box-sizing: border-box;
}


/* =========================================================
   COMING SOON PLACEHOLDER
   ========================================================= */

.shop-placeholder {
    display: flex;

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

    width: 100%;
    height: 100%;

    color: rgba(227,170,62,0.85);

    font-size: 12px;

    letter-spacing: 4px;

    text-align: center;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.shop-product-info {
    width: 100%;

    padding:
        26px 24px 30px;

    box-sizing: border-box;
}
/* =========================================================
   BACK STORY PAGE
   ========================================================= */

.backstory-content {
    position: relative;
    z-index: 1;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;

    padding:
        125px 0 100px;
}


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

.backstory-hero {
    max-width: 1000px;

    padding:
        45px 0 65px;
}


.backstory-status {
    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.backstory-hero h1 {
    margin-top: 10px;

    color: #fff;

    font-size: clamp(
        62px,
        8vw,
        118px
    );

    font-weight: 300;

    line-height: 0.92;

    letter-spacing: 8px;
}


.backstory-hero-lead {
    max-width: 800px;

    margin-top: 32px;

    color: #e3aa3e;

    font-size: clamp(
        22px,
        2.5vw,
        34px
    );

    line-height: 1.4;
}


.backstory-hero-copy {
    max-width: 800px;

    margin-top: 20px;

    color: #c8d0d4;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   CHAPTER NAVIGATION
   ========================================================= */

.backstory-nav {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 100px;

    padding:
        16px 12px;

    background:
        rgba(3,8,11,0.88);

    border-top:
        1px solid rgba(227,170,62,0.3);

    border-bottom:
        1px solid rgba(227,170,62,0.3);
}


.backstory-nav a {
    padding:
        9px 15px;

    color: #aeb8bd;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;

    transition:
        color .2s ease,
        background .2s ease;
}


.backstory-nav a:hover {
    color: #e3aa3e;

    background:
        rgba(227,170,62,0.08);
}


/* =========================================================
   CHAPTERS
   ========================================================= */

.backstory-chapter {
    padding:
        20px 0 110px;
}


.backstory-chapter-number {
    color:
        rgba(227,170,62,0.25);

    font-size: 72px;

    font-weight: 200;

    line-height: 1;
}


.backstory-chapter-heading {
    margin-top: -18px;

    margin-bottom: 48px;
}


.backstory-chapter-heading > p {
    color: #e3aa3e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;
}


.backstory-chapter-heading h2 {
    margin-top: 8px;

    color: white;

    font-size: clamp(
        35px,
        5vw,
        65px
    );

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: 4px;
}


.backstory-lead {
    color: #fff;

    font-size: 21px;

    line-height: 1.6;
}


/* =========================================================
   TWO COLUMN STORY
   ========================================================= */

.backstory-two-column {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;
}


.backstory-text p {
    margin-bottom: 20px;

    color: #b9c3c8;

    font-size: 16px;

    line-height: 1.75;
}


.backstory-text .backstory-lead {
    color: white;

    font-size: 21px;
}


/* =========================================================
   MEDIA PLACEHOLDERS
   ========================================================= */

.backstory-media-placeholder,
.regenerated-video-placeholder,
.launch-image-placeholder,
.press-newspapers-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 400px;

    padding: 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(34,74,94,.26),
            transparent 60%
        ),
        #03080b;

    border:
        1px solid rgba(227,170,62,.3);
}


.backstory-media-placeholder span,
.regenerated-video-placeholder span,
.launch-image-placeholder span,
.press-newspapers-placeholder span {
    color: #e3aa3e;

    font-size: 11px;

    letter-spacing: 4px;
}


.backstory-media-placeholder p,
.regenerated-video-placeholder p,
.press-newspapers-placeholder p {
    margin-top: 12px;

    color: #78868c;

    font-size: 13px;
}

/* =========================================================
   REGENERATED - FEATURED FILMS
   ========================================================= */

.regenerated-feature-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 40px;

    margin-bottom: 24px;
}


.regenerated-feature-video {
    width: 100%;
}


.regenerated-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    padding: 6px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );

    box-shadow:
        0 18px 40px rgba(0,0,0,0.65);
}


.regenerated-video-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   REGENERATED - MINI FILM GRID
   ========================================================= */

.regenerated-episodes {
    display: grid;

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

    gap: 14px;

    margin-top: 20px;
}


.regenerated-episode {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.22);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.42);
}


/* ---------------------------------------------------------
   MINI VIDEO
   --------------------------------------------------------- */

.regenerated-mini-video {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    border-bottom:
        1px solid rgba(227,170,62,0.20);
}


.regenerated-mini-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ---------------------------------------------------------
   MINI FILM COPY
   --------------------------------------------------------- */

.regenerated-mini-copy {
    padding:
        18px 18px 22px;
}


.regenerated-mini-copy span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 2px;
}


.regenerated-mini-copy strong {
    display: block;

    margin-top: 8px;

    color: white;

    font-size: 12px;

    letter-spacing: 1.4px;

    line-height: 1.4;
}


.regenerated-mini-copy p {
    margin-top: 10px;

    color: #839097;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .regenerated-episodes {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .regenerated-feature-grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .regenerated-episodes {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   BUILD STORY GRID
   ========================================================= */

.backstory-story-grid {
    display: grid;

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

    gap: 28px;
}


.backstory-story-card {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(9,15,19,.96),
            rgba(3,7,10,.98)
        );

    border:
        1px solid rgba(227,170,62,.22);
}


.backstory-story-media {
    height: 270px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(227,170,62,.6);

    font-size: 11px;

    letter-spacing: 3px;

    background:
        radial-gradient(
            circle,
            rgba(25,65,85,.25),
            transparent 60%
        ),
        #03080b;
}


.backstory-story-copy {
    padding: 32px;
}


.backstory-story-copy > span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 3px;
}


.backstory-story-copy h3 {
    margin:
        10px 0 20px;

    color: white;

    font-size: 21px;

    line-height: 1.35;

    letter-spacing: 2px;
}


.backstory-story-copy p {
    margin-top: 13px;

    color: #aeb9be;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PEOPLE
   ========================================================= */

.backstory-people {
    padding:
        80px 0 110px;
}


.backstory-people-intro {
    max-width: 900px;

    margin-bottom: 45px;
}


.backstory-people-intro p {
    margin-bottom: 15px;

    color: #b8c2c7;

    font-size: 16px;

    line-height: 1.75;
}


.backstory-people-intro .backstory-lead {
    color: white;

    font-size: 21px;
}


.backstory-people-grid {
    display: grid;

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

    gap: 18px;
}


.backstory-person {
    padding:
        35px;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,21,.95),
            rgba(3,7,9,.98)
        );

    border-left:
        2px solid #b78329;
}


.backstory-person span {
    color: #e3aa3e;

    font-size: 9px;

    letter-spacing: 3px;
}


.backstory-person h3 {
    margin:
        8px 0 16px;

    color: white;

    font-size: 22px;

    letter-spacing: 2px;
}


.backstory-person p {
    color: #aeb9be;

    font-size: 14px;

    line-height: 1.7;
}


.backstory-people-note {
    max-width: 900px;

    margin:
        35px auto 0;

    text-align: center;

    color: #7f8b91;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.backstory-countdown {
    padding:
        100px 40px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(15,8,4,.90),
            rgba(4,4,4,.97)
        );

    border-top:
        1px solid rgba(227,170,62,.35);

    border-bottom:
        1px solid rgba(227,170,62,.35);
}


.backstory-countdown-small {
    color: #e3aa3e;

    font-size: 11px;

    letter-spacing: 5px;
}


.backstory-date {
    margin-top: 22px;

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

    font-size: clamp(
        70px,
        12vw,
        165px
    );

    font-weight: 200;

    line-height: 1;
}


.backstory-countdown h2 {
    margin-top: -20px;

    color: white;

    font-size: clamp(
        28px,
        4vw,
        50px
    );

    font-weight: 300;

    line-height: 1.25;

    letter-spacing: 4px;
}


.backstory-countdown-copy {
    max-width: 750px;

    margin:
        45px auto 0;
}


.backstory-countdown-copy p {
    margin-top: 14px;

    color: #bbc3c7;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   LAUNCH DAY
   ========================================================= */

.backstory-launch {
    position: relative;

    padding:
        100px 0;
}


.launch-image-placeholder {
    min-height: 650px;
}


.launch-overlay-title {
    max-width: 850px;

    margin:
        -100px auto 0;

    position: relative;

    padding:
        35px;

    text-align: center;

    background:
        rgba(2,6,9,.94);

    border:
        1px solid rgba(227,170,62,.35);
}


.launch-overlay-title p {
    color: #e3aa3e;

    font-size: 11px;

    letter-spacing: 4px;
}


.launch-overlay-title h2 {
    margin-top: 10px;

    color: white;

    font-size: clamp(
        30px,
        5vw,
        60px
    );

    font-weight: 300;

    letter-spacing: 4px;
}


.launch-story {
    max-width: 850px;

    margin:
        55px auto;
}


.launch-story p {
    margin-bottom: 17px;

    color: #b7c1c6;

    font-size: 16px;

    line-height: 1.75;
}


.launch-story .backstory-lead {
    color: white;

    font-size: 21px;
}


.launch-gallery {
    display: grid;

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

    gap: 10px;
}


.launch-gallery div {
    height: 240px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050b0e;

    border:
        1px solid rgba(227,170,62,.18);

    color: rgba(227,170,62,.55);

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   PRESS
   ========================================================= */

.backstory-press {
    padding:
        90px 0 110px;
}


.backstory-press > h2 {
    max-width: 900px;

    margin-top: 12px;

    color: white;

    font-size: clamp(
        38px,
        6vw,
        75px
    );

    font-weight: 300;

    line-height: 1.08;

    letter-spacing: 3px;
}


.press-hero {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 55px;

    align-items: center;

    margin-top: 55px;
}


.press-introduction p {
    margin-bottom: 18px;

    color: #b5c0c5;

    font-size: 15px;

    line-height: 1.75;
}


.press-introduction .backstory-lead {
    color: white;

    font-size: 22px;
}


.press-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 55px;
}


.press-card {
    min-height: 210px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,21,.97),
            rgba(3,7,9,.99)
        );

    border:
        1px solid rgba(227,170,62,.23);

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.press-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(227,170,62,.7);
}


.press-card span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 3px;
}


.press-card h3 {
    margin-top: 15px;

    color: white;

    font-size: 17px;

    line-height: 1.45;

    letter-spacing: 1px;
}


.press-card strong {
    margin-top: auto;

    padding-top: 25px;

    color: #9da9ae;

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   BOOK ENDING
   ========================================================= */

.backstory-book {
    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 70px;

    align-items: center;

    margin:
        30px 0 100px;

    padding:
        60px;

    background:
        linear-gradient(
            135deg,
            rgba(14,18,20,.96),
            rgba(3,7,9,.99)
        );

    border:
        1px solid rgba(227,170,62,.35);
}


.backstory-book-cover img {
    display: block;

    max-width: 350px;

    width: 100%;

    margin: 0 auto;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.7);
}


.backstory-book-copy h2 {
    margin:
        12px 0 25px;

    color: white;

    font-size: clamp(
        34px,
        5vw,
        62px
    );

    font-weight: 300;

    line-height: 1.08;

    letter-spacing: 3px;
}


.backstory-book-copy > p {
    margin-bottom: 17px;

    color: #b8c2c7;

    font-size: 15px;

    line-height: 1.75;
}


.backstory-book-copy .backstory-lead {
    color: white;

    font-size: 20px;
}


.backstory-book-copy .console-button {
    display: inline-block;

    margin-top: 18px;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

    .backstory-two-column,
    .press-hero,
    .backstory-book {
        grid-template-columns: 1fr;
    }


    .regenerated-episodes {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .backstory-story-grid,
    .backstory-people-grid {
        grid-template-columns: 1fr;
    }


    .press-grid,
    .launch-gallery {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .backstory-content {
        width: 92%;

        padding-top: 105px;
    }


    .backstory-hero h1 {
        font-size: 49px;

        letter-spacing: 4px;
    }


    .backstory-nav {
        margin-bottom: 65px;
    }


    .regenerated-section {
        padding:
            50px 20px 70px;
    }


    .regenerated-video-placeholder {
        min-height: 280px;
    }


    .regenerated-episodes,
    .press-grid,
    .launch-gallery {
        grid-template-columns: 1fr;
    }


    .backstory-countdown {
        padding:
            70px 20px;
    }


    .launch-image-placeholder {
        min-height: 400px;
    }


    .backstory-book {
        padding:
            35px 22px;
    }

}

/* =========================================================
   BACK STORY - REAL MEDIA IMAGES
   ========================================================= */

.backstory-media-image {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 6px;

    background:
        linear-gradient(
            145deg,
            #e2bf64,
            #805a1e 35%,
            #30220f 65%,
            #c99836
        );

    box-shadow:
        0 18px 40px rgba(0,0,0,0.65);
}

.backstory-media-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 388px;

    object-fit: cover;

    filter:
        brightness(0.82)
        contrast(1.05)
        saturate(0.88);
}
/* =========================================================
   REGENERATED - FEATURED FILM INFORMATION
   ========================================================= */

.regenerated-feature-video {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.22);

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


/* Remove any spacing underneath the video itself */

.regenerated-feature-video .regenerated-video-frame {
    margin: 0;

    box-shadow: none;

    border: 0;

    border-bottom:
        1px solid rgba(227,170,62,0.22);
}


/* Text area underneath */

.regenerated-feature-copy {
    padding:
        20px 22px 24px;
}


/* Gold FEATURE number */

.regenerated-feature-copy span {
    display: block;

    color: #e3aa3e;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 2px;

    margin-bottom: 8px;
}


/* Main white title */

.regenerated-feature-copy strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 1.5px;
}


/* Description */

.regenerated-feature-copy p {
    margin:
        11px 0 0;

    color: #839097;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: 0;
}
/* =========================================================
   REGENERATED - TWO MINI FILM GROUPS
   ========================================================= */

.regenerated-mini-groups {
    display: grid;

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

    gap: 22px;

    margin-top: 20px;
}


/* Each group contains four films */

.regenerated-mini-group {
    min-width: 0;
}


/* Override the older 4-column rule */

.regenerated-mini-group .regenerated-episodes {
    display: grid;

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

    gap: 14px;

    margin-top: 0;
}


/* Keep cards equal */

.regenerated-mini-group .regenerated-episode {
    height: 100%;

    display: flex;

    flex-direction: column;
}


/* Copy area fills remaining height */

.regenerated-mini-group .regenerated-mini-copy {
    flex: 1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .regenerated-mini-groups {
        grid-template-columns: 1fr;
    }


    .regenerated-mini-group .regenerated-episodes {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .regenerated-mini-group .regenerated-episodes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .regenerated-mini-group .regenerated-episodes {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   REGENERATED - FINAL 8 FILM GRID
   ========================================================= */

.regenerated-episodes-eight {
    display: grid;

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

    gap: 14px;

    width: 100%;

    margin-top: 20px;

    align-items: stretch;
}


/* Every card now shares the SAME grid row height */

.regenerated-episodes-eight .regenerated-episode {
    display: flex;

    flex-direction: column;

    height: 100%;

    min-width: 0;
}


/* Keep video areas identical */

.regenerated-episodes-eight .regenerated-mini-video {
    flex: 0 0 auto;

    width: 100%;

    aspect-ratio: 16 / 9;
}


/* Text section expands to fill remaining space */

.regenerated-episodes-eight .regenerated-mini-copy {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        18px 18px 22px;
}


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

@media (max-width: 1200px) {

    .regenerated-episodes-eight {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .regenerated-episodes-eight {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 500px) {

    .regenerated-episodes-eight {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   BUILDING THE IMPOSSIBLE
   ========================================================= */

.build-section {
    padding-top: 40px;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.build-introduction {
    max-width: 900px;

    margin-bottom: 45px;
}


.build-introduction p {
    margin-bottom: 18px;

    color: #b8c2c7;

    font-size: 16px;

    line-height: 1.75;
}


.build-introduction .backstory-lead {
    color: #ffffff;

    font-size: 21px;

    line-height: 1.6;
}


/* =========================================================
   FOUR FEATURED BUILD FILMS
   ========================================================= */

.build-feature-grid {
    display: grid;

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

    gap: 24px;

    width: 100%;
}


.build-feature-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.28);

    box-shadow:
        0 14px 32px rgba(0,0,0,0.45);
}


/* VIDEO */

.build-feature-video {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    padding: 5px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );
}


.build-feature-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #000;
}


/* COPY */

.build-feature-copy {
    flex: 1;

    padding:
        24px 25px 28px;
}


.build-feature-copy span {
    display: block;

    margin-bottom: 8px;

    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 2.5px;
}


.build-feature-copy strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}


.build-feature-copy p {
    margin-top: 13px;

    color: #909da3;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   FROM THE WORKSHOP TITLE
   ========================================================= */

.build-mini-heading {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 20px;

    align-items: center;

    margin-top: 75px;
}


.build-mini-heading span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,170,62,0.55)
        );
}


.build-mini-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(227,170,62,0.55),
            transparent
        );
}


.build-mini-heading h3 {
    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 4px;
}


.build-mini-intro {
    max-width: 720px;

    margin:
        15px auto 32px;

    text-align: center;

    color: #8f9ba1;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   SEVEN SMALL BUILD FILMS
   ========================================================= */

.build-mini-grid {
    display: grid;

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

    gap: 14px;

    width: 100%;

    align-items: stretch;
}


.build-mini-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.22);
}


/* MINI VIDEO */

.build-mini-video {
    flex: 0 0 auto;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    border-bottom:
        1px solid rgba(227,170,62,0.20);
}


.build-mini-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* MINI COPY */

.build-mini-copy {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        18px 17px 22px;
}


.build-mini-copy span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 2px;
}


.build-mini-copy strong {
    display: block;

    margin-top: 8px;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.4;

    letter-spacing: 1.2px;
}


.build-mini-copy p {
    margin-top: 10px;

    color: #839097;

    font-size: 12px;

    line-height: 1.55;
}


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

@media (max-width: 1200px) {

    .build-mini-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .build-feature-grid {
        grid-template-columns: 1fr;
    }


    .build-mini-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 500px) {

    .build-mini-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   BACK STORY - TEAM SECTION WITH PHOTOS
   ========================================================= */


/* =========================================================
   MAIN TEAM PHOTO
   ========================================================= */

.backstory-team-image {
    width: 100%;

    max-width: 1100px;

    margin:
        0 auto 45px;

    padding: 6px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e4c36c,
            #825d20 35%,
            #342610 65%,
            #cf9d39
        );

    box-shadow:
        0 18px 40px rgba(0,0,0,0.6);
}


.backstory-team-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: cover;

    filter:
        brightness(0.9)
        contrast(1.04);
}


/* =========================================================
   PEOPLE GRID
   ========================================================= */

.backstory-people-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   PERSON CARD
   ========================================================= */

.backstory-person {
    display: grid;

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

    gap: 24px;

    align-items: center;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,21,0.96),
            rgba(3,7,9,0.99)
        );

    border-left:
        2px solid #b78329;

    border-top:
        1px solid rgba(227,170,62,0.15);

    border-right:
        1px solid rgba(227,170,62,0.10);

    border-bottom:
        1px solid rgba(227,170,62,0.10);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.35);
}


/* =========================================================
   PERSON PHOTO
   ========================================================= */

.backstory-person-image {
    width: 150px;
    height: 150px;

    overflow: hidden;

    border:
        1px solid rgba(227,170,62,0.35);

    background: #05090c;
}


.backstory-person-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   PERSON TEXT
   ========================================================= */

.backstory-person-copy {
    min-width: 0;
}


.backstory-person-copy span {
    color: #e3aa3e;

    font-size: 9px;

    letter-spacing: 3px;
}


.backstory-person-copy h3 {
    margin:
        8px 0 14px;

    color: #ffffff;

    font-size: 22px;

    letter-spacing: 2px;
}


.backstory-person-copy p {
    margin: 0;

    color: #aeb9be;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .backstory-people-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .backstory-person {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .backstory-person-image {
        width: 170px;
        height: 170px;

        margin: 0 auto;
    }


    .backstory-team-image img {
        max-height: none;
    }

}
/* =========================================================
   LAUNCH DAY FILM
   ========================================================= */

.launch-video-frame {
    width: 100%;

    aspect-ratio: 16 / 9;

    padding: 6px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,0.65);
}


.launch-video-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #000;
}


/* =========================================================
   LAUNCH GALLERY TITLE
   ========================================================= */

.launch-gallery-heading {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 20px;

    align-items: center;

    margin-top: 70px;
}


.launch-gallery-heading span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,170,62,0.55)
        );
}


.launch-gallery-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(227,170,62,0.55),
            transparent
        );
}


.launch-gallery-heading h3 {
    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 4px;
}


.launch-gallery-intro {
    max-width: 700px;

    margin:
        15px auto 30px;

    text-align: center;

    color: #8f9ba1;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   LAUNCH CAROUSEL
   ========================================================= */

.launch-carousel {
    position: relative;

    display: grid;

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

    grid-template-rows:
        auto auto;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding:
        16px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.97),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.45);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,0.55);
}


/* =========================================================
   IMAGE STAGE
   ========================================================= */

.launch-carousel-stage {
    position: relative;

    grid-column: 2;

    width: 100%;

    height: clamp(
        420px,
        60vw,
        720px
    );

    overflow: hidden;

    background: #000;
}


.launch-carousel-stage img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 1;

    transition:
        opacity 0.35s ease;
}


.launch-carousel-stage img.launch-image-changing {
    opacity: 0;
}


/* =========================================================
   COUNTER
   ========================================================= */

.launch-carousel-counter {
    position: absolute;

    right: 15px;
    bottom: 15px;

    padding:
        7px 10px;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.75);

    border:
        1px solid rgba(227,170,62,0.35);

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   LEFT / RIGHT CONTROLS
   ========================================================= */

.launch-carousel-button {
    width: 48px;
    height: 70px;

    display: flex;

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

    padding: 0;

    color: #e3aa3e;

    background:
        linear-gradient(
            180deg,
            #191919,
            #070707
        );

    border:
        1px solid rgba(227,170,62,0.45);

    font-size: 34px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.launch-carousel-button:hover {
    border-color: #e3aa3e;

    background:
        linear-gradient(
            180deg,
            #282114,
            #090806
        );
}


.launch-carousel-prev {
    grid-column: 1;
}


.launch-carousel-next {
    grid-column: 3;
}


/* =========================================================
   DOT NAVIGATION
   ========================================================= */

.launch-carousel-dots {
    grid-column:
        1 / -1;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 7px;

    padding:
        8px 15px 4px;
}


.launch-carousel-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid rgba(227,170,62,0.55);

    background: transparent;

    cursor: pointer;
}


.launch-carousel-dot.active {
    background: #e3aa3e;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .launch-carousel {
        grid-template-columns:
            42px minmax(0, 1fr) 42px;

        gap: 7px;

        padding: 8px;
    }


    .launch-carousel-stage {
        height: 420px;
    }


    .launch-carousel-button {
        width: 38px;
        height: 60px;

        font-size: 27px;
    }

}

/* =========================================================
   PRESS HERO - REAL NEWSPAPER IMAGE
   ========================================================= */

.press-newspapers-image {
    overflow: hidden;

    padding: 6px;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );

    box-shadow:
        0 18px 40px rgba(0,0,0,0.6);
}


.press-newspapers-image img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   BBC NORTHAMPTON FEATURE
   ========================================================= */

.press-video-feature {
    display: grid;

    grid-template-columns:
        1.35fr 0.65fr;

    gap: 40px;

    align-items: center;

    margin-top: 70px;

    padding: 35px;

    background:
        linear-gradient(
            135deg,
            rgba(7,14,18,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.28);
}


.press-video-frame {
    width: 100%;

    aspect-ratio: 16 / 9;

    padding: 5px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );
}


.press-video-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.press-video-copy span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 3px;
}


.press-video-copy h3 {
    margin-top: 10px;

    color: white;

    font-size: 28px;

    font-weight: 400;

    letter-spacing: 2px;
}


.press-video-copy p {
    margin-top: 18px;

    color: #aeb9be;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PRESS ARCHIVE HEADING
   ========================================================= */

.press-archive-title {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 20px;

    align-items: center;

    margin-top: 75px;
}


.press-archive-title span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,170,62,0.55)
        );
}


.press-archive-title span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(227,170,62,0.55),
            transparent
        );
}


.press-archive-title h3 {
    color: white;

    font-size: 14px;

    letter-spacing: 4px;
}


.press-archive-intro {
    margin:
        15px auto 35px;

    text-align: center;

    color: #87949a;

    font-size: 13px;
}


/* =========================================================
   PRESS CARDS WITH PREVIEW IMAGES
   ========================================================= */

.press-card {
    padding: 0;

    overflow: hidden;
}


.press-card-image {
    width: 100%;

    height: 160px;

    overflow: hidden;

    background: #05090b;

    border-bottom:
        1px solid rgba(227,170,62,0.2);
}


.press-card-image img {
    display: block;

    width: 100%;
    height: 100%;

  object-fit: cover;

    object-position: top center;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.press-card:hover .press-card-image img {
    transform: scale(1.035);

    opacity: 0.9;
}


.press-card-copy {
    display: flex;

    flex-direction: column;

    flex: 1;

    min-height: 170px;

    padding: 24px;
}


.press-card-copy span {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 3px;
}


.press-card-copy h3 {
    margin-top: 13px;

    color: white;

    font-size: 16px;

    line-height: 1.45;
}


.press-card-copy strong {
    margin-top: auto;

    padding-top: 24px;

    color: #9da9ae;

    font-size: 10px;

    letter-spacing: 2px;
}


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

@media (max-width: 850px) {

    .press-video-feature {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   LEGAL PAGES
   ========================================================= */

.legal-page-content {
    position: relative;

    z-index: 1;

    width: 90%;
    max-width: 1150px;

    margin: 0 auto;

    padding:
        125px 0 100px;
}


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

.legal-hero {
    max-width: 950px;

    padding:
        45px 0 65px;
}


.legal-status {
    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.legal-hero h1 {
    margin-top: 10px;

    color: white;

    font-size: clamp(
        48px,
        7vw,
        95px
    );

    font-weight: 300;

    line-height: 0.95;

    letter-spacing: 6px;
}


.legal-updated {
    margin-top: 22px;

    color: #7f8c92;

    font-size: 12px;

    letter-spacing: 1px;
}


.legal-intro {
    max-width: 850px;

    margin-top: 20px;

    color: #c2cbd0;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   KEY INFORMATION
   ========================================================= */

.legal-key-info {
    margin-bottom: 85px;

    padding:
        38px;

    background:
        linear-gradient(
            180deg,
            rgba(6,12,16,0.96),
            rgba(2,6,9,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.35);
}


.legal-key-heading {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 20px;

    align-items: center;

    margin-bottom: 32px;
}


.legal-key-heading span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,170,62,0.55)
        );
}


.legal-key-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(227,170,62,0.55),
            transparent
        );
}


.legal-key-heading h2 {
    color: white;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 4px;
}


.legal-key-grid {
    display: grid;

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

    gap: 16px;
}


.legal-key-card {
    padding:
        24px 22px;

    background:
        rgba(5,10,14,0.88);

    border:
        1px solid rgba(227,170,62,0.18);
}


.legal-key-number {
    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 2px;
}


.legal-key-card h3 {
    margin-top: 10px;

    color: white;

    font-size: 13px;

    line-height: 1.45;

    letter-spacing: 1.4px;
}


.legal-key-card p {
    margin-top: 12px;

    color: #99a5ab;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   FULL TERMS
   ========================================================= */

.legal-sections {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.legal-section {
    display: grid;

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

    gap: 25px;

    padding:
        32px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(8,14,18,0.95),
            rgba(3,7,10,0.98)
        );

    border-left:
        2px solid rgba(227,170,62,0.55);

    border-top:
        1px solid rgba(227,170,62,0.12);

    border-right:
        1px solid rgba(227,170,62,0.12);

    border-bottom:
        1px solid rgba(227,170,62,0.12);
}


.legal-section-number {
    color:
        rgba(227,170,62,0.30);

    font-size: 42px;

    font-weight: 300;

    line-height: 1;
}


.legal-section-copy h2 {
    color: white;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 2px;

    line-height: 1.4;
}


.legal-section-copy p {
    margin-top: 14px;

    color: #aeb8bd;

    font-size: 14px;

    line-height: 1.7;
}


.legal-section-copy strong {
    color: white;
}


.legal-section-copy a {
    color: #e3aa3e;

    text-decoration: none;
}


.legal-section-copy a:hover {
    text-decoration: underline;
}


/* Important cancellation wording */

.legal-highlight {
    padding:
        13px 15px;

    color: #e3aa3e !important;

    background:
        rgba(227,170,62,0.07);

    border-left:
        2px solid #e3aa3e;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .legal-key-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .legal-page-content {
        width: 92%;

        padding-top: 105px;
    }


    .legal-hero h1 {
        font-size: 43px;

        letter-spacing: 3px;
    }


    .legal-key-info {
        padding:
            28px 20px;
    }


    .legal-key-grid {
        grid-template-columns: 1fr;
    }


    .legal-section {
        grid-template-columns: 1fr;

        gap: 10px;

        padding:
            26px 22px;
    }


    .legal-section-number {
        font-size: 30px;
    }

}
/* =========================================================
   VIRTUAL CONSOLE
   ========================================================= */

.virtual-console-page {
    margin: 0;

    min-height: 100vh;

    color: white;

    background:
        radial-gradient(
            circle at center,
            rgba(10,32,44,0.25),
            rgba(0,0,0,0.96) 70%
        ),
        #000;

    overflow-x: hidden;
}


.virtual-console-experience {
    position: relative;

    width: 100%;

    min-height: 100vh;
}


/* =========================================================
   SCREEN STATES
   ========================================================= */

.virtual-access-screen,
.virtual-entry-screen,
.virtual-room-screen,
.virtual-console-screen {
    display: none;

    width: 100%;

    min-height: 100vh;
}


.virtual-access-screen.active,
.virtual-entry-screen.active,
.virtual-room-screen.active,
.virtual-console-screen.active {
    display: flex;
}


/* =========================================================
   ACCESS SCREEN
   ========================================================= */

.virtual-access-screen {
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 60px 20px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(28,78,96,0.22),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.95)
        );
}


.virtual-access-panel {
    width: min(900px, 92%);

    padding: 55px 50px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(5,12,16,0.95),
            rgba(1,4,7,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.4);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.7);
}


.virtual-system-line {
    margin: 0;

    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.virtual-access-panel h1 {
    margin: 12px 0 30px;

    color: white;

    font-size:
        clamp(
            50px,
            8vw,
            105px
        );

    font-weight: 300;

    line-height: 0.95;

    letter-spacing: 7px;
}


.virtual-access-status {
    max-width: 560px;

    margin: 0 auto 30px;

    padding: 22px;

    background:
        rgba(0,0,0,0.45);

    border:
        1px solid rgba(255,255,255,0.08);
}


.virtual-access-status p {
    margin: 7px 0;

    color: #76858c;

    font-size: 11px;

    letter-spacing: 2px;
}


.virtual-access-status .virtual-access-granted {
    color: #e3aa3e;
}


.virtual-access-copy {
    max-width: 620px;

    margin: 15px auto 0;

    color: #b8c2c7;

    font-size: 15px;

    line-height: 1.7;
}


.virtual-enter-button {
    margin-top: 35px;

    padding: 16px 26px;

    color: #111;

    background:
        linear-gradient(
            180deg,
            #f0c75f,
            #b47a21
        );

    border:
        1px solid #f2cf72;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    cursor: pointer;
}


/* =========================================================
   ENTRY VIDEO
   ========================================================= */

.virtual-entry-screen {
    position: relative;

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

    background: #000;
}


.virtual-entry-screen video {
    display: block;

    width: 100%;

    height: 100vh;

    object-fit: cover;
}


.virtual-skip-button {
    position: absolute;

    right: 25px;
    bottom: 25px;

    z-index: 5;

    padding: 10px 14px;

    color: white;

    background:
        rgba(0,0,0,0.65);

    border:
        1px solid rgba(227,170,62,0.45);

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;
}


/* =========================================================
   MAIN ROOM
   ========================================================= */

.virtual-room-screen {
    position: relative;

    flex-direction: column;

    background: #000;
}


.virtual-room-image-wrap {
    position: relative;

    width: 100%;

    height: 72vh;

    overflow: hidden;

    background: #000;
}


.virtual-room-image-wrap img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   MAIN CONSOLE HOTSPOT
   ========================================================= */

.virtual-hotspot {
    position: absolute;

    cursor: pointer;
}


.virtual-console-hotspot {
    left: 37%;
    top: 34%;

    width: 27%;
    height: 36%;

    border:
        1px solid rgba(227,170,62,0.5);

    border-radius: 50%;

    background:
        rgba(0,0,0,0.15);

    opacity: 0.4;
}


.virtual-console-hotspot:hover {
    opacity: 1;

    background:
        rgba(227,170,62,0.08);

    box-shadow:
        0 0 30px rgba(227,170,62,0.22);
}


.virtual-console-hotspot span {
    position: absolute;

    left: 50%;
    bottom: 8px;

    transform:
        translateX(-50%);

    padding: 6px 10px;

    white-space: nowrap;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.82);

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================================
   TOUR VIDEO
   ========================================================= */

.virtual-tour-video-wrap {
    display: none;

    position: relative;

    width: 100%;

    height: 72vh;

    overflow: hidden;

    background: #000;
}


.virtual-tour-video-wrap.active {
    display: block;
}


.virtual-tour-video-wrap video {
    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #000;
}


.virtual-tour-back-button {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 5;

    padding: 10px 14px;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.78);

    border:
        1px solid rgba(227,170,62,0.55);

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;
}


/* =========================================================
   ROOM MENU
   ========================================================= */

.virtual-room-controls {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    padding: 18px 20px 10px;

    background:
        rgba(2,6,9,0.98);

    border-top:
        1px solid rgba(227,170,62,0.22);
}


.virtual-view-button,
.virtual-tour-button {
    min-width: 125px;

    padding: 11px 15px;

    color: #9da9ae;

    background:
        rgba(10,16,20,0.9);

    border:
        1px solid rgba(227,170,62,0.25);

    font-size: 10px;

    letter-spacing: 1.8px;

    cursor: pointer;
}


.virtual-view-button:hover,
.virtual-view-button.active,
.virtual-tour-button:hover {
    color: #e3aa3e;

    border-color:
        rgba(227,170,62,0.7);

    background:
        rgba(227,170,62,0.08);
}


.virtual-room-help {
    padding: 8px 20px 20px;

    text-align: center;

    background:
        rgba(2,6,9,0.98);
}


.virtual-room-help span {
    color: #647178;

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================================
   CONSOLE SCREEN
   ========================================================= */

.virtual-console-screen {
    flex-direction: column;

    box-sizing: border-box;

    padding: 40px 4% 90px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(22,60,78,0.18),
            transparent 40%
        ),
        #020608;
}


.virtual-console-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto 28px;
}


.virtual-console-header h2 {
    margin: 8px 0 0;

    color: white;

    font-size:
        clamp(
            32px,
            5vw,
            62px
        );

    font-weight: 300;

    letter-spacing: 4px;
}


.virtual-back-button {
    padding: 10px 14px;

    color: #e3aa3e;

    background:
        rgba(4,9,12,0.9);

    border:
        1px solid rgba(227,170,62,0.4);

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;
}


/* =========================================================
   PANEL SELECTOR
   ========================================================= */

.virtual-panel-selector {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 22px;
}


.virtual-panel-button {
    width: 55px;

    height: 42px;

    color: #859299;

    background:
        rgba(5,10,14,0.96);

    border:
        1px solid rgba(227,170,62,0.25);

    cursor: pointer;
}


.virtual-panel-button.active,
.virtual-panel-button:hover {
    color: #111;

    background: #e3aa3e;

    border-color: #e3aa3e;
}


/* =========================================================
   PANEL STAGE
   ========================================================= */

.virtual-panel-stage {
    position: relative;

    width: min(1350px, 100%);

    margin: 0 auto;

    padding: 6px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #e5c46d,
            #8c6422 35%,
            #362711 65%,
            #d2a03d
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,0.65);
}


.interactive-panel {
    display: none;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #000;
}


.interactive-panel.active {
    display: block;
}


.panel-background-video {
    display: block;

    width: 100%;

    height: auto;

    max-height: 72vh;

    object-fit: contain;

    background: #000;
}


/* =========================================================
   SHARED PANEL HOTSPOTS
   ========================================================= */

.panel-hotspot {
    position: absolute;

    z-index: 20;

    padding: 0;

    border:
        1px solid transparent;

    background:
        transparent;

    cursor: pointer;

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


.panel-hotspot:hover {
    border-color:
        rgba(227,170,62,0.9);

    background:
        rgba(227,170,62,0.06);

    box-shadow:
        0 0 24px rgba(227,170,62,0.22);
}


/* =========================================================
   PANEL 1 HOTSPOTS
   ========================================================= */

.p1-sound {
    left: 22%;
    top: 43%;

    width: 12%;
    height: 19%;
}


.p1-dialogue-1 {
    left: 52.5%;
    top: 65%;

    width: 16%;
    height: 7%;
}


.p1-dialogue-2 {
    left: 63.5%;
    top: 35%;

    width: 7%;
    height: 10%;
}


.p1-dialogue-3 {
    left: 55.5%;
    top: 78%;

    width: 7%;
    height: 17%;
}


.p1-dialogue-4 {
    left: 84%;
    top: 67%;

    width: 8%;
    height: 28%;
}


.p1-door-lever {
    left: 72.5%;
    top: 68%;

    width: 13%;
    height: 24%;
}


/* =========================================================
   PANEL 2 HOTSPOTS
   ========================================================= */

.p2-dialogue-1 {
    left: 10%;
    top: 66%;

    width: 23%;
    height: 13%;
}


.p2-dialogue-2 {
    left: 65%;
    top: 43%;

    width: 18%;
    height: 22%;
}


.p2-hover-sound {
    left: 23%;
    top: 41%;

    width: 12%;
    height: 21%;
}


.p2-sound-1 {
    left: 83%;
    top: 63%;

    width: 14%;
    height: 35%;
}


.p2-sound-2 {
    left: 69%;
    top: 84%;

    width: 14%;
    height: 12%;
}


.p2-monitor-trigger {
    left: 41%;
    top: 42%;

    width: 19%;
    height: 33%;
}


/* =========================================================
   PANEL 2 MONITOR VIDEO
   ========================================================= */

.panel2-monitor-overlay {
    display: none;

    position: absolute;

    left: 42.2%;
    top: 44.3%;

    width: 17.1%;
    height: 27.8%;

    z-index: 15;

    overflow: hidden;

    background: #000;
}


.panel2-monitor-overlay.active {
    display: block;
}


.panel2-monitor-overlay video {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================================================
   PANEL 3 HOTSPOTS
   ========================================================= */

.p3-sound {
    left: 37%;
    top: 20%;

    width: 31%;
    height: 8%;
}


.p3-dialogue-1 {
    left: 37%;
    top: 72%;

    width: 12%;
    height: 21%;
}


.p3-dialogue-2 {
    left: 57%;
    top: 74%;

    width: 14%;
    height: 21%;
}


.p3-dialogue-3 {
    left: 12%;
    top: 63%;

    width: 10%;
    height: 29%;
}


/* =========================================================
   PANEL 4 HOTSPOTS
   ========================================================= */

.p4-dialogue-1 {
    left: 42%;
    top: 38%;

    width: 19%;
    height: 28%;
}


.p4-dialogue-2 {
    left: 28%;
    top: 28%;

    width: 12%;
    height: 10%;
}


.p4-dialogue-3 {
    left: 66%;
    top: 36%;

    width: 12%;
    height: 18%;
}


.p4-dialogue-4 {
    left: 42%;
    top: 69%;

    width: 20%;
    height: 11%;
}


.p4-dialogue-5 {
    left: 40%;
    top: 83%;

    width: 14%;
    height: 10%;
}


.p4-dialogue-6 {
    left: 4%;
    top: 67%;

    width: 14%;
    height: 26%;
}


.p4-dialogue-7 {
    left: 80%;
    top: 57%;

    width: 13%;
    height: 10%;
}


.p4-sound {
    left: 56%;
    top: 69%;

    width: 13%;
    height: 11%;
}


/* =========================================================
   PANEL 5 HOTSPOTS
   ========================================================= */

.p5-sound {
    left: 54%;
    top: 43%;

    width: 15%;
    height: 12%;
}


.p5-scanner {
    left: 76%;
    top: 63%;

    width: 16%;
    height: 31%;
}


/* =========================================================
   PANEL 5 SPECIAL VIDEO
   ========================================================= */

.panel-special-video-overlay {
    display: none;

    position: absolute;

    inset: 0;

    z-index: 40;

    background: #000;
}


.panel-special-video-overlay.active {
    display: flex;

    align-items: center;

    justify-content: center;
}


.panel-special-video-overlay video {
    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #000;
}


/* =========================================================
   PANEL 6 HOTSPOTS
   ========================================================= */

.p6-dialogue-1 {
    left: 45%;
    top: 35%;

    width: 20%;
    height: 37%;
}


.p6-dialogue-2 {
    left: 43%;
    top: 22%;

    width: 21%;
    height: 11%;
}


.p6-dialogue-3 {
    left: 46%;
    top: 73%;

    width: 22%;
    height: 18%;
}


.p6-sound {
    left: 21%;
    top: 78%;

    width: 19%;
    height: 10%;
}


/* =========================================================
   SHARED INFO BOX
   ========================================================= */

.console-info-box {
    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 100;

    width: min(560px, 76%);

    padding: 16px 22px;

    box-sizing: border-box;

    transform:
        translate(-50%, 20px);

    text-align: center;

    background:
        rgba(2,8,12,0.95);

    border:
        1px solid rgba(227,170,62,0.7);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


.console-info-box.active {
    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);
}


.console-info-box span {
    display: block;

    margin-bottom: 7px;

    color: #e3aa3e;

    font-size: 9px;

    letter-spacing: 2.5px;
}


.console-info-box p {
    margin: 0;

    color: white;

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================================
   PANEL MESSAGE
   ========================================================= */

.virtual-panel-message {
    margin: 18px auto 0;

    color: #6f7c82;

    text-align: center;

    font-size: 9px;

    letter-spacing: 2px;
}


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

.virtual-exit-button {
    position: fixed;

    left: 18px;
    bottom: 18px;

    z-index: 200;

    padding: 9px 12px;

    color: #77858c;

    background:
        rgba(0,0,0,0.78);

    border:
        1px solid rgba(227,170,62,0.22);

    font-size: 9px;

    letter-spacing: 1.6px;

    cursor: pointer;
}


.virtual-exit-button:hover {
    color: #e3aa3e;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .virtual-access-panel {
        padding: 40px 22px;
    }


    .virtual-room-image-wrap,
    .virtual-tour-video-wrap {
        height: 60vh;
    }


    .virtual-room-controls {
        padding: 14px 10px 8px;
    }


    .virtual-view-button,
    .virtual-tour-button {
        min-width: 46%;

        flex-grow: 1;
    }


    .virtual-console-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .virtual-console-screen {
        padding: 30px 18px 90px;
    }


    .panel-background-video {
        max-height: 65vh;
    }


    .console-info-box {
        width: 86%;

        bottom: 12px;
    }

}
.virtual-panel-message {
    margin: 0 auto 22px;

    color: #ffffff;

    text-align: center;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.virtual-panel-selector {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}

/* =========================================================
   SHOP - SECOND EDITION FEATURED BOOK
   ========================================================= */

.shop-featured-product-second-edition {
    position: relative;

    margin-bottom: 45px;

    border:
        1px solid rgba(227,170,62,0.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.28);
}


/* =========================================================
   SECOND EDITION LABEL
   ========================================================= */

.shop-book-edition {
    margin:
        -4px 0 22px;

    color: #e3aa3e;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================================
   SECOND EDITION OPENING LINE
   ========================================================= */

.shop-book-lead {
    margin-top: 0;

    color: #ffffff;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.5;
}


/* =========================================================
   SECOND EDITION FINAL LINE
   ========================================================= */

.shop-book-closing {
    margin-top: 22px;

    color: #e3aa3e;

    font-weight: 600;

    line-height: 1.6;
}


/* =========================================================
   SECOND EDITION IMAGE
   ========================================================= */

.shop-featured-product-second-edition
.shop-featured-image img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   FIRST + SECOND EDITION SPACING
   ========================================================= */

.shop-featured-section
.shop-featured-product {
    margin-bottom: 38px;
}


.shop-featured-section
.shop-featured-product:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FEATURED BOOK COPY
   ========================================================= */

.shop-featured-copy p {
    line-height: 1.7;
}


.shop-featured-copy em {
    color: inherit;
}


.shop-featured-copy strong {
    color: #ffffff;
}


/* =========================================================
   AMAZON BUTTON SPACING
   ========================================================= */

.shop-featured-copy .console-button {
    display: inline-block;

    margin-top: 16px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .shop-featured-product-second-edition {
        margin-bottom: 32px;
    }


    .shop-book-edition {
        margin-bottom: 18px;

        font-size: 12px;

        letter-spacing: 2px;
    }


    .shop-book-lead {
        font-size: 17px;
    }

}
/* =========================================================
   SHOP - COMPACT FEATURED BOOKS
   ========================================================= */

.shop-featured-section .shop-featured-product {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    padding: 22px;

    gap: 28px;
}


/* Smaller book image */

.shop-featured-section .shop-featured-image {
    flex: 0 0 230px;

    max-width: 230px;
}


.shop-featured-section .shop-featured-image img {
    width: 100%;

    max-height: 320px;

    object-fit: contain;
}


/* More compact text */

.shop-featured-section .shop-featured-copy {
    padding: 0;
}


.shop-featured-section .shop-featured-copy h2 {
    margin-bottom: 12px;

    font-size: 28px;
}


.shop-featured-section .shop-featured-copy p {
    margin-top: 8px;
    margin-bottom: 8px;

    font-size: 14px;

    line-height: 1.55;
}


.shop-featured-section .shop-book-edition {
    margin-bottom: 12px;

    font-size: 12px;
}


.shop-featured-section .shop-book-lead {
    font-size: 16px;
}


.shop-featured-section .shop-book-closing {
    margin-top: 12px;
}


.shop-featured-section .console-button {
    margin-top: 10px;

    padding: 11px 16px;

    font-size: 10px;
}


/* Less gap between the two books */

.shop-featured-product-second-edition {
    margin-bottom: 24px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .shop-featured-section .shop-featured-product {
        max-width: 92%;

        padding: 18px;

        gap: 18px;
    }


    .shop-featured-section .shop-featured-image {
        flex: none;

        width: 170px;

        max-width: 170px;

        margin: 0 auto;
    }


    .shop-featured-section .shop-featured-image img {
        max-height: 240px;
    }


    .shop-featured-section .shop-featured-copy h2 {
        font-size: 24px;
    }

}
/* =========================================================
   MAKE ME A PROP
   ========================================================= */

.makemeaprop-section {
    padding:
        70px 5%;

    background:
        linear-gradient(
            180deg,
            rgba(4,9,12,0.98),
            rgba(1,4,6,1)
        );

    border-top:
        1px solid rgba(227,170,62,0.18);

    border-bottom:
        1px solid rgba(227,170,62,0.18);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.makemeaprop-intro {
    max-width: 1000px;

    margin:
        35px auto 50px;

    text-align: center;
}


.makemeaprop-intro > h2 {
    margin:
        8px 0 22px;

    color: #ffffff;

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

    font-weight: 300;

    letter-spacing: 3px;
}


.makemeaprop-intro > p {
    max-width: 800px;

    margin:
        14px auto;

    color: #b6c0c5;

    line-height: 1.7;
}


.makemeaprop-disclaimer {
    padding:
        14px 18px;

    color: #ffffff !important;

    background:
        rgba(227,170,62,0.08);

    border:
        1px solid rgba(227,170,62,0.35);
}


/* =========================================================
   PAINT OPTIONS
   ========================================================= */

.makemeaprop-options {
    display: grid;

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

    gap: 20px;

    margin-top: 35px;
}


.makemeaprop-option {
    padding:
        25px;

    text-align: left;

    background:
        rgba(7,14,18,0.92);

    border:
        1px solid rgba(227,170,62,0.25);
}


.makemeaprop-option span {
    color: #e3aa3e;

    font-size: 9px;

    letter-spacing: 2.5px;
}


.makemeaprop-option h3 {
    margin:
        8px 0 12px;

    color: #ffffff;

    font-size: 19px;

    letter-spacing: 1.5px;
}


.makemeaprop-option p {
    color: #aeb9be;

    line-height: 1.6;
}


.makemeaprop-option strong {
    display: block;

    margin-top: 18px;

    color: #e3aa3e;

    font-size: 20px;
}


.makemeaprop-price-note {
    margin-top: 22px !important;

    color: #7f8b90 !important;

    font-size: 12px;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.makemeaprop-grid {
    margin-top: 30px;
}


.makemeaprop-card {
    border-color:
        rgba(227,170,62,0.25);
}


.makemeaprop-card
.shop-product-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;
}


.prop-price-list {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 16px;

    padding-top: 13px;

    border-top:
        1px solid rgba(227,170,62,0.2);
}


.prop-price-list span {
    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   ENQUIRY AREA
   ========================================================= */

.makemeaprop-enquiry {
    max-width: 850px;

    margin:
        55px auto 0;

    padding:
        35px;

    text-align: center;

    background:
        rgba(7,14,18,0.9);

    border:
        1px solid rgba(227,170,62,0.3);
}


.makemeaprop-enquiry h2 {
    margin:
        8px 0 20px;

    color: #ffffff;

    font-size: 28px;

    font-weight: 300;

    letter-spacing: 2px;
}


.makemeaprop-enquiry p {
    color: #b6c0c5;

    line-height: 1.7;
}


.makemeaprop-smallprint {
    margin-top: 25px !important;

    padding-top: 20px;

    color: #7c898f !important;

    font-size: 11px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .makemeaprop-section {
        padding:
            50px 20px;
    }


    .makemeaprop-options {
        grid-template-columns: 1fr;
    }


    .makemeaprop-enquiry {
        padding:
            25px 20px;
    }

}
/* =========================================================
   CONSOLE ROOM SHOP ORDER SYSTEM
   ========================================================= */


/* =========================================================
   PRODUCT PRICE
   ========================================================= */

.shop-price {
    margin:
        18px 0 14px;

    color: #e3aa3e;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   PRODUCT ORDER CONTROLS
   ========================================================= */

.product-order-controls {
    margin-top: 18px;
}


.quantity-control {
    display: inline-flex;

    align-items: center;

    margin-right: 10px;

    border:
        1px solid rgba(227,170,62,0.35);

    background:
        rgba(0,0,0,0.35);
}


.quantity-control button {
    width: 38px;

    height: 38px;

    padding: 0;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.5);

    border: 0;

    font-size: 20px;

    cursor: pointer;
}


.quantity-control button:hover {
    background:
        rgba(227,170,62,0.12);
}


.product-quantity {
    width: 42px;

    height: 38px;

    box-sizing: border-box;

    padding: 0;

    color: #ffffff;

    background:
        transparent;

    border: 0;

    text-align: center;

    font-size: 14px;

    -moz-appearance: textfield;
}


.product-quantity::-webkit-inner-spin-button,
.product-quantity::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


.add-to-basket {
    min-height: 40px;

    padding:
        10px 16px;

    color: #111;

    background:
        linear-gradient(
            180deg,
            #efc75e,
            #b67b22
        );

    border:
        1px solid #efce77;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;
}


/* =========================================================
   FLOATING BASKET
   ========================================================= */

.floating-basket-button {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 17px;

    color: #ffffff;

    background:
        rgba(4,10,14,0.96);

    border:
        1px solid rgba(227,170,62,0.65);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.5);

    cursor: pointer;
}


.floating-basket-button span:first-child {
    color: #e3aa3e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


#basket-count {
    display: flex;

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

    min-width: 25px;

    height: 25px;

    padding:
        0 4px;

    color: #111;

    background: #e3aa3e;

    border-radius: 50%;
}


#floating-basket-total {
    color: white;

    font-weight: 700;
}


/* =========================================================
   CHECKOUT SECTION
   ========================================================= */

.shop-checkout-section {
    max-width: 1100px;

    margin:
        70px auto;

    padding:
        50px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(6,14,18,0.98),
            rgba(1,5,7,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.35);

    box-shadow:
        0 25px 55px rgba(0,0,0,0.4);
}


.shop-checkout-section > h2 {
    margin:
        8px 0 12px;

    color: #ffffff;

    font-size:
        clamp(
            32px,
            5vw,
            52px
        );

    font-weight: 300;

    letter-spacing: 3px;
}


.checkout-intro {
    margin-bottom: 35px;

    color: #aeb9be;

    line-height: 1.7;
}


/* =========================================================
   CHECKOUT BASKET
   ========================================================= */

.checkout-basket {
    margin-bottom: 45px;

    padding: 25px;

    background:
        rgba(0,0,0,0.32);

    border:
        1px solid rgba(255,255,255,0.08);
}


.checkout-basket h3 {
    margin-top: 0;

    color: #e3aa3e;

    font-size: 14px;

    letter-spacing: 2px;
}


.basket-empty-message {
    color: #77858c;
}


.basket-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        100px
        auto;

    align-items: center;

    gap: 16px;

    padding:
        15px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.basket-item-details {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.basket-item-details strong {
    color: #ffffff;
}


.basket-item-details span {
    color: #76858c;

    font-size: 12px;
}


.basket-item-controls {
    display: flex;

    align-items: center;

    gap: 9px;
}


.basket-item-controls button {
    width: 28px;

    height: 28px;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.5);

    border:
        1px solid rgba(227,170,62,0.3);

    cursor: pointer;
}


.basket-line-total {
    color: #ffffff;

    text-align: right;
}


.basket-remove {
    padding:
        6px 8px;

    color: #8d999f;

    background: none;

    border:
        1px solid rgba(255,255,255,0.12);

    font-size: 8px;

    letter-spacing: 1px;

    cursor: pointer;
}


.basket-remove:hover {
    color: #ffffff;

    border-color:
        rgba(227,170,62,0.5);
}


/* =========================================================
   BASKET SUMMARY
   ========================================================= */

.basket-summary {
    margin-top: 22px;

    margin-left: auto;

    max-width: 380px;
}


.basket-summary > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px 0;

    color: #9ca8ae;
}


.basket-total-row {
    margin-top: 8px;

    padding-top: 15px !important;

    color: #ffffff !important;

    border-top:
        1px solid rgba(227,170,62,0.4);
}


.basket-total-row strong {
    color: #e3aa3e;

    font-size: 22px;
}


/* =========================================================
   ORDER FORM
   ========================================================= */

.console-order-form fieldset {
    margin:
        0 0 35px;

    padding:
        28px;

    border:
        1px solid rgba(227,170,62,0.22);

    background:
        rgba(0,0,0,0.2);
}


.console-order-form legend {
    padding:
        0 12px;

    color: #e3aa3e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   FULFILMENT OPTIONS
   ========================================================= */

.checkout-choice {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin:
        12px 0;

    padding:
        18px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        rgba(3,8,11,0.65);

    cursor: pointer;
}


.checkout-choice:hover {
    border-color:
        rgba(227,170,62,0.4);
}


.checkout-choice input {
    margin-top: 4px;

    accent-color: #e3aa3e;
}


.checkout-choice span {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.checkout-choice strong {
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 1px;
}


.checkout-choice small {
    color: #89969c;
}


/* =========================================================
   CONDITIONAL FIELDS
   ========================================================= */

.conditional-field {
    display: none;
}


.conditional-field.active {
    display: block;
}


#collection-date-wrap {
    margin-top: 20px;
}


#collection-date-wrap label {
    display: block;

    margin-bottom: 8px;

    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.checkout-form-grid {
    display: grid;

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

    gap: 18px;
}


.checkout-field-wide {
    grid-column:
        1 / -1;
}


.checkout-field label {
    display: block;

    margin-bottom: 7px;

    color: #aeb8bd;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.checkout-field input,
#visit-date {
    width: 100%;

    box-sizing: border-box;

    padding:
        13px 14px;

    color: #ffffff;

    background:
        rgba(0,0,0,0.45);

    border:
        1px solid rgba(227,170,62,0.25);

    font-size: 14px;

    outline: none;
}


.checkout-field input:focus,
#visit-date:focus {
    border-color:
        rgba(227,170,62,0.75);
}


.checkout-field small {
    display: block;

    margin-top: 5px;

    color: #69777d;

    font-size: 9px;
}


/* =========================================================
   COLLECTION VALIDATION
   ========================================================= */

.checkout-field-message {
    margin-top: 8px;

    font-size: 11px;
}


.checkout-field-message.error {
    color: #ff8080;
}


.checkout-field-message.success {
    color: #b9e67f;
}


/* =========================================================
   UK DELIVERY NOTICE
   ========================================================= */

.checkout-uk-only {
    padding:
        12px 15px;

    color: #e3aa3e;

    background:
        rgba(227,170,62,0.07);

    border:
        1px solid rgba(227,170,62,0.2);

    font-size: 11px;
}


/* =========================================================
   TERMS
   ========================================================= */

.checkout-terms-box {
    max-height: 220px;

    overflow-y: auto;

    margin-bottom: 22px;

    padding:
        18px;

    color: #88959b;

    background:
        rgba(0,0,0,0.34);

    border:
        1px solid rgba(255,255,255,0.07);

    font-size: 11px;

    line-height: 1.6;
}


.checkout-terms-box a,
.checkout-checkbox a {
    color: #e3aa3e;
}


.checkout-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        14px 0;

    color: #b2bcc1;

    font-size: 12px;

    line-height: 1.5;
}


.checkout-checkbox input {
    margin-top: 3px;

    accent-color: #e3aa3e;
}


/* =========================================================
   CHECKOUT ERROR
   ========================================================= */

.checkout-error {
    min-height: 20px;

    margin:
        20px 0;

    color: #ff8585;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   SUBMIT ORDER
   ========================================================= */

.submit-order-button {
    width: 100%;

    padding:
        17px 22px;

    color: #111;

    background:
        linear-gradient(
            180deg,
            #f0ca67,
            #b47720
        );

    border:
        1px solid #f2d27c;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;
}


.submit-order-button:hover {
    filter:
        brightness(1.08);
}


.submit-order-button:disabled {
    opacity: 0.5;

    cursor: wait;
}


/* =========================================================
   ORDER CONFIRMATION
   ========================================================= */

.order-confirmation {
    display: none;

    max-width: 900px;

    margin:
        70px auto;

    padding:
        50px;

    box-sizing: border-box;

    text-align: center;

    background:
        rgba(5,12,16,0.98);

    border:
        1px solid rgba(227,170,62,0.5);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5);
}


.order-confirmation.active {
    display: block;
}


.order-confirmation > h2 {
    color: #ffffff;

    font-size:
        clamp(
            36px,
            6vw,
            60px
        );

    font-weight: 300;

    letter-spacing: 4px;
}


.confirmation-reference {
    margin:
        30px auto;

    padding:
        22px;

    background:
        #020506;

    border:
        1px solid rgba(227,170,62,0.35);
}


.confirmation-reference span {
    display: block;

    margin-bottom: 8px;

    color: #89969b;

    font-size: 9px;

    letter-spacing: 2px;
}


.confirmation-reference strong {
    color: #e3aa3e;

    font-size: 24px;

    letter-spacing: 2px;
}


#confirmation-order-summary {
    margin:
        30px 0;

    text-align: left;

    color: #bdc6ca;
}


#confirmation-order-summary pre {
    white-space: pre-wrap;

    color: #ffffff;

    font-family: inherit;

    line-height: 1.8;
}


.confirmation-grand-total {
    margin-top: 25px;

    padding-top: 18px;

    font-size: 20px;

    border-top:
        1px solid rgba(227,170,62,0.35);
}


.confirmation-grand-total strong {
    color: #e3aa3e;
}


/* =========================================================
   PAYMENT REQUIRED
   ========================================================= */

.payment-required-panel {
    margin-top: 35px;

    padding:
        30px;

    background:
        rgba(227,170,62,0.08);

    border:
        2px solid rgba(227,170,62,0.65);
}


.payment-required-panel h3 {
    margin-top: 0;

    color: #e3aa3e;

    font-size: 22px;

    letter-spacing: 2px;
}


.payment-required-panel p {
    color: #ffffff;

    line-height: 1.6;
}


.paypal-order-button {
    display: inline-block;

    margin-top: 15px;

    padding:
        15px 28px;

    color: #ffffff;

    background: #0070ba;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 4px;
}


.paypal-order-button:hover {
    filter:
        brightness(1.08);
}


.confirmation-email-message {
    margin-top: 25px;

    color: #89969b;

    font-size: 12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .product-order-controls {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .quantity-control {
        width: fit-content;
    }


    .add-to-basket {
        width: 100%;
    }


    .floating-basket-button {
        right: 10px;
        bottom: 10px;
    }


    .shop-checkout-section,
    .order-confirmation {
        width: calc(100% - 24px);

        margin:
            40px auto;

        padding:
            28px 18px;
    }


    .basket-item {
        grid-template-columns:
            1fr auto;

        gap: 10px;
    }


    .basket-line-total {
        text-align: left;
    }


    .checkout-form-grid {
        grid-template-columns:
            1fr;
    }


    .checkout-field-wide {
        grid-column: auto;
    }


    .console-order-form fieldset {
        padding:
            20px 15px;
    }

}
/* =========================================================
   MAKE ME A PROP SECTION
   ========================================================= */

.makemeaprop-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 25px;
    box-sizing: border-box;
}


.makemeaprop-intro {
    max-width: 900px;
    margin: 35px auto 45px;
    padding: 35px;
    background: rgba(4, 10, 14, 0.75);
    border: 1px solid rgba(227, 170, 62, 0.25);
}


.makemeaprop-intro h2 {
    margin: 8px 0 20px;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 300;
    letter-spacing: 2px;
}


.makemeaprop-intro p {
    color: #aeb9be;
    line-height: 1.7;
}


.makemeaprop-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 28px;
}


.makemeaprop-prices > div {
    padding: 20px;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(227,170,62,0.25);
}


.makemeaprop-prices span {
    display: block;
    margin-bottom: 8px;
    color: #8e9aa0;
    font-size: 10px;
    letter-spacing: 2px;
}


.makemeaprop-prices strong {
    color: #e3aa3e;
    font-size: 24px;
}


.makemeaprop-postage {
    text-align: center;
    font-size: 11px;
}


.makemeaprop-card-price {
    margin-top: 15px;
    color: #e3aa3e !important;
    font-weight: 700;
    line-height: 1.7 !important;
}


/* =========================================================
   MAKE ME A PROP ENQUIRY
   ========================================================= */

.makemeaprop-enquiry {
    max-width: 900px;
    margin: 65px auto 0;
    padding: 45px;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        rgba(6,14,18,0.98),
        rgba(1,5,7,0.99)
    );
    border: 1px solid rgba(227,170,62,0.4);
}


.makemeaprop-enquiry > h2 {
    margin: 8px 0 15px;
    color: #ffffff;
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 300;
    letter-spacing: 3px;
}


.makemeaprop-enquiry-intro {
    color: #aeb9be;
    line-height: 1.7;
}


.makemeaprop-reminder {
    margin: 25px 0;
    padding: 18px;
    color: #d9e0e3;
    background: rgba(227,170,62,0.08);
    border: 1px solid rgba(227,170,62,0.3);
    font-size: 12px;
    line-height: 1.6;
}


.makemeaprop-reminder strong {
    color: #e3aa3e;
}


.makemeaprop-form {
    margin-top: 30px;
}


.makemeaprop-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 160px;
    padding: 14px;
    resize: vertical;
    color: #ffffff;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(227,170,62,0.25);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}


.makemeaprop-form textarea:focus {
    border-color: rgba(227,170,62,0.75);
}


.makemeaprop-form textarea::placeholder {
    color: #657278;
}


.makemeaprop-success {
    display: none;
    margin-top: 30px;
    padding: 30px;
    text-align: center;
    background: rgba(227,170,62,0.08);
    border: 1px solid rgba(227,170,62,0.5);
}


.makemeaprop-success.active {
    display: block;
}


.makemeaprop-success h3 {
    margin-top: 0;
    color: #e3aa3e;
    letter-spacing: 2px;
}


.makemeaprop-success p {
    color: #c2cbcf;
    line-height: 1.7;
}


@media (max-width: 700px) {

    .makemeaprop-intro,
    .makemeaprop-enquiry {
        padding: 25px 18px;
    }

    .makemeaprop-prices {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   SHOP - FEATURED BOOKS
   ========================================================= */

.shop-featured-product-second-edition {
    position: relative;

    border:
        1px solid rgba(227,170,62,0.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.28);
}


.shop-book-edition {
    margin:
        -4px 0 12px;

    color: #e3aa3e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.shop-book-lead {
    margin-top: 0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;
}


.shop-book-closing {
    margin-top: 12px;

    color: #e3aa3e;

    font-weight: 600;

    line-height: 1.6;
}


/* =========================================================
   COMPACT FEATURED BOOKS
   ========================================================= */

.shop-featured-section .shop-featured-product {
    max-width: 900px;

    margin:
        0 auto 24px;

    padding: 22px;

    gap: 28px;
}


.shop-featured-section .shop-featured-image {
    flex:
        0 0 230px;

    max-width: 230px;
}


.shop-featured-section
.shop-featured-image img {
    display: block;

    width: 100%;

    max-height: 320px;

    object-fit: contain;
}


.shop-featured-section
.shop-featured-copy {
    padding: 0;
}


.shop-featured-section
.shop-featured-copy h2 {
    margin-bottom: 12px;

    font-size: 28px;
}


.shop-featured-section
.shop-featured-copy p {
    margin:
        8px 0;

    font-size: 14px;

    line-height: 1.55;
}


.shop-featured-section
.shop-featured-copy .console-button {
    display: inline-block;

    margin-top: 10px;

    padding:
        11px 16px;

    font-size: 10px;
}


/* =========================================================
   ORDERABLE PRODUCT PRICE
   ========================================================= */

.shop-price {
    margin:
        18px 0 14px;

    color: #e3aa3e;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   PRODUCT ORDER CONTROLS
   ========================================================= */

.product-order-controls {
    margin-top: 18px;
}


.quantity-control {
    display: inline-flex;

    align-items: center;

    margin-right: 10px;

    border:
        1px solid rgba(227,170,62,0.35);

    background:
        rgba(0,0,0,0.35);
}


.quantity-control button {
    width: 38px;

    height: 38px;

    padding: 0;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.5);

    border: 0;

    font-size: 20px;

    cursor: pointer;
}


.quantity-control button:hover {
    background:
        rgba(227,170,62,0.12);
}


.product-quantity {
    width: 42px;

    height: 38px;

    box-sizing: border-box;

    padding: 0;

    color: #ffffff;

    background:
        transparent;

    border: 0;

    text-align: center;

    font-size: 14px;

    -moz-appearance:
        textfield;
}


.product-quantity::-webkit-inner-spin-button,
.product-quantity::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance:
        none;
}


.add-to-basket {
    min-height: 40px;

    padding:
        10px 16px;

    color: #111;

    background:
        linear-gradient(
            180deg,
            #efc75e,
            #b67b22
        );

    border:
        1px solid #efce77;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;
}


.add-to-basket:hover {
    filter:
        brightness(1.08);
}


/* =========================================================
   FLOATING BASKET
   ========================================================= */

.floating-basket-button {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 17px;

    color: #ffffff;

    background:
        rgba(4,10,14,0.96);

    border:
        1px solid rgba(227,170,62,0.65);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.5);

    cursor: pointer;
}


.floating-basket-button
span:first-child {
    color: #e3aa3e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


#basket-count {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 25px;

    height: 25px;

    padding:
        0 4px;

    color: #111;

    background:
        #e3aa3e;

    border-radius: 50%;
}


#floating-basket-total {
    color: #ffffff;

    font-weight: 700;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.shop-checkout-section {
    max-width: 1100px;

    margin:
        70px auto;

    padding: 50px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(6,14,18,0.98),
            rgba(1,5,7,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.35);

    box-shadow:
        0 25px 55px rgba(0,0,0,0.4);
}


.shop-checkout-section > h2 {
    margin:
        8px 0 12px;

    color: #ffffff;

    font-size:
        clamp(
            32px,
            5vw,
            52px
        );

    font-weight: 300;

    letter-spacing: 3px;
}


.checkout-intro {
    margin-bottom: 35px;

    color: #aeb9be;

    line-height: 1.7;
}


/* =========================================================
   BASKET
   ========================================================= */

.checkout-basket {
    margin-bottom: 45px;

    padding: 25px;

    background:
        rgba(0,0,0,0.32);

    border:
        1px solid rgba(255,255,255,0.08);
}


.checkout-basket h3 {
    margin-top: 0;

    color: #e3aa3e;

    font-size: 14px;

    letter-spacing: 2px;
}


.basket-empty-message {
    color: #77858c;
}


.basket-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        100px
        auto;

    align-items: center;

    gap: 16px;

    padding:
        15px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.basket-item-details {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.basket-item-details strong {
    color: #ffffff;
}


.basket-item-details span {
    color: #76858c;

    font-size: 12px;
}


.basket-item-controls {
    display: flex;

    align-items: center;

    gap: 9px;
}


.basket-item-controls button {
    width: 28px;

    height: 28px;

    color: #e3aa3e;

    background:
        rgba(0,0,0,0.5);

    border:
        1px solid rgba(227,170,62,0.3);

    cursor: pointer;
}


.basket-line-total {
    color: #ffffff;

    text-align: right;
}


.basket-remove {
    padding:
        6px 8px;

    color: #8d999f;

    background:
        none;

    border:
        1px solid rgba(255,255,255,0.12);

    font-size: 8px;

    letter-spacing: 1px;

    cursor: pointer;
}


.basket-remove:hover {
    color: #ffffff;

    border-color:
        rgba(227,170,62,0.5);
}


/* =========================================================
   BASKET SUMMARY
   ========================================================= */

.basket-summary {
    max-width: 380px;

    margin:
        22px 0 0 auto;
}


.basket-summary > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px 0;

    color: #9ca8ae;
}


.basket-total-row {
    margin-top: 8px;

    padding-top:
        15px !important;

    color:
        #ffffff !important;

    border-top:
        1px solid rgba(227,170,62,0.4);
}


.basket-total-row strong {
    color: #e3aa3e;

    font-size: 22px;
}


/* =========================================================
   ORDER FORM
   ========================================================= */

.console-order-form fieldset {
    margin:
        0 0 35px;

    padding: 28px;

    border:
        1px solid rgba(227,170,62,0.22);

    background:
        rgba(0,0,0,0.2);
}


.console-order-form legend {
    padding:
        0 12px;

    color: #e3aa3e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   FULFILMENT OPTIONS
   ========================================================= */

.checkout-choice {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin:
        12px 0;

    padding: 18px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        rgba(3,8,11,0.65);

    cursor: pointer;
}


.checkout-choice:hover {
    border-color:
        rgba(227,170,62,0.4);
}


.checkout-choice input {
    margin-top: 4px;

    accent-color:
        #e3aa3e;
}


.checkout-choice span {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.checkout-choice strong {
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 1px;
}


.checkout-choice small {
    color: #89969c;
}


/* =========================================================
   COLLECTION DATE
   ========================================================= */

.conditional-field {
    display: none;
}


.conditional-field.active {
    display: block;
}


#collection-date-wrap {
    margin-top: 20px;
}


#collection-date-wrap label {
    display: block;

    margin-bottom: 8px;

    color: #e3aa3e;

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.checkout-form-grid {
    display: grid;

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

    gap: 18px;
}


.checkout-field-wide {
    grid-column:
        1 / -1;
}


.checkout-field label {
    display: block;

    margin-bottom: 7px;

    color: #aeb8bd;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.checkout-field input,
#visit-date {
    width: 100%;

    box-sizing: border-box;

    padding:
        13px 14px;

    color: #ffffff;

    background:
        rgba(0,0,0,0.45);

    border:
        1px solid rgba(227,170,62,0.25);

    font-size: 14px;

    outline: none;
}


.checkout-field input:focus,
#visit-date:focus {
    border-color:
        rgba(227,170,62,0.75);
}


.checkout-field small {
    display: block;

    margin-top: 5px;

    color: #69777d;

    font-size: 9px;
}


.checkout-address-note {
    margin-top: 18px;

    color: #758289;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   COLLECTION DATE MESSAGES
   ========================================================= */

.checkout-field-message {
    margin-top: 8px;

    font-size: 11px;
}


.checkout-field-message.error {
    color: #ff8080;
}


.checkout-field-message.success {
    color: #b9e67f;
}


/* =========================================================
   UK DELIVERY NOTICE
   ========================================================= */

.checkout-uk-only {
    margin-top: 22px;

    padding:
        12px 15px;

    color: #e3aa3e;

    background:
        rgba(227,170,62,0.07);

    border:
        1px solid rgba(227,170,62,0.2);

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   TERMS
   ========================================================= */

.checkout-terms-box {
    max-height: 220px;

    overflow-y: auto;

    margin-bottom: 22px;

    padding: 18px;

    color: #88959b;

    background:
        rgba(0,0,0,0.34);

    border:
        1px solid rgba(255,255,255,0.07);

    font-size: 11px;

    line-height: 1.6;
}


.checkout-terms-box a,
.checkout-checkbox a {
    color: #e3aa3e;
}


.checkout-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        14px 0;

    color: #b2bcc1;

    font-size: 12px;

    line-height: 1.5;
}


.checkout-checkbox input {
    margin-top: 3px;

    accent-color:
        #e3aa3e;
}


/* =========================================================
   ERROR
   ========================================================= */

.checkout-error {
    min-height: 20px;

    margin:
        20px 0;

    color: #ff8585;

    font-size: 12px;

    font-weight: 600;
}


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

.submit-order-button {
    width: 100%;

    padding:
        17px 22px;

    color: #111;

    background:
        linear-gradient(
            180deg,
            #f0ca67,
            #b47720
        );

    border:
        1px solid #f2d27c;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;
}


.submit-order-button:hover {
    filter:
        brightness(1.08);
}


.submit-order-button:disabled {
    opacity: 0.5;

    cursor: wait;
}


/* =========================================================
   ORDER CONFIRMATION
   ========================================================= */

.order-confirmation {
    display: none;

    max-width: 900px;

    margin:
        70px auto;

    padding: 50px;

    box-sizing: border-box;

    text-align: center;

    background:
        rgba(5,12,16,0.98);

    border:
        1px solid rgba(227,170,62,0.5);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5);
}


.order-confirmation.active {
    display: block;
}


.order-confirmation > h2 {
    color: #ffffff;

    font-size:
        clamp(
            36px,
            6vw,
            60px
        );

    font-weight: 300;

    letter-spacing: 4px;
}


.confirmation-reference {
    margin:
        30px auto;

    padding: 22px;

    background:
        #020506;

    border:
        1px solid rgba(227,170,62,0.35);
}


.confirmation-reference span {
    display: block;

    margin-bottom: 8px;

    color: #89969b;

    font-size: 9px;

    letter-spacing: 2px;
}


.confirmation-reference strong {
    color: #e3aa3e;

    font-size: 24px;

    letter-spacing: 2px;
}


#confirmation-order-summary {
    margin:
        30px 0;

    text-align: left;

    color: #bdc6ca;
}


#confirmation-order-summary pre {
    white-space: pre-wrap;

    color: #ffffff;

    font-family: inherit;

    line-height: 1.8;
}


.confirmation-grand-total {
    margin-top: 25px;

    padding-top: 18px;

    font-size: 20px;

    border-top:
        1px solid rgba(227,170,62,0.35);
}


.confirmation-grand-total strong {
    color: #e3aa3e;
}


/* =========================================================
   PAYPAL
   ========================================================= */

.payment-required-panel {
    margin-top: 35px;

    padding: 30px;

    background:
        rgba(227,170,62,0.08);

    border:
        2px solid rgba(227,170,62,0.65);
}


.payment-required-panel h3 {
    margin-top: 0;

    color: #e3aa3e;

    font-size: 22px;

    letter-spacing: 2px;
}


.payment-required-panel p {
    color: #ffffff;

    line-height: 1.6;
}


.paypal-order-button {
    display: inline-block;

    margin-top: 15px;

    padding:
        15px 28px;

    color: #ffffff;

    background:
        #0070ba;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 4px;
}


.paypal-order-button:hover {
    filter:
        brightness(1.08);
}


.confirmation-email-message {
    margin-top: 25px;

    color: #89969b;

    font-size: 12px;
}


/* =========================================================
   MAKE ME A PROP
   ========================================================= */

.makemeaprop-section {
    max-width: 1200px;

    margin:
        90px auto;

    padding:
        0 25px;

    box-sizing: border-box;
}


.makemeaprop-intro {
    max-width: 900px;

    margin:
        35px auto 50px;

    padding: 35px;

    box-sizing: border-box;

    text-align: center;

    background:
        rgba(4,10,14,0.75);

    border:
        1px solid rgba(227,170,62,0.25);
}


.makemeaprop-intro h2 {
    margin:
        8px 0 20px;

    color: #ffffff;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight: 300;

    letter-spacing: 2px;
}


.makemeaprop-intro p {
    color: #aeb9be;

    line-height: 1.7;
}


.makemeaprop-intro strong {
    color: #ffffff;
}


/* =========================================================
   MAKE ME A PROP PRICES
   ========================================================= */

.makemeaprop-prices {
    display: grid;

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

    gap: 15px;

    margin-top: 28px;
}


.makemeaprop-prices > div {
    padding: 20px;

    text-align: center;

    background:
        rgba(0,0,0,0.35);

    border:
        1px solid rgba(227,170,62,0.25);
}


.makemeaprop-prices span {
    display: block;

    margin-bottom: 8px;

    color: #8e9aa0;

    font-size: 10px;

    letter-spacing: 2px;
}


.makemeaprop-prices strong {
    color: #e3aa3e;

    font-size: 24px;
}


.makemeaprop-postage {
    margin-top:
        18px !important;

    text-align: center;

    font-size:
        11px !important;
}


.makemeaprop-card-price {
    margin-top: 15px;

    color:
        #e3aa3e !important;

    font-weight: 700;

    line-height:
        1.7 !important;
}


/* =========================================================
   MAKE ME A PROP ENQUIRY
   ========================================================= */

.makemeaprop-enquiry {
    max-width: 900px;

    margin:
        65px auto 0;

    padding: 45px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(6,14,18,0.98),
            rgba(1,5,7,0.99)
        );

    border:
        1px solid rgba(227,170,62,0.4);
}


.makemeaprop-enquiry > h2 {
    margin:
        8px 0 15px;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            5vw,
            48px
        );

    font-weight: 300;

    letter-spacing: 3px;
}


.makemeaprop-enquiry-intro {
    color: #aeb9be;

    line-height: 1.7;
}


.makemeaprop-reminder {
    margin:
        25px 0;

    padding: 18px;

    color: #d9e0e3;

    background:
        rgba(227,170,62,0.08);

    border:
        1px solid rgba(227,170,62,0.3);

    font-size: 12px;

    line-height: 1.6;
}


.makemeaprop-reminder strong {
    color: #e3aa3e;
}


.makemeaprop-form {
    margin-top: 30px;
}


.makemeaprop-form textarea {
    width: 100%;

    min-height: 160px;

    box-sizing: border-box;

    padding: 14px;

    resize: vertical;

    color: #ffffff;

    background:
        rgba(0,0,0,0.45);

    border:
        1px solid rgba(227,170,62,0.25);

    font-family: inherit;

    font-size: 14px;

    line-height: 1.6;

    outline: none;
}


.makemeaprop-form textarea:focus {
    border-color:
        rgba(227,170,62,0.75);
}


.makemeaprop-form textarea::placeholder {
    color: #657278;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {


    .shop-featured-section
    .shop-featured-product {
        max-width: 92%;

        padding: 18px;

        gap: 18px;
    }


    .shop-featured-section
    .shop-featured-image {
        flex: none;

        width: 170px;

        max-width: 170px;

        margin:
            0 auto;
    }


    .shop-featured-section
    .shop-featured-image img {
        max-height: 240px;
    }


    .shop-featured-section
    .shop-featured-copy h2 {
        font-size: 24px;
    }


    .product-order-controls {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .quantity-control {
        width:
            fit-content;
    }


    .add-to-basket {
        width: 100%;
    }


    .floating-basket-button {
        right: 10px;

        bottom: 10px;
    }


    .shop-checkout-section,
    .order-confirmation {
        width:
            calc(100% - 24px);

        margin:
            40px auto;

        padding:
            28px 18px;
    }


    .basket-item {
        grid-template-columns:
            1fr auto;

        gap: 10px;
    }


    .basket-line-total {
        text-align: left;
    }


    .checkout-form-grid {
        grid-template-columns:
            1fr;
    }


    .checkout-field-wide {
        grid-column: auto;
    }


    .console-order-form fieldset {
        padding:
            20px 15px;
    }


    .makemeaprop-section {
        padding:
            0 12px;
    }


    .makemeaprop-intro,
    .makemeaprop-enquiry {
        padding:
            25px 18px;
    }


    .makemeaprop-prices {
        grid-template-columns:
            1fr;
    }

}
/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-button {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            14px 18px;
    }


    .site-logo {
        position: relative;

        z-index: 1002;
    }


    .site-logo img {
        max-width: 220px;

        height: auto;
    }


    .mobile-menu-button {
        display: block;

        position: relative;

        z-index: 1002;

        padding:
            10px 14px;

        color: #e3aa3e;

        background:
            rgba(0,0,0,0.75);

        border:
            1px solid rgba(227,170,62,0.55);

        font-size: 10px;

        font-weight: 700;

        letter-spacing: 2px;

        cursor: pointer;
    }


    .main-nav {
        display: none;

        position: absolute;

        left: 0;
        right: 0;
        top: 100%;

        z-index: 1001;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            12px 18px 20px;

        background:
            rgba(2,6,8,0.98);

        border-top:
            1px solid rgba(227,170,62,0.25);

        border-bottom:
            1px solid rgba(227,170,62,0.35);

        box-shadow:
            0 15px 30px rgba(0,0,0,0.45);
    }


    .main-nav.mobile-open {
        display: flex;
    }


    .main-nav a {
        display: block;

        width: 100%;

        box-sizing: border-box;

        padding:
            14px 10px;

        color: #ffffff;

        border-bottom:
            1px solid rgba(255,255,255,0.08);

        text-align: left;
    }


    .main-nav .book-button {
        margin-top: 10px;

        text-align: center;

        border:
            1px solid rgba(227,170,62,0.55);
    }

}
/* =========================================================
   MOBILE NAVIGATION - FINAL OVERRIDE
   ========================================================= */

.mobile-menu-button {
    display: none;
}

@media screen and (max-width: 900px) {

    .site-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 18px 22px !important;
    }


    .site-logo {
        display: block !important;
        position: relative !important;
        z-index: 1002 !important;
    }


    .site-logo img {
        display: block !important;
        width: 220px !important;
        max-width: 55vw !important;
        height: auto !important;
    }


    .mobile-menu-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        z-index: 9999 !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        width: auto !important;
        height: auto !important;

        padding: 11px 14px !important;
        margin: 0 !important;

        background: #111 !important;
        color: #ffffff !important;

        border: 1px solid #d9a441 !important;
        border-radius: 4px !important;

        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
        letter-spacing: 1.5px !important;

        cursor: pointer !important;
    }


    .hamburger-icon {
        display: inline-block !important;
        color: #d9a441 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }


    .main-nav {
        display: none !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 9998 !important;

        flex-direction: column !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 12px 20px 20px !important;

        background: rgba(0, 0, 0, 0.98) !important;

        border-top: 1px solid rgba(217, 164, 65, 0.4) !important;
        border-bottom: 1px solid rgba(217, 164, 65, 0.4) !important;
    }


    .main-nav.mobile-open {
        display: flex !important;
    }


    .main-nav a {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 15px 18px !important;

    color: #000000 !important;

    text-align: left !important;
    text-decoration: none !important;

    font-weight: 700 !important;

    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
}


    .main-nav .book-button {
    margin-top: 10px !important;

    text-align: center !important;

    color: #ffffff !important;

    background: #b51f24 !important;

    border: 1px solid #e04a4f !important;

    font-weight: 800 !important;

    letter-spacing: 1.5px !important;
}

}