html { scroll-behavior: smooth; }
body { min-height: 100vh; }

.hero {
  height: auto;
  min-height: 58vh;
  border-bottom: none;
  padding: 5rem 3rem 0;
  background: transparent;
}
.hero::before,
.hero::after { display: none; }

.hero-inner { max-width: 700px; padding-bottom: 3.5rem; }

.hero-type {
  display: inline-flex;
  align-items: center;
  background: var(--br5);
  border: 1px solid var(--bdr);
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--br);
  letter-spacing: .3px;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}
.hero h1 { font-size: clamp(32px, 6vw, 54px); }

.hero-tagline {
  font-size: var(--body-size, 17px);
  line-height: 1.65;
  color: var(--ink3);
  max-width: 540px;
  margin: 0 auto;
}
.hero-video-wrap { background: #fff; position: relative; overflow: hidden; }
.hero-video-wrap .shared-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(95,67,178,.13) 1.5px, transparent 1.5px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,.5) 0%, transparent 100%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,.5) 0%, transparent 100%); }
.hero-video-wrap .shared-orb1 { position: absolute; top: -120px; right: -60px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(95,67,178,.08) 0%, transparent 65%); pointer-events: none; animation: hero-orb-1 10s ease-in-out infinite alternate; }
.hero-video-wrap .shared-orb2 { position: absolute; bottom: 10%; left: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(155,132,224,.09) 0%, transparent 65%); pointer-events: none; animation: hero-orb-2 13s ease-in-out infinite alternate; }

.proj-video { padding: 0 3rem 6rem; background: transparent; position: relative; }
.proj-video-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }

.proj-details{padding:7rem 3rem;background:var(--page);position:relative}
.proj-details::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--section-divider),transparent)}
.proj-details-inner{max-width:780px;margin:0 auto}

.proj-desc-col{padding-right:0}
.proj-desc-label{font-size:11px;font-weight:var(--body-weight-bold);color:var(--br);letter-spacing:var(--sec-tag-tracking,1.6px);text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:1.25rem}
.proj-desc-label::before{content:'';display:block;width:14px;height:1.5px;background:var(--br)}
.proj-desc-text{font-size:16.5px;line-height:1.85;color:var(--ink2)}
.proj-stack{margin-top:2.5rem}
.proj-stack-label{font-size:11px;font-weight:var(--body-weight-bold);color:var(--ink4);letter-spacing:1px;text-transform:uppercase;margin-bottom:.85rem}
.proj-stack-pills{display:flex;gap:7px;flex-wrap:wrap}
.proj-stack-pill{font-size:12px;font-weight:var(--body-weight-medium);color:var(--ink2);background:var(--white);border:1px solid var(--bdr);padding:5px 13px;border-radius:100px;box-shadow:0 1px 3px rgba(0,0,0,.04)}

.proj-review{padding:7rem 3rem;background:var(--white);position:relative}
.proj-review::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--section-divider),transparent)}
.proj-review-inner{max-width:680px;margin:0 auto;text-align:center}
.proj-review-stars{display:flex;justify-content:center;gap:4px;margin-bottom:2rem}
.proj-review-stars svg{width:18px;height:18px}
.proj-review-quote{font-family:var(--font-display);font-size:26px;font-weight:var(--display-weight);letter-spacing:var(--display-spacing);line-height:1.38;color:var(--ink);margin-bottom:2.5rem}
.proj-review-quote::before{content:'\201C';color:var(--br)}
.proj-review-quote::after{content:'\201D';color:var(--br)}
.proj-review-divider{width:40px;height:1px;background:var(--bdr2);margin:0 auto 2rem}
.proj-review-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#3d2b8f 0%,#5F43B2 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;font-weight:var(--display-weight);color:#fff;margin:0 auto 1rem;box-shadow:0 6px 20px rgba(95,67,178,.28)}
.proj-review-name{font-family:var(--font-display);font-size:16px;font-weight:var(--display-weight);letter-spacing:var(--display-spacing);color:var(--ink);margin-bottom:3px}
.proj-review-role{font-size:13px;color:var(--ink3)}


.proj-nav{
  position:fixed;top:calc(78px + 1rem);left:1.25rem;z-index:100;
  pointer-events:none;
  opacity:0;transform:translateY(-8px);
  transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1);
}
.proj-nav.visible{opacity:1;transform:translateY(0)}

.proj-nav-back{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px 9px 12px;
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(95,67,178,0.12);
  border-radius:100px;
  box-shadow:
    0 4px 24px rgba(95,67,178,0.12),
    0 1px 3px rgba(0,0,0,0.06);
  font-size:13px;font-weight:var(--body-weight-bold);color:var(--br);
  text-decoration:none;
  transition:background .2s,box-shadow .2s,gap .2s,transform .2s;
}
.proj-nav-back:hover{
  background:#fff;
  box-shadow:
    0 6px 32px rgba(95,67,178,0.18),
    0 1px 4px rgba(0,0,0,0.07);
  gap:9px;
}
.proj-nav-back svg{width:13px;height:13px;flex-shrink:0;transition:transform .2s}
.proj-nav-back:hover svg{transform:translateX(-2px)}
.proj-nav-back-label{font-size:13px}

@media(max-width:768px){
  .proj-nav{top:calc(78px + .875rem);left:.875rem}
  .proj-nav-back{
    width:40px;height:40px;
    padding:0;
    border-radius:50%;
    background:var(--br);
    border:none;
    box-shadow:0 4px 20px rgba(95,67,178,0.38),0 1px 4px rgba(0,0,0,0.12);
    justify-content:center;
    gap:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .proj-nav-back:hover{
    background:var(--br2);
    box-shadow:0 6px 28px rgba(95,67,178,0.48),0 1px 4px rgba(0,0,0,0.14);
    transform:scale(1.08);
    gap:0;
  }
  .proj-nav-back svg{width:15px;height:15px;stroke:white}
  .proj-nav-back-label{display:none}
}

#vidControls {
  transition: opacity .3s ease;
}
#vidControls.controls-hidden {
  opacity: 0;
  pointer-events: none;
}

@media(max-width:960px){
  .hero{padding-top:10rem;min-height:auto}
  .hero-inner{padding-bottom:2.5rem}
  .hero h1{font-size:42px;letter-spacing:-1.5px}
  .proj-details{padding:5rem 2rem}
  .proj-desc-col{padding-right:0}
  .proj-video{padding:0 2rem 5rem}
  .proj-review{padding:5rem 2rem}
}

@media(max-width:768px){
  .hero{
    padding:7rem 1.5rem 0;
    min-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-inner{padding-bottom:2.5rem}
  .hero h1{font-size:34px;letter-spacing:-1.2px}
  .hero-tagline{font-size:15px}

  .proj-video{
    padding:0 1.25rem 4rem;
  }
  .proj-details{padding:4rem 1.5rem}
  .proj-details-inner{
    grid-template-columns:1fr;
    gap:2.5rem
  }

  .proj-review{padding:4rem 1.5rem}
  .proj-review-quote{font-size:19px;letter-spacing:-.3px}
}

@media(max-width:480px){
  .hero h1{font-size:28px;letter-spacing:-1px}
  .hero-tagline{font-size:14px}
  .proj-details{padding:3rem 1.25rem}
  .proj-review{padding:3rem 1.25rem}
  .proj-review-quote{font-size:17px}

  .proj-video{padding:0 1rem 3rem}
}