/* =====================================================
   Backroom Laser & Design — Launch Page v6.5
   Desktop measuring canvas: 1440 × 1800
   ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Amaranth:wght@400&display=swap");

/*
==========================================================
VERSION 1.0 – LAYOUT BASELINE APPROVED
Phase 1 Complete

The current layout is the approved starting point for polish.

Do not make unsolicited layout changes.

Limited position, spacing, or sizing adjustments may be made later when required by:
- New visual styling
- Typography changes
- Responsive behavior
- Accessibility
- Bug fixes
- Explicit user instructions

Preserve the overall composition and modify only the affected elements.
==========================================================
*/

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

:root {
    --blue: #009cff;
    --electric-blue: #0700ff;
    --page-gray: #a6a6a6;
    --black: #050505;
    --white: #ffffff;
    --soft-text: #9b9b9b;
    --floating-elevation-shadow: 10px 12px 18px 0 rgb(26 26 26 / .48);
    --aluminum-rail-background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, rgb(0 0 0 / .055) 1px 4px),
        linear-gradient(180deg, transparent 10%, rgb(255 255 255 / .06) 25%, rgb(255 255 255 / .28) 44%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / .28) 56%, rgb(255 255 255 / .06) 75%, transparent 90%),
        linear-gradient(180deg, #5f6265 0%, #7b7e81 20%, #9a9c9e 48%, #737679 66%, #34373a 100%);
    --aluminum-rail-shadow:
        inset 0 1px 0 rgb(255 255 255 / .34),
        inset 0 -2px 2px rgb(0 0 0 / .72),
        0 1px 2px rgb(0 0 0 / .62);
}

html {
    scroll-behavior: auto;
}

body {
    min-width: 320px;
    background-color: #242424;
    /* Experimental - Retained for Reference
    background-image:
        linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)),
        url("../images/backgrounds/black-slate-texture.webp");
    background-blend-mode: normal, multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    */
    color: var(--black);
    font-family: Arial, Helvetica, sans-serif;
}

.page-shell {
    width: 100%;
    max-width: none;
    min-height: 1800px;
    margin: 0 auto;
    overflow: hidden;
    /* Experimental - Retained for Reference
    background-color: #242424;
    background-image:
        linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)),
        url("../images/backgrounds/black-slate-texture.webp");
    background-blend-mode: normal, multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    */
    background-color: #242424;
    background-image: url("../images/backgrounds/dark-grey-texture-background.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ==========================================================
   LOCKED SECTION – VERSION 1.0
   Navigation & Hero
   Status: DESIGN APPROVED
   Do not modify unless specifically instructed.
   ========================================================== */

.hero {
    --hero-beam-y: 180px;
    --logo-panel-left: 30.1%;
    --logo-panel-right: 69.45%;
    --header-vignette-opacity: .60;
    position: relative;
    isolation: isolate;
    height: 380px;
    padding-top: 0;
    text-align: center;
    background-color: rgb(0 0 0 / .10);
    background-image:
        radial-gradient(ellipse 900px 500px at center, rgba(0, 0, 0, var(--header-vignette-opacity)) 0%, rgba(0, 0, 0, .21) 35%, rgba(0, 0, 0, .11) 65%, rgba(0, 0, 0, 0) 100%),
        url("../images/backgrounds/black-slate-texture.webp");
    background-blend-mode: normal, multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Experimental - Retained for Reference
.hero::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgb(0 156 255 / .04) 45%, rgb(0 156 255 / .16) 100%);
}
*/

.hero::before {
    content: "";
    display: none;
    position: absolute;
    z-index: 0;
    top: calc(var(--hero-beam-y) - 20px);
    right: 25px;
    left: 25px;
    height: 40px;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgb(0 156 255 / .90) 0, rgb(0 156 255 / .48) 5%, transparent 22%);
}

.hero-beam {
    display: none;
    position: absolute;
    z-index: 0;
    top: calc(var(--hero-beam-y) - 2.4224243px);
    height: 4.8448486px;
    pointer-events: none;
    background-image: url("../images/hero/teal_laser_beam");
    background-size: 324.38% 100%;
    background-repeat: no-repeat;
}

.hero-beam-left {
    right: calc(100% - var(--logo-panel-left));
    left: 25px;
    background-position: left center;
}

.hero-beam-right {
    right: 25px;
    left: var(--logo-panel-right);
    background-position: right center;
}

.hero-logo-stack {
    position: relative;
    display: block;
    z-index: 1;
    width: 100%;
    height: 390px;
    aspect-ratio: 516 / 199;
}

