/* BL Studios V24 — kinetic material lettering + orbital services. */

.hero-material{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#f5f4ef;
  color:#080808;
  padding:clamp(104px,12vh,148px) var(--pad) clamp(28px,4vh,48px);
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.hero-material:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.hero-material__meta,.hero-material__footer{
  position:relative;
  z-index:7;
  display:flex;
  justify-content:space-between;
  font:9px/1.2 var(--mono);
  letter-spacing:.14em;
}
.hero-material__stage{
  position:relative;
  z-index:2;
  width:100%;
  height:clamp(310px,56vh,690px);
  align-self:center;
}
.hero-material__mask,.hero-material__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-material__mask{
  z-index:1;
  object-fit:contain;
  object-position:center;
  user-select:none;
  pointer-events:none;
}
.hero-material__canvas{z-index:3;display:block;pointer-events:none}
.hero-material__slogan{
  position:absolute;
  z-index:8;
  left:var(--pad);
  right:auto;
  bottom:clamp(64px,8vh,92px);
  margin:0;
  text-align:left;
  font-size:clamp(23px,2.35vw,42px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.055em;
}
.hero-material__slogan span{display:block}
.hero-material__slogan span:last-child{font-weight:600}
.hero-material__footer{align-self:end;border-top:1px solid rgba(0,0,0,.23);padding-top:13px}
.hero-material__footer span:last-child{margin-right:0}

.services-orbit{
  --orbit-bg:#f1f0eb;
  position:relative;
  height:310svh;
  min-height:2160px;
  isolation:isolate;
  background:var(--orbit-bg);
  color:#090909;
  border-top:1px solid rgba(0,0,0,.14);
}
.services-orbit__viewport{
  position:sticky;
  top:0;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
}
.services-orbit:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:64px 64px;
}
.services-orbit__meta{
  position:absolute;
  z-index:72;
  left:var(--pad);
  right:var(--pad);
  top:32px;
  display:flex;
  justify-content:space-between;
  font:9px var(--mono);
  letter-spacing:.12em;
}
.services-orbit__center{
  position:absolute;
  z-index:70;
  left:var(--pad);
  top:clamp(82px,11vh,126px);
  width:min(720px,54vw);
  text-align:left;
  pointer-events:none;
}
.services-orbit__center>span{font:9px var(--mono);letter-spacing:.14em}
.services-orbit__center h2{
  margin:15px 0 13px;
  font-size:clamp(48px,5.2vw,88px);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.075em;
}
.services-orbit__center h2 i{font-style:normal;color:#2925ff}
.services-orbit__center p{margin:0;font:10px/1.5 var(--mono);letter-spacing:.04em}
.services-orbit__field{position:absolute;inset:0;z-index:4;touch-action:pan-y}
.orbit-service{
  --folder-x:110vw;
  --folder-y:55vh;
  --folder-scale:.96;
  --folder-opacity:0;
  --folder-rotate:0deg;
  --folder-z:10;
  position:absolute;
  left:0;
  top:0;
  width:clamp(240px,25vw,430px);
  height:clamp(300px,53vh,570px);
  padding:0;
  border:0;
  border-radius:2px 14px 3px 3px;
  background:#0b0c0f;
  box-shadow:0 26px 60px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.16);
  overflow:visible;
  will-change:transform,opacity;
  transform:translate3d(var(--folder-x),var(--folder-y),0) translate(-50%,-50%) rotate(var(--folder-rotate)) scale(var(--folder-scale));
  opacity:var(--folder-opacity);
  z-index:var(--folder-z);
  transition:filter .45s ease,box-shadow .45s ease;
  cursor:pointer;
}
.orbit-service:before{
  content:attr(data-service);
  position:absolute;
  z-index:-1;
  left:-1px;
  top:-38px;
  width:62%;
  height:39px;
  padding:13px 14px 0;
  border-radius:10px 18px 0 0;
  background:#0b0c0f;
  color:#fff;
  text-align:left;
  font:8px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:1;
  transform:none;
  transition:background .35s ease,color .35s ease;
}
.orbit-service img{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  filter:saturate(.76) contrast(1.08) brightness(.62);
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .45s;
}
.orbit-service span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:132px;
  padding:42px 22px 22px;
  display:flex;
  align-items:flex-end;
  gap:14px;
  transform:none;
  opacity:1;
  color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.97),rgba(0,0,0,.76) 58%,transparent);
  font:500 clamp(25px,2.15vw,38px)/.92 var(--sans);
  letter-spacing:-.055em;
  text-align:left;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  pointer-events:none;
  transition:.35s ease;
}
.orbit-service span b{flex:0 0 auto;color:#aaaaff;font:9px/1 var(--mono);font-weight:400;letter-spacing:.08em;margin-bottom:3px}
.orbit-service:hover,.orbit-service:focus-visible,.orbit-service.is-active{box-shadow:0 34px 82px rgba(0,0,0,.25),0 0 0 1px rgba(41,37,255,.25)}
.orbit-service:hover:before,.orbit-service:focus-visible:before,.orbit-service.is-active:before{background:#2925ff;color:#fff}
.orbit-service:hover img,.orbit-service:focus-visible img,.orbit-service.is-active img{transform:scale(1.035);filter:saturate(.9) contrast(1.08) brightness(.72)}
.orbit-service:focus-visible{outline:2px solid #2925ff;outline-offset:7px}
.services-orbit__active{
  position:absolute;
  z-index:80;
  left:var(--pad);
  right:var(--pad);
  bottom:28px;
  margin:0;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.25);
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  font:10px var(--mono);
  letter-spacing:.08em;
}
.services-orbit__active small{color:#2925ff}
.services-orbit__active span{font-family:var(--sans);font-size:clamp(18px,2vw,30px);letter-spacing:-.035em}
.services-orbit__active b{font-weight:400}

@media(max-width:800px){
  .hero-material{display:block;padding:0 20px;min-height:100svh;height:100svh}
  .hero-material__meta{position:absolute;left:20px;right:20px;top:96px;font-size:7px}.hero-material__meta span:last-child{display:none}
  .hero-material__stage{position:absolute;left:20px;right:20px;top:50%;width:auto;height:27vh;min-height:190px;transform:translateY(-50%)}
  .hero-material__slogan{left:20px;right:auto;bottom:104px;width:auto;text-align:left;font-size:22px}
  .hero-material__footer{position:absolute;left:20px;right:20px;bottom:22px;font-size:7px}.hero-material__footer span:first-child{max-width:20ch}
  .services-orbit{min-height:2800px;height:430svh}
  .services-orbit__viewport{min-height:620px;height:100svh}
  .services-orbit__meta{left:20px;right:20px;top:24px;font-size:7px}
  .services-orbit__center{left:20px;top:72px;width:calc(100vw - 40px)}
  .services-orbit__center h2{font-size:11.4vw;margin:10px 0 8px;line-height:.84}
  .services-orbit__center p{font-size:8px}
  .orbit-service{width:min(76vw,350px);height:min(39svh,405px);border-radius:2px 13px 3px 3px}
  .orbit-service:before{top:-34px;height:35px;padding:12px 12px 0;width:68%;font-size:7px}
  .orbit-service span{min-height:116px;padding:38px 17px 18px;font-size:clamp(24px,7vw,30px);line-height:.92}
  .orbit-service span b{font-size:8px;margin-bottom:3px}
  .services-orbit__active{left:20px;right:20px;bottom:18px;grid-template-columns:30px 1fr auto;font-size:7px}
  .services-orbit__active span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .services-orbit__active b{font-size:0}.services-orbit__active b:after{content:'VIEW ↗';font-size:7px}
}

@media(prefers-reduced-motion:reduce){
  .orbit-service,.orbit-service img,.orbit-service:before{transition:none!important}
}

/* Final responsive alignment: keep the approved desktop language on mobile. */
.contact a{position:relative;z-index:4;pointer-events:auto!important}
.whatsapp-float{
  position:fixed!important;
  left:auto!important;
  right:max(18px,env(safe-area-inset-right))!important;
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 18px))!important;
  z-index:85!important;
  pointer-events:auto!important;
  overflow:visible!important;
}

@media(min-width:801px){
  .orbit-service{
    width:clamp(360px,32vw,560px);
    height:clamp(330px,48vh,520px);
  }
  .project{flex-basis:clamp(390px,31vw,520px)}
  .project__image{height:auto;aspect-ratio:4/5}
  .work{padding-bottom:84px}
  .about{min-height:88vh;padding-top:76px;padding-bottom:38px}
  .about h2{width:55%!important;max-width:13ch!important;margin:6vh 0 0;text-align:left;align-self:flex-start}
  .about__slogan{margin-top:clamp(44px,5vh,68px);padding-top:clamp(20px,2.5vh,32px)}
  .contact{min-height:88vh;padding-top:82px}
}

@media(max-width:800px){
  .about{
    min-height:auto!important;
    padding:104px 22px 38px!important;
    display:flex!important;
    overflow:hidden!important;
  }
  .about>p{margin:0 0 26px!important}
  .about h2{
    position:relative!important;
    inset:auto!important;
    align-self:flex-start!important;
    max-width:9.2ch!important;
    margin:0 0 48px!important;
    font-size:11.5vw!important;
    line-height:.91!important;
    text-align:left!important;
  }
  .about__copy{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .about__copy p,.about__copy p:last-child{
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:17px!important;
    line-height:1.48!important;
    background:transparent!important;
    text-shadow:0 2px 18px rgba(0,0,0,.5)!important;
  }
  .about__slogan{
    margin-top:52px!important;
    padding-top:26px!important;
    font-size:8.4vw!important;
    line-height:.94!important;
  }
  .work{padding-bottom:54px!important}
  .work__rail{align-items:flex-start;padding-bottom:24px}
  .project{flex-basis:82vw!important}
  .project:nth-child(3n+1){margin-top:0!important}
  .project:nth-child(3n+2){margin-top:56px!important}
  .project:nth-child(3n+3){margin-top:24px!important}
  .project__image{height:62svh;min-height:430px}
  .project__meta{
    grid-template-columns:minmax(0,1fr) minmax(72px,.36fr);
    gap:14px;
    padding:16px 0 18px;
    margin-top:0;
  }
  .project__meta h3{font-size:20px;line-height:1.04}
  .project__meta span{align-self:start;line-height:1.45}
  .contact__mail{font-size:clamp(18px,5.1vw,28px);overflow-wrap:anywhere;gap:16px}
  .contact__grid a{min-height:58px;display:block}
  .contact{min-height:92svh;padding-top:88px;padding-bottom:26px}
}