<section id="bh-fullscreen-experience">
  <div class="bh-loader">
    <div class="bh-loader-inner">
      <div class="bh-loader-line"></div>
      <h1 class="bh-loader-word" aria-label="Brand Havan">
        <span>B</span><span>R</span><span>A</span><span>N</span><span>D</span>
        <span class="bh-space"></span>
        <span>H</span><span>A</span><span>V</span><span>A</span><span>N</span>
      </h1>
      <p class="bh-loader-sub">Creative direction / brand films / motion / campaigns</p>
    </div>
    <div class="bh-loader-wipe"></div>
  </div>

  <main class="bh-site-shell">

    <!-- FULLSCREEN HERO -->
    <section class="bh-panel bh-hero">
      <div class="bh-bg-wrap">
        <video class="bh-bg-video" autoplay muted loop playsinline preload="auto">
          <!-- REPLACE WITH YOUR MAIN BRAND HAVAN HERO VIDEO LINK -->
          <source src="https://cdn.coverr.co/videos/coverr-aerial-view-of-city-buildings-1560886386327?download=1080p" type="video/mp4">
        </video>
        <div class="bh-bg-overlay"></div>
        <div class="bh-grid"></div>
        <div class="bh-orb bh-orb-1"></div>
        <div class="bh-orb bh-orb-2"></div>
      </div>

      <div class="bh-panel-inner bh-hero-inner">
        <div class="bh-kicker">Brand Havan</div>
        <h1 class="bh-hero-title">
          We build brands
          <span>that move.</span>
        </h1>
        <p class="bh-hero-copy">
          A full-stack creative studio blending strategy, design, brand films, motion graphics and digital storytelling for companies that want presence, not just pixels.
        </p>

        <div class="bh-hero-actions">
          <a href="#bh-services" class="bh-btn bh-btn-solid">Explore our work</a>
          <a href="#bh-contact" class="bh-btn bh-btn-ghost">Start a project</a>
        </div>
      </div>

      <div class="bh-scroll-cue">
        <span></span>
        <p>Scroll</p>
      </div>
    </section>

    <!-- FULLSCREEN INTRO -->
    <section class="bh-panel bh-statement">
      <div class="bh-panel-inner bh-two-col">
        <div class="bh-copy-block bh-parallax-slow">
          <p class="bh-kicker">What we do</p>
          <h2>Brand Havan creates the feeling people trust before they ever read a single word.</h2>
        </div>
        <div class="bh-copy-block bh-parallax-fast">
          <p>
            We help startups, venture-backed companies, modern brands and growth-minded teams sharpen their identity and elevate how they show up through creative direction, motion systems, campaign design, websites, brand films and digital assets.
          </p>
        </div>
      </div>
    </section>

    <!-- FULLSCREEN SERVICES -->
    <section id="bh-services" class="bh-panel bh-services">
      <div class="bh-panel-inner bh-services-inner">
        <div class="bh-services-left">
          <p class="bh-kicker">Capabilities</p>
          <h2>Built for brands that need style, clarity and momentum.</h2>
        </div>

        <div class="bh-services-right">
          <article class="bh-service-card">
            <span>01</span>
            <h3>Branding</h3>
            <p>Identity systems, messaging direction, positioning, logo refinement and premium design language.</p>
          </article>

          <article class="bh-service-card">
            <span>02</span>
            <h3>Brand Films</h3>
            <p>Founder stories, launch films, cinematic web intros, campaign visuals and social-first edits.</p>
          </article>

          <article class="bh-service-card">
            <span>03</span>
            <h3>Motion Graphics</h3>
            <p>Logo animation, product loops, interface movement, paid ad creative and motion systems that scale.</p>
          </article>

          <article class="bh-service-card">
            <span>04</span>
            <h3>Digital Presence</h3>
            <p>Web experiences, launch pages, ad assets and conversion-minded content wrapped in premium design.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- FULLSCREEN VIDEO / CASE STUDY PANEL -->
    <section class="bh-panel bh-case-study">
      <div class="bh-bg-wrap">
        <video class="bh-bg-video" autoplay muted loop playsinline preload="auto">
          <!-- REPLACE WITH THE CASE STUDY / BRAND FILM LINK WE USED LAST TIME -->
          <source src="https://cdn.coverr.co/videos/coverr-business-people-in-a-meeting-1567441247397?download=1080p" type="video/mp4">
        </video>
        <div class="bh-bg-overlay bh-bg-overlay-dark"></div>
      </div>

      <div class="bh-panel-inner bh-case-inner">
        <div class="bh-case-meta">Selected Direction</div>
        <h2 class="bh-case-title">Cinematic storytelling meets conversion-minded design.</h2>
        <p class="bh-case-copy">
          Every touchpoint should feel considered: the headline, the scroll rhythm, the pacing of the video, the motion of the logo, the contrast in the typography, the way the site breathes. That’s where authority lives.
        </p>
      </div>
    </section>

    <!-- FULLSCREEN PROCESS -->
    <section class="bh-panel bh-process">
      <div class="bh-panel-inner bh-process-inner">
        <div class="bh-process-head">
          <p class="bh-kicker">Process</p>
          <h2>How we turn vision into an experience.</h2>
        </div>

        <div class="bh-process-grid">
          <div class="bh-process-item">
            <span>01</span>
            <h3>Clarify</h3>
            <p>We find the emotional hook, the positioning edge and the visual tone that actually fits the brand.</p>
          </div>
          <div class="bh-process-item">
            <span>02</span>
            <h3>Design</h3>
            <p>We build the identity system, page structure, type hierarchy and atmosphere.</p>
          </div>
          <div class="bh-process-item">
            <span>03</span>
            <h3>Animate</h3>
            <p>We create motion behavior, intro reveals, transitions and visual texture.</p>
          </div>
          <div class="bh-process-item">
            <span>04</span>
            <h3>Launch</h3>
            <p>We deliver a premium digital presence that can sell, scale and feel alive.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- FULLSCREEN CONTENT BLOCK FROM PREVIOUS PIECE -->
    <section class="bh-panel bh-editorial">
      <div class="bh-panel-inner bh-two-col">
        <div class="bh-copy-block bh-parallax-slow">
          <p class="bh-kicker">Why Brand Havan</p>
          <h2>Full-stack creative without the usual agency bloat.</h2>
        </div>
        <div class="bh-copy-block bh-parallax-fast">
          <p>
            Brand Havan is built to bridge strategy and execution. That means branding, video, motion, digital marketing assets and web design can all speak the same visual language instead of feeling like five interns got into a fistfight with your brand deck.
          </p>
          <p>
            The result is cleaner campaigns, stronger positioning, more memorable launches and a brand experience that feels expensive before anyone sees the invoice.
          </p>
        </div>
      </div>
    </section>

    <!-- FULLSCREEN CTA -->
    <section id="bh-contact" class="bh-panel bh-contact">
      <div class="bh-panel-inner bh-contact-inner">
        <p class="bh-kicker">Let’s build something sharp.</p>
        <h2>For founders, startups and teams ready to look like the company they’re becoming.</h2>
        <a href="/contact" class="bh-btn bh-btn-solid">Inquire now</a>
      </div>
    </section>

  </main>