.hero-blue-band,
.hero-logo {
    position: absolute;
    display: block;
    height: auto;
    object-fit: contain;
}

.hero-blue-band {
    z-index: 0;
    inset: 0;
    width: 100%;
    opacity: 1;
    transform: translateY(6px) scaleY(1.12);
    visibility: visible;
}

.hero-logo {
    z-index: 1;
    top: 21.6%;
    left: 50%;
    width: 34.1%;
    transform: translateX(-50%);
}

@media (min-width: 1001px) {
    .hero {
        border-bottom: 9px solid transparent;
    }

    /* Experimental - Retained for Reference
    .hero::after {
        content: "";
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: -9px;
        left: 0;
        height: 9px;
        pointer-events: none;
        background-image:
            radial-gradient(ellipse 55% 130% at 50% 50%, rgb(50 205 255 / .28) 0%, transparent 72%),
            linear-gradient(
                to bottom,
                transparent 0%,
                rgb(0 72 255 / .10) 18%,
                rgb(0 145 255 / .38) 38%,
                rgb(71 218 255 / .92) 47%,
                rgb(8 80 255 / .86) 50%,
                rgb(71 218 255 / .92) 53%,
                rgb(0 145 255 / .38) 62%,
                rgb(0 72 255 / .10) 82%,
                transparent 100%
            );
        filter:
            drop-shadow(0 0 5.2px rgb(0 156 255 / .28))
            drop-shadow(0 0 11.7px rgb(0 72 255 / .14));
    }
    */

    /* Experimental - Retained for Reference
    .hero::after {
        content: "";
        position: absolute;
        z-index: 3;
        top: calc(100% + 4.5px);
        right: 0;
        left: 0;
        height: auto;
        aspect-ratio: 2300 / 76;
        pointer-events: none;
        background-image: url("../images/hero/header_blur_line.webp");
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: translateY(-50%);
    }
    */

    /* Experimental - Retained for Reference
    .hero::after {
        bottom: -9px;
    }
    */

    .hero::after {
        content: "";
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: -9px;
        left: 0;
        height: 9px;
        pointer-events: none;
        background-image:
            radial-gradient(ellipse 55% 130% at 50% 50%, rgb(50 205 255 / .28) 0%, transparent 72%),
            linear-gradient(
                to bottom,
                transparent 0%,
                rgb(0 72 255 / .10) 18%,
                rgb(0 145 255 / .38) 38%,
                rgb(71 218 255 / .92) 47%,
                rgb(8 80 255 / .96) 50%,
                rgb(71 218 255 / .92) 53%,
                rgb(0 145 255 / .38) 62%,
                rgb(0 72 255 / .10) 82%,
                transparent 100%
            );
        filter:
            drop-shadow(0 0 4px rgb(0 156 255 / .28))
            drop-shadow(0 0 9px rgb(0 72 255 / .14));
    }

    /* PHASE 3 TRIAL — remove phase3-aluminum-rails-trial from body to restore
       the preserved blue hero divider above. */
    .phase3-aluminum-rails-trial .hero {
        border-bottom-width: 19px;
        margin-bottom: -10px;
    }

    .phase3-aluminum-rails-trial .hero::after {
        bottom: -28px;
        height: 8px;
        border-radius: 999px;
        background-image: var(--aluminum-rail-background);
        filter: brightness(1.18);
        box-shadow: var(--aluminum-rail-shadow);
    }

    .hero::before {
        display: block;
    }

    .hero-beam {
        display: block;
    }

    .hero-logo-stack {
        position: absolute;
        top: -28px;
        left: 50%;
        width: calc(110% - clamp(44px, 9.933vw, 143px));
        max-width: 1440.5556px;
        height: auto;
        margin: 0;
        transform: translate(-50%, -28px);
    }

    .tagline {
        position: absolute;
        width: 100%;
    }
}

