/* =====================================================================
   KAIZEN FLOATING CONTACT BUTTON (BAR REMOVED)
   ===================================================================== */
.kaizen-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.2rem 3rem;
    display: flex;
    justify-content: flex-end; /* Pushes button to the right */
    align-items: center;
    z-index: 700; 
    pointer-events: none; /* Clicks pass entirely through the invisible header */
    transition: padding 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* The Scrolled State: Shrinks padding slightly to tuck it away, but no background */
.kaizen-header.is-scrolled {
    padding: 1.2rem 3rem;
}

/* The Premium Button (remains unchanged) */
.btn-kaizen-contact {
    pointer-events: auto; /* Ensures the button itself remains clickable */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 38px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50px;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 0 rgba(212, 175, 55, 0);
}

/* The Frosted/Blurred Text inside the Contact Button */
.btn-kaizen-contact span {
    position: relative;
    z-index: 2;
    
    /* True camera-lens blur effect */
    color: rgba(212, 175, 55, 0.7); 
    -webkit-text-stroke: 0px transparent;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.9), 0 0 5px rgba(212, 175, 55, 0.4);
    filter: blur(1.5px); /* This literally blurs the text */
    
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* The Molten Sweep Effect (remains unchanged) */
.btn-kaizen-contact .btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

/* On hover, snaps into sharp focus and glows solid white */
.btn-kaizen-contact:hover span {
    color: #fff;
    filter: blur(0px); /* Instantly removes the blur */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.btn-kaizen-contact:hover span {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.btn-kaizen-contact:hover .btn-glow {
    left: 100%;
}

/* Hide header elements while the Director's Cut intro is playing */
body.intro-active .kaizen-header {
    opacity: 0 !important;
}
/* Variables for Premium Palette */
:root {
    --dark-navy: #060B19;
    --navy-light: #0D162B;
    --gold: #D4AF37;
    --gold-dim: #A88622;
    --white: #F4F4F5;
    --text-muted: #8A94A6;
    --font-main: 'Inter', sans-serif;
}

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

body {
    background-color: var(--dark-navy);
    color: var(--white);
    font-family: var(--font-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -1px;
}

/* --- Hero Section Setup --- */
.hero, .footer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Container holds everything in place and hides overflowing edges */
.hero {
    overflow: hidden; 
    z-index: 1;
}

/* The oversized background layer with the blur removed */
.hero-bg {
    position: absolute;
    top: -4%; 
    left: -4%;
    width: 108%; 
    height: 108%; 
    background: url('images/hero-bg.jpg') center/cover no-repeat;
    z-index: -1;
    opacity: 0.55; 
    
    /* Set blur to 0px to make the image crystal clear */
    filter: blur(0px); 
    
    transform: translate3d(0, 0, 0); 
    will-change: filter, transform;
}

/* The dark cinematic vignette */
.hero::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1;
    pointer-events: none; 
    background: radial-gradient(circle at center, rgba(6, 11, 25, 0.85) 0%, rgba(6, 11, 25, 0.5) 35%, rgba(6, 11, 25, 0) 70%);
}

/* --- HERO STRUCTURAL REFINEMENTS --- */
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.2rem; /* The magic bullet for perfect vertical spacing */
            text-align: center;
            z-index: 10;
            position: relative;
            height: 100%;
        }

        .logo-slot {
            height: clamp(30px, 4vw, 50px); /* Scales perfectly with the text */
            width: 100%;
        }

        .tagline {
            margin: 0; /* Let flex gap handle the spacing */
            line-height: 1.1;
        }

        .sub-tagline {
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
    animation: pulse 2s infinite;
    z-index: 10;
}

@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* --- GSAP Horizontal Track Setup --- */
.disciplines-wrapper {
    height: 100vh;
    overflow: hidden;
    position: relative;

    /* THE JOURNEY HAS NO CORRIDOR.
       A ScrollTrigger pin-spacer is as tall as the element PLUS the pin's
       length, so THE APPROACH's spacer ran 0..3390 while its pin ended at
       2712. That left 678px — exactly one viewport — where the approach was
       already finished, unpinned, sliding away, and the chapters had not
       started. You pushed into the wall, arrived, and then had to scroll a
       whole screen before anything happened. enter -> go down -> start.

       Pulling the wrapper up by its own height puts its pin start at 2712,
       on the same pixel the approach's pin ends. The push-in hands straight
       over to the first chapter: enter -> start.

       This is measured, not assumed — it must be -100vh exactly, because
       100vh is what the wrapper contributes to flow. If .disciplines-wrapper
       ever stops being 100vh tall, this has to follow it or the two pins
       overlap and the chapters begin under the approach.

       The 678px of the approach's leftover spacer still exists in the
       document; it is now spent driving the chapters instead of nothing.
       #kz-cine-intro rides above this section (z 2 vs 1) and hides itself
       the moment its pin releases — see .kc-spent in index.html. Without
       that pairing the departing approach and the pinned chapters trade
       places depending on scroll direction and you get a sliding seam.

       2026-08-18: THE APPROACH was removed with the old intro page, so the
       -100vh is retired with it — there is no earlier pin to glue onto, and
       keeping it swallowed the intro placeholder. If the NEW intro ends in
       a pinned scene the chapters should hand off from, restore -100vh and
       re-read the note above. */
    margin-top: 0;

    /* THE SAME ROOM, OUT OF FOCUS — not a flat colour.
       This used to be `background-color: var(--dark-navy)`, and that flat
       #060B19 was the cut you see scrolling down out of the chapters: the
       panels do not fill the frame, so the navy showed above and below them,
       and then THE DEPARTURE arrived on #050505 with a photograph on it. Two
       different darks meeting in a straight line.

       It now carries the departure's own blurred plate, composited exactly as
       that scene composites it — 0.6 of the picture over the void, written
       here as 0.4 of void laid on top. Same image, same brightness, so the
       chapters and the cinematic sit on one continuous surface and the join
       stops being findable.

       Costs nothing extra: the file is already decoded for the departure's
       title card, and at 1356x768 it is 10KB. If --kc-plate changes in
       index.html, this alpha has to follow it, or the two drift apart and the
       band comes back. */
    background-color: var(--kz-void, #050505);
    background-image:
        linear-gradient(rgba(5, 5, 5, 0.4), rgba(5, 5, 5, 0.4)),
        url('assets/stage-marble-blur.webp');
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;

    /* elevated above the team section's fixed ambient backdrop (z 0):
       without this, the viewport-filling video paints OVER the last
       chapter the instant the team section enters the viewport —
       with it, the video is only visible in the slice of the screen
       the team section actually occupies, so the handoff is a gradual
       curtain-reveal instead of an instant full-screen jump */
    z-index: 1;
}

.disciplines-track {
    display: flex;
    width: 600vw;
    height: 100%;
}

.discipline-panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10vw;
    box-shadow: inset 100px 0px 100px -100px rgba(0, 0, 0, 0.8);
}

/* The Glassmorphism Card */
.panel-content {
    max-width: 850px;
    background: rgba(13, 22, 43, 0.5); 
    padding: 4rem;
    border: 1px solid rgba(212, 175, 55, 0.15); 
    border-left: 4px solid var(--gold); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 2px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); 
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.panel-content:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4); 
}

