/* ── PRELOADER ─────────────────────────────── */
#preloader { transition: opacity .7s ease, visibility .7s ease; }
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-logo { animation: preloaderIn .9s ease both; }

.preloader-fill {
    width: 0;
    animation: preloaderBar 1.4s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes preloaderIn {
    from { opacity: 0; letter-spacing: 20px; }
    to   { opacity: 1; }
}

@keyframes preloaderBar { to { width: 100%; } }

/* ── HERO ──────────────────────────────────── */
.scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0,0,0,.025) 2px, rgba(0,0,0,.025) 4px
    );
    pointer-events: none;
}

.film-corner {
    position: absolute;
    width: 36px;
    height: 36px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    animation: filmCornersIn .8s ease 2.4s forwards;
}

@keyframes filmCornersIn { to { opacity: 1; } }

.film-corner--tl { top: 28px; left: 28px; border-top: 1px solid rgba(139,0,0,.8); border-left: 1px solid rgba(139,0,0,.8); }
.film-corner--tr { top: 28px; right: 28px; border-top: 1px solid rgba(139,0,0,.8); border-right: 1px solid rgba(139,0,0,.8); }
.film-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid rgba(139,0,0,.8); border-left: 1px solid rgba(139,0,0,.8); }
.film-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid rgba(139,0,0,.8); border-right: 1px solid rgba(139,0,0,.8); }

#heroEyebrow, #heroTitle, #heroSub, #heroCta, #scrollHint {
    opacity: 0;
    transform: translateY(24px);
}

/* Scroll line indicator */
.scroll-line-wrap {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
    margin: 0 auto;
}

.scroll-line-fill {
    width: 100%;
    height: 100%;
    background: #8B0000;
    animation: scrollDrop 2s ease infinite;
}

@keyframes scrollDrop {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}

/* ── MARQUEE ───────────────────────────────── */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    animation: marqueeScroll 22s linear infinite;
}

.marquee-item {
    font-family: 'Montserrat', sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    flex-shrink: 0;
}

.marquee-sep { font-size: .45rem; flex-shrink: 0; }

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── CTA BUTTON ────────────────────────────── */
.cta-btn {
    display: inline-block;
    padding: 16px 52px;
    border: 1px solid #8B0000;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: 3px;
    background: transparent;
    position: relative;
    overflow: hidden;
    transition: color .4s ease, box-shadow .4s ease;
    font-family: 'Montserrat', sans-serif;
}

.cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #8B0000;
    transform: translateX(-101%);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    z-index: -1;
}

.cta-btn:hover { box-shadow: 0 0 35px rgba(139,0,0,.35); }
.cta-btn:hover::before { transform: translateX(0); }

/* ── PRISON WALL ───────────────────────────── */
.prison-wall-container {
    width: 260px;
    height: 380px;
    background-image: url('WEBSITE_MEDIA/Next_Era.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: space-evenly;
}

.wall-bar {
    width: 24px;
    height: 100%;
    background-color: #0a0a0a;
}

@media (max-width: 768px) {
    .prison-wall-container { background-attachment: scroll; }
}

/* ── SERVICE CARDS ─────────────────────────── */
.cinematic-card {
    height: 420px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    filter: grayscale(70%) brightness(.65);
    transition: filter .6s ease, transform .6s ease, box-shadow .6s ease;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.05) 100%);
    transition: background .5s ease;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 28px 24px;
    z-index: 2;
    transform: translateY(52px);
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

.card-text, .card-cta {
    opacity: 0;
    transition: opacity .4s ease .1s;
}

.cinematic-card:hover {
    filter: grayscale(0%) brightness(1);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(139,0,0,.25);
}

.cinematic-card:hover .card-content { transform: translateY(0); }
.cinematic-card:hover .card-text,
.cinematic-card:hover .card-cta { opacity: 1; }

@media (max-width: 768px) {
    .cinematic-card { filter: grayscale(0%) brightness(.85); }
    .cinematic-card .card-content { transform: translateY(0); }
    .cinematic-card .card-text,
    .cinematic-card .card-cta { opacity: 1; }
}

/* ── VISION ────────────────────────────────── */
.vision-section { min-height: 65vh; background: #050505; }

.vision-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1485095329183-d0797cdc5676?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    animation: cinematicZoom 14s alternate infinite ease-in-out;
    z-index: 0;
}

@keyframes cinematicZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.22); }
}

.vision-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10,10,10,.55) 0%, rgba(5,5,5,.97) 100%);
    z-index: 1;
}

.vision-highlight { text-shadow: 0 0 20px rgba(139,0,0,.5); }

/* ── CRAFT SECTION ─────────────────────────── */
.craft-container {
    display: flex;
    height: 82vh;
    overflow: hidden;
}

.craft-panel {
    flex: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: flex .8s cubic-bezier(.25,1,.5,1);
}

.craft-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: grayscale(75%) brightness(.5);
    transition: transform .8s cubic-bezier(.25,1,.5,1), filter .8s ease;
}