.tagline {
    z-index: 2;
    margin-top: -4px;
    transform: translateY(-27px);
    color: var(--blue);
    background-image: linear-gradient(
        to bottom,
        #d3dade 0%,
        #adb9bf 42%,
        #e1e5e7 58%,
        #9ca8ae 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 31px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0;
    filter: brightness(.98);
    text-shadow:
        0 -1px 0 rgb(255 255 255 / .08),
        0 2px 2px rgb(0 0 0 / .35),
        1px 2px 4px rgb(0 0 0 / .30);
}

.main-nav {
    position: relative;
    z-index: 3;
    top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    height: 92px;
}

/* Experimental - Retained for Reference
.main-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -25px;
    right: 0;
    left: 0;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(0 156 255 / .16) 0%, rgb(0 156 255 / .04) 55%, transparent 100%);
}
*/

.main-nav a,
.return-home .nav-link {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 58px;
    text-decoration: none;
}

.main-nav .nav-button-image,
.return-home .nav-button-image {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: 39.15px;
    max-width: none;
    user-select: none;
}

/* The previous button and flare elements remain in the HTML for rollback. */
.nav-legacy-artwork {
    display: none !important;
}

.nav-button-sprite {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    background-image: url("../images/navigation buttons/navigation_buttons_alum1.png");
    background-repeat: no-repeat;
    background-size: 291.84px 194.56px;
    /* Pre-trial rollback value: preserves the original unfiltered brightness. */
    filter: brightness(1);
    pointer-events: none;
    user-select: none;
}

/* TEMPORARY PHASE 3 TRIAL — unlocked; remove the body trial class to roll back. */
.phase-3-nav-brightness-trial .nav-button-sprite {
    filter: brightness(0.95);
}

.phase-3-nav-brightness-trial .nav-button-experience {
    filter: brightness(0.95);
}

.phase-3-nav-brightness-trial .nav-unified-button {
    filter: brightness(0.95);
}

.nav-button-sprite--home {
    width: 175.75px;
    height: 39.33px;
    aspect-ratio: 925 / 207;
    background-position: -58.71px -9.12px;
}

.nav-button-sprite--create {
    width: 175.56px;
    height: 37.81px;
    aspect-ratio: 924 / 199;
    background-position: -58.71px -53.39px;
}

.nav-button-sprite--fresh {
    width: 175.75px;
    height: 37.43px;
    aspect-ratio: 925 / 197;
    background-position: -58.52px -95.95px;
}

.nav-button-sprite--email {
    width: 175.94px;
    height: 34.96px;
    aspect-ratio: 926 / 184;
    background-position: -58.52px -138.32px;
}

.main-nav .nav-button-experience {
    width: 175.56px;
    height: 37.81px;
}

.nav-unified-button {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    max-width: none;
    user-select: none;
}

.nav-size-create {
    width: 175.56px;
    height: 37.81px;
}

.nav-size-fresh {
    width: 175.75px;
    height: 37.43px;
}

.nav-size-email {
    width: 175.94px;
    height: 34.96px;
}

.nav-size-home {
    width: 175.75px;
    height: 39.33px;
}

.nav-unified-label {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    color: #050505;
    font: 700 14.52px/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    -webkit-text-stroke: .01em #050505;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgb(255 255 255 / .72);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.main-nav .nav-flare,
.return-home .nav-flare {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    height: 131.625px;
    max-width: none;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform: translate(-50%, -50%);
    transition: opacity 180ms ease;
}

.main-nav a:focus-visible,
.return-home .nav-link:focus-visible {
    outline: 2px solid var(--electric-blue);
    outline-offset: 4px;
}

.main-nav a:is(:hover, :active, :focus-visible) .nav-flare,
.return-home .nav-link:is(:hover, :active, :focus-visible) .nav-flare {
    opacity: 1;
}

.launch-page {
    position: relative;
    width: min(calc(100% - 40px), 900px);
    margin: 18px auto 0;
    aspect-ratio: 1032 / 389;
}

.intro-panel-artwork {
    display: block;
    width: 100%;
    height: auto;
}

.slideshow-viewport {
    position: absolute;
    z-index: 2;
    top: 17.994859%;
    left: 15.213178%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.375969%;
    height: 43.187661%;
    overflow: hidden;
    border-radius: 7.1%;
}

.slideshow-viewport .slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 800ms ease;
}

.slideshow-viewport .slideshow-image.is-active {
    opacity: 1;
}

/* =========================================================
   PHASE 3 TRIAL — OWNER-CREATED TOP PANEL 3D ARTWORK
   Positioning only; the artwork supplies all depth effects.
   Remove .phase3-trial-top-panel-3d and restore the retained
   previous image reference to roll back this trial.
   ========================================================= */

.phase3-trial-top-panel-3d {
    aspect-ratio: 1408 / 606;
}

.phase3-trial-top-panel-3d .intro-panel-artwork {
    /* Previous:
    filter: none;
    */
    filter: brightness(0.90);
}

.intro-burst-circle {
    position: absolute;
    z-index: 3;
    top: 33.687%;
    left: 50.036%;
    display: grid;
    place-items: center;
    width: 11.8%;
    aspect-ratio: 166 / 149;
    border: 0;
    border-radius: 0;
    background-color: #242424;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.intro-burst-circle::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: url("../images/elements/squarepatch1.webp");
    background-position: center;
    background-size: cover;
    content: "";
    filter: brightness(1.10);
    pointer-events: none;
}

.intro-burst-circle::before {
    position: absolute;
    z-index: 1;
    inset: -36.1%;
    background: radial-gradient(
        ellipse at center,
        rgb(0 174 255 / .65) 0%,
        rgb(0 102 255 / .49) 28%,
        rgb(0 74 255 / .31) 48%,
        rgb(0 74 255 / 0) 76%
    );
    content: "";
    pointer-events: none;
}

.intro-burst-circle img {
    position: relative;
    z-index: 2;
    display: block;
    width: 74%;
    height: auto;
    box-sizing: border-box;
    border: 1px solid rgb(210 216 220 / .72);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgb(0 0 0 / .66),
        0 0 0 2px rgb(0 76 255 / .48),
        0 0 0 3px rgb(18 21 24 / .86),
        0 2px 3px rgb(0 0 0 / .40),
        0 0 3px rgb(0 102 255 / .16);
}

.intro-burst-circle img.is-morse-pulse {
    filter:
        brightness(2.15)
        drop-shadow(0 0 4px rgb(0 190 255 / .95))
        drop-shadow(0 0 10px rgb(0 102 255 / .85));
}

@media (prefers-reduced-motion: reduce) {
    .intro-burst-circle img.is-morse-pulse {
        filter: none;
    }
}

.phase3-trial-top-panel-3d .slideshow-viewport {
    /* Previous slideshow coordinates retained for rollback
    top: 19.966997%;
    left: 17.613636%;
    width: 23.650568%;
    height: 55.775578%;
    */
    top: 20.146322%;
    left: 13.219616%;
    width: 24.449183%;
    height: 55.154684%;
    border-radius: 2.5%;
}

/* =========================================================
   PHASE 3 TRIAL — INTRO PANEL DEPTH
   Temporary and reversible until owner approval.
   Remove .phase3-trial-intro-depth from the panel wrapper
   to restore the pre-polish appearance.
   ========================================================= */

.phase3-trial-intro-depth {
    isolation: isolate;
}

.phase3-trial-intro-depth::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 19px;
    box-shadow:
        0 7px 10px rgb(0 0 0 / .24),
        4px 15px 24px rgb(0 0 0 / .30),
        0 0 8px rgb(0 156 255 / .10);
    pointer-events: none;
}