.chapter-num {
    display: inline-block;
    font-size: 1rem;
    color: var(--dark-navy);
    background-color: var(--gold);
    padding: 0.3rem 1rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: 3px;
    border-radius: 2px;
}

.discipline-panel h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: var(--white);
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);

    /* SO EVERY CHAPTER CARD IS THE SAME WIDTH.
       These cards shrink to fit their own words, capped at 850px, so whichever
       line is longest decides how wide the card comes out. The paragraph is
       already held to 650px — but the heading was not, and at 3.5rem a long
       one out-measures it: "Cross-Platform App Development" ran the full 850
       while "Events IT & Monitoring" sat at 778, and the two cards were
       visibly different sizes as you scrolled between them.

       Holding the heading to the same 650px as the paragraph makes the
       paragraph the only thing that sets the width, so all six come out at
       650 + 4rem of padding each side = 778px, every time. Long headings wrap
       a line earlier, which is all this changes. */
    max-width: 650px;
}

.discipline-panel p {
    font-size: 1.25rem;
    color: #E5E7EB; 
    line-height: 1.7;
    max-width: 650px;
}

/* --- Footer / CTA --- */
.footer {
    background-color: var(--navy-light);
}

.footer h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.btn-gold {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--gold);
    color: var(--dark-navy);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: background-color 0.3s ease;
    margin-bottom: 4rem;
}

.btn-gold:hover {
    background-color: var(--white);
}

.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Background Scroll Video --- */
.bg-scroll-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
}

.disciplines-track {
    position: relative;
    z-index: 10; /* Ensures the panels float above the video */
    display: flex;
    width: 600vw;
    height: 100%;
}