</section>

<style>
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    background: #080808;
  }

  #bh-fullscreen-experience {
    --bg: #080808;
    --bg2: #0d0d0d;
    --text: #f4efe7;
    --muted: rgba(244,239,231,.72);
    --line: rgba(255,255,255,.10);
    --card: rgba(255,255,255,.05);
    --accent: #d8c2a1;
    --accent2: #8899ff;
    color: var(--text);
    background: var(--bg);
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    font-family: Inter, Helvetica, Arial, sans-serif;
  }

  #bh-fullscreen-experience * {
    box-sizing: border-box;
  }

  #bh-fullscreen-experience a {
    color: inherit;
    text-decoration: none;
  }

  #bh-fullscreen-experience .bh-site-shell {
    position: relative;
    z-index: 1;
    background:
      radial-gradient(circle at 20% 20%, rgba(136,153,255,.08), transparent 32%),
      radial-gradient(circle at 80% 40%, rgba(216,194,161,.06), transparent 25%),
      linear-gradient(180deg, #070707 0%, #0c0c0c 100%);
  }

  #bh-fullscreen-experience .bh-panel {
    position: relative;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
  }

  #bh-fullscreen-experience .bh-panel-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: clamp(40px, 5vw, 72px);
  }

  #bh-fullscreen-experience .bh-bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
  }

  #bh-fullscreen-experience .bh-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.45) contrast(1.05) saturate(.9);
  }

  #bh-fullscreen-experience .bh-bg-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.72) 100%),
      linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
  }

  #bh-fullscreen-experience .bh-bg-overlay-dark {
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.72)),
      linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  }

  #bh-fullscreen-experience .bh-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
  }

  #bh-fullscreen-experience .bh-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    opacity: .22;
    pointer-events: none;
  }

  #bh-fullscreen-experience .bh-orb-1 {
    width: 30vw;
    height: 30vw;
    top: 12%;
    right: 8%;
    background: var(--accent2);
  }

  #bh-fullscreen-experience .bh-orb-2 {
    width: 22vw;
    height: 22vw;
    bottom: 10%;
    left: 6%;
    background: var(--accent);
  }

  #bh-fullscreen-experience .bh-kicker {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--muted);
    margin-bottom: 1rem;
  }

  #bh-fullscreen-experience .bh-hero-inner {
    max-width: 1100px;
    padding-top: 10vh;
  }

  #bh-fullscreen-experience .bh-hero-title {
    font-size: clamp(3.5rem, 9vw, 9rem);
    line-height: .92;
    letter-spacing: -.05em;
    margin: 0;
    max-width: 900px;
  }

  #bh-fullscreen-experience .bh-hero-title span {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px rgba(244,239,231,.78);
  }

  #bh-fullscreen-experience .bh-hero-copy {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.7;
    color: var(--muted);
    max-width: 720px;
    margin: 1.5rem 0 0;
  }

  #bh-fullscreen-experience .bh-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
  }

  #bh-fullscreen-experience .bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all .25s ease;
  }

  #bh-fullscreen-experience .bh-btn:hover {
    transform: translateY(-2px);
  }

  #bh-fullscreen-experience .bh-btn-solid {
    background: var(--text);
    color: #0b0b0b;
  }

  #bh-fullscreen-experience .bh-btn-ghost {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
  }

  #bh-fullscreen-experience .bh-scroll-cue {
    position: absolute;
    right: 40px;
    bottom: 30px;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: .6rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .7rem;
    color: var(--muted);
  }

  #bh-fullscreen-experience .bh-scroll-cue span {
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  }

  #bh-fullscreen-experience .bh-two-col {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
  }

  #bh-fullscreen-experience .bh-copy-block h2,
  #bh-fullscreen-experience .bh-services-left h2,
  #bh-fullscreen-experience .bh-case-title,
  #bh-fullscreen-experience .bh-process-head h2,
  #bh-fullscreen-experience .bh-contact-inner h2 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.05em;
  }

  #bh-fullscreen-experience .bh-copy-block p:not(.bh-kicker),
  #bh-fullscreen-experience .bh-case-copy {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 640px;
  }

  #bh-fullscreen-experience .bh-services-inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  #bh-fullscreen-experience .bh-services-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  #bh-fullscreen-experience .bh-service-card,
  #bh-fullscreen-experience .bh-process-item {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    padding: 1.6rem;
    backdrop-filter: blur(14px);
  }

  #bh-fullscreen-experience .bh-service-card span,
  #bh-fullscreen-experience .bh-process-item span {
    display: block;
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .2em;
    margin-bottom: .8rem;
  }

  #bh-fullscreen-experience .bh-service-card h3,
  #bh-fullscreen-experience .bh-process-item h3 {
    margin: 0 0 .8rem;
    font-size: 1.4rem;
    line-height: 1.1;
  }

  #bh-fullscreen-experience .bh-service-card p,
  #bh-fullscreen-experience .bh-process-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
  }

  #bh-fullscreen-experience .bh-case-inner {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 100svh;
  }

  #bh-fullscreen-experience .bh-case-meta {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .75rem;
    margin-bottom: 1rem;
  }

  #bh-fullscreen-experience .bh-process-inner {
    display: grid;
    gap: 2.5rem;
  }

  #bh-fullscreen-experience .bh-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  #bh-fullscreen-experience .bh-contact {
    background:
      radial-gradient(circle at 50% 20%, rgba(216,194,161,.08), transparent 30%),
      linear-gradient(180deg, #0d0d0d 0%, #090909 100%);
  }

  #bh-fullscreen-experience .bh-contact-inner {
    max-width: 1000px;
  }

  #bh-fullscreen-experience .bh-contact-inner .bh-btn {
    margin-top: 2rem;
  }

  /* Loader */
  #bh-fullscreen-experience .bh-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: #050505;
    overflow: hidden;
  }

  #bh-fullscreen-experience .bh-loader-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
  }

  #bh-fullscreen-experience .bh-loader-line {
    width: 120px;
    height: 1px;
    margin: 0 auto 1.5rem;
    background: rgba(255,255,255,.4);
    transform-origin: left center;
  }

  #bh-fullscreen-experience .bh-loader-word {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .08em;
    font-size: clamp(2.6rem, 9vw, 8rem);
    line-height: .9;
    letter-spacing: .08em;
    font-weight: 600;
    text-transform: uppercase;
  }

  #bh-fullscreen-experience .bh-loader-word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotate(8deg);
  }

  #bh-fullscreen-experience .bh-space {
    width: .42em;
  }

  #bh-fullscreen-experience .bh-loader-sub {
    margin-top: 1rem;
    color: rgba(255,255,255,.6);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .72rem;
  }

  #bh-fullscreen-experience .bh-loader-wipe {
    position: absolute;
    inset: auto 0 0 0;
    height: 0%;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
      linear-gradient(135deg, #f2e8d8 0%, #a9a091 50%, #4a4a4a 100%);
    z-index: 1;
  }

  @media (max-width: 991px) {
    #bh-fullscreen-experience .bh-two-col,
    #bh-fullscreen-experience .bh-services-inner,
    #bh-fullscreen-experience .bh-process-grid {
      grid-template-columns: 1fr;
    }

    #bh-fullscreen-experience .bh-services-right {
      grid-template-columns: 1fr;
    }

    #bh-fullscreen-experience .bh-scroll-cue {
      display: none;
    }
  }

  @media (max-width: 767px) {
    #bh-fullscreen-experience .bh-panel-inner {
      padding: 28px;
    }

    #bh-fullscreen-experience .bh-hero-title {
      font-size: clamp(3rem, 16vw, 5.5rem);
    }
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  (function () {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") return;
    gsap.registerPlugin(ScrollTrigger);

    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (!prefersReduced) {
      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

      tl.fromTo(".bh-loader-line",
        { scaleX: 0, opacity: 0 },
        { scaleX: 1, opacity: 1, duration: 0.8 }
      )
      .to(".bh-loader-word span", {
        opacity: 1,
        y: 0,
        rotate: 0,
        duration: 0.8,
        stagger: 0.045
      }, "-=0.2")
      .fromTo(".bh-loader-sub",
        { opacity: 0, y: 18 },
        { opacity: 1, y: 0, duration: 0.6 },
        "-=0.4"
      )
      .to({}, { duration: 0.35 })
      .to(".bh-loader-wipe", {
        height: "100%",
        duration: 0.95,
        ease: "power4.inOut"
      })
      .to(".bh-loader-inner", {
        opacity: 0,
        y: -30,
        duration: 0.3
      }, "-=0.45")
      .to(".bh-loader", {
        yPercent: -100,
        duration: 1.05,
        ease: "power4.inOut"
      }, "-=0.1");
    } else {
      const loader = document.querySelector(".bh-loader");
      if (loader) loader.style.display = "none";
    }

    gsap.from(".bh-hero-inner > *", {
      opacity: 0,
      y: 40,
      stagger: 0.12,
      duration: 1,
      ease: "power3.out",
      delay: prefersReduced ? 0 : 2.2
    });

    gsap.to(".bh-orb-1", {
      y: 120,
      ease: "none",
      scrollTrigger: {
        trigger: ".bh-hero",
        start: "top top",
        end: "bottom top",
        scrub: true
      }
    });

    gsap.to(".bh-orb-2", {
      y: -100,
      ease: "none",
      scrollTrigger: {
        trigger: ".bh-hero",
        start: "top top",
        end: "bottom top",
        scrub: true
      }
    });

    gsap.utils.toArray(".bh-parallax-slow").forEach((el) => {
      gsap.fromTo(el, { y: 0 }, {
        y: 60,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          start: "top bottom",
          end: "bottom top",
          scrub: true
        }
      });
    });

    gsap.utils.toArray(".bh-parallax-fast").forEach((el) => {
      gsap.fromTo(el, { y: 0 }, {
        y: -60,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          start: "top bottom",
          end: "bottom top",
          scrub: true
        }
      });
    });

    gsap.utils.toArray(".bh-service-card, .bh-process-item").forEach((el, i) => {
      gsap.from(el, {
        opacity: 0,
        y: 40,
        duration: 0.8,
        delay: i * 0.06,
        ease: "power3.out",
        scrollTrigger: {
          trigger: el,
          start: "top 88%"
        }
      });
    });

    gsap.utils.toArray(".bh-copy-block h2, .bh-services-left h2, .bh-case-title, .bh-process-head h2, .bh-contact-inner h2").forEach((el) => {
      gsap.from(el, {
        opacity: 0,
        y: 35,
        duration: 0.9,
        ease: "power3.out",
        scrollTrigger: {
          trigger: el,
          start: "top 85%"
        }
      });
    });

    gsap.to(".bh-case-inner", {
      y: -40,
      ease: "none",
      scrollTrigger: {
        trigger: ".bh-case-study",
        start: "top bottom",
        end: "bottom top",
        scrub: true
      }
    });

    window.addEventListener("load", () => ScrollTrigger.refresh());
    window.addEventListener("resize", () => ScrollTrigger.refresh());
  })();
</script>