.phase3-trial-intro-depth::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 1px;
    border-radius: 18px;
    box-shadow:
        inset 1px 1px 0 rgb(255 255 255 / .06),
        inset -2px -2px 3px rgb(0 0 0 / .30);
    pointer-events: none;
}

.phase3-trial-intro-depth .slideshow-viewport::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 2px 2px 4px rgb(0 0 0 / .68),
        inset -1px -1px 2px rgb(255 255 255 / .08),
        inset 0 0 5px rgb(0 0 0 / .22),
        0 1px 2px rgb(0 0 0 / .30);
    pointer-events: none;
}

@media (max-width: 700px) {
    .phase3-trial-intro-depth::before {
        box-shadow:
            0 6px 9px rgb(0 0 0 / .24),
            2px 11px 16px rgb(0 0 0 / .30),
            0 0 7px rgb(0 156 255 / .10);
    }
}

@media (max-width: 560px) {
    .phase3-trial-intro-depth::before {
        box-shadow:
            0 4px 5px rgb(0 0 0 / .24),
            0 7px 7px rgb(0 0 0 / .30),
            0 0 5px rgb(0 156 255 / .10);
    }
}

/* =========================================================
   PHASE 3 TRIAL — INTRO PANEL DEPTH V2
   Temporary and reversible.
   Remove .phase3-trial-intro-depth-v2 from the panel wrapper
   to restore the previous appearance.
   ========================================================= */

.phase3-trial-intro-depth-v2 {
    isolation: isolate;
}

.phase3-trial-intro-depth-v2::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -5px;
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgb(54 54 54 / .96) 0%,
        rgb(20 20 20 / .98) 48%,
        rgb(2 2 2 / .99) 100%
    );
    box-shadow:
        0 3px 3px rgb(255 255 255 / .10),
        0 10px 14px rgb(0 0 0 / .46),
        0 22px 32px rgb(0 0 0 / .42),
        0 0 12px rgb(7 0 255 / .22);
    pointer-events: none;
}