.craft-bg-1 { background-image: url('WEBSITE_MEDIA/Craft_1.png'); }
.craft-bg-2 { background-image: url('WEBSITE_MEDIA/Craft_2.png'); }

.craft-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,.88) 0%, rgba(5,5,5,.35) 100%);
    z-index: 1;
    transition: background .8s ease;
}

.craft-content {
    position: absolute;
    bottom: 8%;
    left: 8%;
    right: 8%;
    z-index: 2;
    color: #fff;
}

.craft-title { letter-spacing: 2px; text-shadow: 0 4px 12px rgba(0,0,0,.8); }

.craft-desc {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}

.mobile-hint { transition: opacity .3s ease; }

.craft-panel:hover,
.craft-panel.active { flex: 1.75; }

.craft-panel:hover .craft-bg,
.craft-panel.active .craft-bg {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(.85);
}

.craft-panel:hover .craft-overlay,
.craft-panel.active .craft-overlay {
    background: linear-gradient(135deg, rgba(10,10,10,.6) 0%, rgba(5,5,5,.1) 100%);
}

.craft-panel:hover .craft-desc,
.craft-panel.active .craft-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .1s;
}

.craft-panel.active .mobile-hint { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
    .craft-container { flex-direction: column; height: auto; }
    .craft-panel { min-height: 50vh; flex: 1; }
    .craft-panel.active { flex: 1.7; }
    .craft-desc { font-size: .875rem; }
}

@media (min-width: 769px) {
    .craft-panel.active { flex: 1; }
}

/* ── TESTIMONIALS ──────────────────────────── */
.floating-window {
    max-width: 960px;
    background: #111;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0,0,0,.85);
    animation: floatUI 8s ease-in-out infinite;
}

@keyframes floatUI {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

.tab-nav-wrapper {
    background: #0d0d0d;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    min-width: max-content;
}

.t-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.08);
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
}

.t-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: .78rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .5px;
    transition: color .3s ease;
}

.t-btn:hover { border-color: rgba(139,0,0,.5); }
.t-btn:hover .t-name { color: rgba(255,255,255,.7); }

.t-btn.active { background: #8B0000; border-color: #8B0000; box-shadow: 0 4px 20px rgba(139,0,0,.35); }
.t-btn.active .t-name { color: #fff; }

.window-body {
    padding: 64px 48px;
    text-align: center;
    min-height: 290px;
    display: flex;
    align-items: center;
}

.t-pane { display: none; width: 100%; animation: slideIn .4s ease; }
.t-pane.active { display: block; }

@keyframes slideIn {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

.quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(255,255,255,.72);
    margin-bottom: 24px;
}

.client-title {
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8B0000;
    font-weight: 600;
}

.window-footer {
    background: #0d0d0d;
    border-top: 1px solid rgba(255,255,255,.04);
    padding: 12px 20px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot:nth-child(1) { background: #8B0000; }
.dot:nth-child(2) { background: rgba(255,255,255,.15); }
.dot:nth-child(3) { background: rgba(255,255,255,.07); }

@media (max-width: 768px) {
    .window-body { padding: 40px 20px; min-height: 240px; }
    .quote { font-size: .95rem; }
}

/* ── CTA SECTION ───────────────────────────── */
.cta-section { background: #0a0a0a; }

.cta-bg {
    position: absolute;
    inset: 0;
    background: url('WEBSITE_MEDIA/Index_Hero.png') center/cover no-repeat;
    opacity: .1;
    z-index: 0;
}

/* ── STAT NUMBERS ──────────────────────────── */
.stat-number { font-family: 'Montserrat', sans-serif; line-height: 1; }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Prison wall image — scale down from fixed 260×380 */
    .prison-wall-container {
        width: 200px;
        height: 300px;
    }

    /* CTA button — reduce horizontal padding */
    .cta-btn { padding: 14px 36px; }

    /* Disable the floating/bobbing UI animation on mobile */
    .floating-window { animation: none; }

    /* Service cards — slightly shorter on tablet */
    .cinematic-card { height: 360px; }

    /* Vision section — reduce huge padding on mobile */
    .vision-section { padding-top: 80px !important; padding-bottom: 80px !important; }

    /* Film corners — scale down slightly */
    .film-corner { width: 26px; height: 26px; }
    .film-corner--tl, .film-corner--bl { left: 16px; }
    .film-corner--tr, .film-corner--br { right: 16px; }
    .film-corner--tl, .film-corner--tr { top: 16px; }
    .film-corner--bl, .film-corner--br { bottom: 16px; }
}

@media (max-width: 480px) {
    /* Prison wall image — further scale down on phones */
    .prison-wall-container {
        width: 160px;
        height: 240px;
    }

    /* CTA button — minimal padding on very small screens */
    .cta-btn { padding: 13px 24px; font-size: .68rem; }

    /* Service cards */
    .cinematic-card { height: 300px; }

    /* Quote text in testimonials */
    .quote { font-size: .88rem; }

    /* Craft section description font */
    .craft-desc { font-size: .82rem; }

    /* Craft content — prevent overflow on very narrow screens */
    .craft-content { left: 5%; right: 5%; }
}