.phase3-trial-intro-depth-v2::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: 19px;
    box-shadow:
        inset 0 2px 1px rgb(255 255 255 / .13),
        inset 2px 0 1px rgb(255 255 255 / .05),
        inset 0 -4px 5px rgb(0 0 0 / .55),
        inset -4px 0 5px rgb(0 0 0 / .34);
    pointer-events: none;
}

.phase3-trial-intro-depth-v2 .intro-panel-artwork {
    filter:
        drop-shadow(0 5px 4px rgb(0 0 0 / .35))
        drop-shadow(0 10px 10px rgb(0 0 0 / .24));
}

.phase3-trial-intro-depth-v2 .slideshow-viewport {
    isolation: isolate;
}

.phase3-trial-intro-depth-v2 .slideshow-viewport::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 3px 3px 5px rgb(0 0 0 / .78),
        inset -2px -2px 3px rgb(255 255 255 / .16),
        inset 0 0 7px rgb(0 0 0 / .30);
    pointer-events: none;
}

@media (max-width: 700px) {
    .phase3-trial-intro-depth-v2::before {
        inset: -4px;
        border-radius: 23px;
        box-shadow:
            0 3px 3px rgb(255 255 255 / .10),
            0 8px 11px rgb(0 0 0 / .46),
            2px 16px 18px rgb(0 0 0 / .42),
            0 0 8px rgb(7 0 255 / .22);
    }
}

@media (max-width: 560px) {
    .phase3-trial-intro-depth-v2::before {
        inset: -2px;
        border-radius: 21px;
        box-shadow:
            0 2px 2px rgb(255 255 255 / .10),
            0 5px 5px rgb(0 0 0 / .46),
            0 10px 6px rgb(0 0 0 / .42),
            0 0 4px rgb(7 0 255 / .22);
    }
}

.featured-project {
    position: relative;
    width: min(calc(100% - 40px), 900px);
    margin: -47.193501px auto 54px;
    text-align: center;
    scroll-margin-top: 24px;
}

.featured-project::after {
    content: "";
    position: absolute;
    inset: 12.566% .148% 4.956%;
    box-sizing: border-box;
    border: 4px solid rgb(0 0 255 / .99);
    border-radius: 19px;
    z-index: 2;
    pointer-events: none;
}

.featured-project-panel {
    display: block;
    width: 100%;
    height: auto;
}

.featured-project-overlay {
    position: absolute;
    z-index: 1;
    top: calc(25.663717% - 1.2px);
    left: 7.680945%;
    display: block;
    width: 29.098966%;
    height: calc(55.221239% + 2.4px);
    overflow: hidden;
    border-radius: 6%;
}

.featured-project-overlay-image {
    position: relative;
    top: -1.2px;
    display: block;
    width: 100%;
    height: calc(100% + 2.4px);
    object-fit: cover;
    object-position: center;
}

.panel-gap-separator {
    position: relative;
    z-index: 1;
    width: min(calc(100% + 80px), 1020px, calc(100vw - 16px));
    aspect-ratio: 3386 / 296;
    margin: 40px auto;
    overflow: hidden;
    pointer-events: none;
}

.panel-gap-separator img {
    position: absolute;
    top: -53.378378%;
    left: -1.653869%;
    display: block;
    width: 103.366804%;
    max-width: none;
    height: auto;
}

/* END LOCKED SECTION – Navigation & Hero, Version 1.0 */

.what-we-create {
    width: min(calc(100% - 40px), 900px);
    margin: 0 auto;
    padding: 27px;
    border: 2px solid rgb(0 0 255 / .99);
    border-radius: 19px;
    background-color: #080a0d;
    background-image:
        linear-gradient(rgb(0 0 0 / .18), rgb(0 0 0 / .18)),
        url("../images/backgrounds/black-slate-texture.webp");
        /* Previous background-only middle-panel mockup trial retained:
        url("../images/elements/middle_panel_3d.webp");
        */
    background-blend-mode: normal, multiply;
    background-size: cover;
    background-position: center;
    color: #f2f2f2;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .08),
        8px 10px 16px rgb(26 26 26 / .34);
    text-align: center;
}

.middle-panel-mockup {
    display: none;
}

/* =========================================================
   PHASE 3 TRIAL — COMPLETE MIDDLE PANEL MOCKUP
   Temporary and reversible. Remove only
   .phase3-trial-middle-panel-mockup from the section wrapper
   to restore the complete live Panel 2 implementation.
   ========================================================= */

.what-we-create.phase3-trial-middle-panel-mockup {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.phase3-trial-middle-panel-mockup .middle-panel-live-content {
    display: none;
}

.phase3-trial-middle-panel-mockup .middle-panel-mockup {
    display: block;
    width: 100%;
    height: auto;
}

.what-we-create-title {
    width: 100%;
    margin: 0 auto 18px;
    padding: 20px 24px 18px;
    border: 1px solid var(--blue);
    border-radius: 6px;
}

.what-we-create h2 {
    color: var(--blue);
    font-family: "Amaranth", sans-serif;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 400;
}

.what-we-create-intro {
    max-width: 738px;
    margin: 12px auto 0;
    color: #e4e4e4;
    font-size: 18px;
    line-height: 1.5;
}

.what-we-create-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.creation-card {
    min-height: 171px;
    padding: 20px 16px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    background: rgb(3 4 6 / .88);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .06),
        4px 6px 10px rgb(0 0 0 / .28);
    text-align: left;
}

.creation-card h3 {
    margin-bottom: 11px;
    color: var(--blue);
    font-family: "Amaranth", sans-serif;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 400;
}

.creation-card p {
    color: #ededed;
    font-size: 16px;
    line-height: 1.45;
}

.quote-section {
    margin-top: 25px;
    padding-top: 30px;
    text-align: center;
}

.quote-button {
    /* Subtle dark wood material accent — quote button face only. */
    --quote-button-wood-texture: url("../images/backgrounds/wood_background.webp");
    position: relative;
    display: inline-block;
    width: min(calc(100% - 40px), 680px);
    transform: translateY(-49px);
}

.quote-button:focus-visible,
footer a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

.quote-button::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 5.2%;
    right: 4.5%;
    bottom: 39.1%;
    left: .2%;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: var(--floating-elevation-shadow);
    background-image: var(--quote-button-wood-texture);
    background-size: 100% 200%;
    background-position: center top;
    background-repeat: no-repeat;
}

.quote-button img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

body.quote-modal-open {
    overflow: hidden;
}

.quote-modal[hidden] {
    display: none;
}

.quote-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgb(0 0 0 / .78);
}

.quote-modal-panel {
    position: relative;
    width: min(820px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border-radius: 22px;
    background: #080a0d;
    color: #fff;
    box-shadow: 0 18px 48px rgb(0 0 0 / .65);
}

@media (min-width: 701px) {
    #quote-dialog .quote-modal-panel {
        max-height: min(834px, calc(148.148dvh - 71.111px));
        transform: scale(.675);
        transform-origin: center;
    }
}

.quote-modal-close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #050505;
    color: #fff;
    font: 700 28px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.experience-modal-panel {
    width: min(504.225px, calc(60.75vw - 29.16px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.things-modal-panel {
    width: min(483px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    overscroll-behavior: contain;
}

.things-zoom-viewport::-webkit-scrollbar-track {
    margin-block: 0;
}

.things-modal-panel .experience-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.things-zoom-viewport {
    width: 100%;
    max-height: calc(100dvh - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: none;
    cursor: grab;
}

.things-zoom-viewport:active {
    cursor: grabbing;
}

.things-zoom-image {
    width: 100%;
    height: auto;
    max-width: none;
    user-select: none;
}

.things-zoom-controls {
    position: absolute;
    z-index: 4;
    top: 25px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    width: max-content;
    margin: 0 auto;
}

.things-zoom-controls button {
    min-height: 35.2px;
    padding: 7.2px 8.8px;
    border: 1px solid var(--blue);
    border-radius: 5px;
    background: rgb(5 5 5 / .88);
    color: #fff;
    font: 700 9.6px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

@media (max-width: 400px) {
    .things-zoom-controls {
        gap: 4px;
    }

    .things-zoom-controls button {
        padding: 7.2px 4.8px;
        font-size: 8.8px;
    }
}

.experience-modal-image {
    display: block;
    width: 100%;
    height: auto;
}

.experience-modal :is(button, a):focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--electric-blue);
}

.quote-form-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 820 / 834;
}

.quote-form-artwork {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.quote-request-form {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.quote-dialog-heading,
.quote-field-label,
.quote-choice-group legend,
.quote-contact-method label span,
.quote-artwork-status label span,
.quote-consent-text,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.quote-field {
    position: absolute;
    left: 43.9%;
    width: 38.6%;
    height: 3.65%;
}

.quote-field input,
.quote-field select {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    border-radius: 10px;
    outline: 0;
    background: transparent;
    color: #050505;
    font: 400 16px/1.2 Arial, Helvetica, sans-serif;
}

.quote-field input {
    padding: 3px 9px;
}

.quote-field select {
    padding: 2px 28px 2px 9px;
}

.quote-field-first-name {
    top: 22.8%;
}

.quote-field-email {
    top: 27.35%;
}

.quote-field-phone {
    top: 31.9%;
}

.quote-field-project-type {
    top: 45.65%;
    left: 43.9%;
    width: 39.3%;
}

.quote-field-material {
    top: 50.55%;
    left: 43.9%;
    width: 39.3%;
}

.quote-field-quantity {
    top: 55.5%;
    left: 43.9%;
    width: 39.3%;
}

.quote-field-size {
    top: 60.35%;
    left: 43.9%;
    width: 39.3%;
}

.quote-field-needed-by {
    top: 65.3%;
    left: 43.9%;
    width: 39.3%;
}

.quote-choice-group {
    position: absolute;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.quote-contact-method {
    top: 38.5%;
    left: 49.4%;
    display: flex;
    gap: 46px;
}

.quote-contact-method label,
.quote-artwork-status label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.quote-contact-method input,
.quote-artwork-status input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--blue);
}

@media (min-width: 701px) {
    .quote-contact-method input {
        width: 13px;
        height: 13px;
        margin: 2px;
    }
}

.quote-artwork-status {
    top: 70.55%;
    left: 72.45%;
    display: grid;
    gap: 5px;
}

.quote-upload-field {
    position: absolute;
    top: 74.75%;
    left: 20.5%;
    width: 20%;
    text-align: center;
}

.quote-upload-button {
    display: grid;
    place-items: center;
    min-height: 31px;
    border-radius: 999px;
    color: #050505;
    font: 400 18px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

@media (min-width: 701px) {
    .quote-upload-button {
        color: transparent;
    }
}

.quote-upload-filename {
    position: absolute;
    top: 53px;
    left: -22%;
    width: 130%;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-consent-field {
    position: absolute;
    top: 87.75%;
    left: 17.3%;
    width: 66%;
}

.quote-consent-field > label {
    display: block;
    width: 100%;
    min-height: 24px;
}

.quote-consent-field input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--blue);
}

.quote-inline-error {
    display: block;
    margin-top: 4px;
    padding: 5px 8px;
    border-left: 4px solid #ff5252;
    background: #180707;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
}

.quote-inline-error[hidden] {
    display: none;
}

.quote-submit-button {
    position: absolute;
    top: 82.35%;
    left: 40.55%;
    width: 18.5%;
    height: 4.35%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 16px;
    cursor: pointer;
}

.quote-submit-button:disabled {
    background: rgb(0 0 0 / .42);
    cursor: not-allowed;
}

.quote-form-status {
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
}

.quote-form-status:not(:empty) {
    padding-top: 18px;
    padding-bottom: 22px;
    border-top: 1px solid var(--blue);
}

.quote-form-status a {
    color: var(--blue);
    font-weight: 700;
}

.quote-sent-confirmation {
    position: absolute;
    z-index: 3;
    top: 82.78%;
    left: 50%;
    display: block;
    width: 124px;
    height: 29px;
    transform: translateX(-50%);
}

.quote-sent-confirmation[hidden] {
    display: none;
}

.quote-modal :is(button, input, select, .quote-upload-button, a):focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--electric-blue);
}

.quote-upload-field:focus-within .quote-upload-button {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--electric-blue);
}

.expansion-copy {
    margin: 38px 0 10px;
    color: #fff;
    text-align: center;
    transform: translateY(-7px);
}

.expansion-copy h2 {
    color: #fff;
    background-image: linear-gradient(to bottom, #ffffff 0, #f8f8f8 55%, #e4e4e4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--electric-blue);
    paint-order: stroke fill;
    font-family: "Amaranth", sans-serif;
    font-size: 30px;
    line-height: calc(1.05em - 2px);
    font-weight: 400;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-shadow:
        0 -1px 0 rgb(255 255 255 / .09),
        0 1px 0 rgb(0 0 0 / .44),
        0 0 4px rgb(0 156 255 / .14),
        0 2px 2px rgb(0 0 0 / .443),
        1px 2px 4px rgb(0 0 0 / .38);
}

.announcement-line {
    display: inline-block;
}

.announcement-line-primary {
    letter-spacing: .08em;
}

.announcement-line-secondary {
    letter-spacing: .10em;
}

.expansion-copy p {
    margin-top: 3px;
    font-size: 25px;
    line-height: 1.1;
}

.return-home {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    transform: translateY(-85px);
}

/* Experimental - Retained for Reference
footer {
    position: relative;
    width: min(calc(100% - 40px), 900px);
    height: 96px;
    margin: 40px auto 0;
    padding: 18px 28px;
    transform: translateY(-100px);
    border: 1px solid var(--blue);
    border-radius: 19px;
    Black slate panel background
    background-color: #080a0d;
    background-image:
        linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)),
        url("../images/backgrounds/black-slate-texture.webp");
    background-blend-mode: normal, multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .06),
        4px 6px 10px rgb(0 0 0 / .22);
}
*/

footer {
    position: relative;
    height: 96px;
    margin: 40px 27px 0;
    transform: translateY(-100px);
    border-radius: 6px 6px 0 0;
    background-color: rgb(0 0 0 / .23);
    background-image:
        linear-gradient(rgb(0 0 0 / .10), rgb(0 0 0 / .10)),
        url("../images/backgrounds/black-slate-texture.webp");
    background-blend-mode: normal, multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
}

.footer-aluminum-rail {
    position: absolute;
    z-index: 2;
    right: 0;
    left: 0;
    display: block;
    height: 8px;
    border-radius: 999px;
    background-image: var(--aluminum-rail-background);
    box-shadow: var(--aluminum-rail-shadow);
    pointer-events: none;
}

.footer-aluminum-rail--top {
    top: 0;
}

.footer-aluminum-rail--bottom {
    bottom: 0;
}

.footer-content {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
    transform: translateY(5px);
}

.footer-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.2;
}

.footer-details a {
    color: inherit;
    text-decoration: none;
}

/* Experimental - Retained for Reference
footer::before,
footer::after {
    content: "";
    width: 158px;
    height: 1px;
    margin: 0 15px;
    background: var(--blue);
    opacity: .55;
}
*/

footer::before,
footer::after {
    content: "";
    width: 158px;
    height: 3px;
    margin: 0 15px;
    background: var(--electric-blue);
}

@media (max-width: 1000px) {
    .hero {
        height: auto;
        padding-bottom: 22px;
    }

    .phase3-aluminum-rails-trial .hero::after {
        content: "";
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        left: 0;
        height: 8px;
        border-radius: 999px;
        background-image: var(--aluminum-rail-background);
        filter: brightness(1.18);
        box-shadow: var(--aluminum-rail-shadow);
        pointer-events: none;
    }

    .hero-logo-stack {
        height: auto;
        transform: translateY(7px);
    }

    .tagline {
        padding: 0 18px;
        transform: translateY(-2px);
        font-size: clamp(24px, 5vw, 42px);
    }

    .main-nav {
        height: auto;
        padding: 24px 18px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav a,
    .return-home .nav-link {
        height: auto;
        min-height: 44px;
    }

    .main-nav .nav-button-image,
    .return-home .nav-button-image {
        height: 27.405px;
    }

    .nav-button-sprite {
        background-size: 204.288px 136.192px;
    }

    .nav-button-sprite--home {
        width: 123.025px;
        height: 27.531px;
        background-position: -41.097px -6.384px;
    }

    .nav-button-sprite--create {
        width: 122.892px;
        height: 26.467px;
        background-position: -41.097px -37.373px;
    }

    .nav-button-sprite--fresh {
        width: 123.025px;
        height: 26.201px;
        background-position: -40.964px -67.165px;
    }

    .nav-button-sprite--email {
        width: 123.158px;
        height: 24.472px;
        background-position: -40.964px -96.824px;
    }

    .main-nav .nav-button-experience {
        width: 122.892px;
        height: 26.467px;
    }

    .nav-size-create {
        width: 122.892px;
        height: 26.467px;
    }

    .nav-size-fresh {
        width: 123.025px;
        height: 26.201px;
    }

    .nav-size-email {
        width: 123.158px;
        height: 24.472px;
    }

    .nav-size-home {
        width: 123.025px;
        height: 27.531px;
    }

    .nav-unified-label {
        font-size: 10.164px;
    }

    .main-nav .nav-flare,
    .return-home .nav-flare {
        height: 92.1375px;
    }
}