/* FORMA LAW V7 - exact reference homepage */
:root{
  --fl-w:836;
  --fl-h:1881;
  --fl-black:#050505;
  --fl-orange:#ee5b3c;
  --fl-paper:#f2f2ee;
}
html{background:#050505;scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.05), transparent 24%),
    url('/assets/images/v7-forma/forma-backdrop.jpg') center top/cover fixed,
    #050505;
  color:#111;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.forma-shell{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  overflow-x:hidden;
}
.forma-stage{
  position:relative;
  width:min(100vw, 1040px);
  max-width:1040px;
  background:#050505;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 36px 140px rgba(0,0,0,.72);
  isolation:isolate;
}
.forma-stage::before{
  content:"";
  display:block;
  width:100%;
  padding-top:225%; /* 1881 / 836 */
}
.forma-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  z-index:1;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;
}
.forma-light{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.16) 45%, transparent 55% 100%);
  mix-blend-mode:soft-light;
  opacity:.0;
}
@media(prefers-reduced-motion:no-preference){
  .forma-stage{animation:stageIn .7s cubic-bezier(.16,1,.3,1) both}
  .forma-light{animation:lightSweep 8s ease-in-out infinite}
  @keyframes stageIn{from{opacity:0;transform:translateY(18px) scale(.992)}to{opacity:1;transform:none}}
  @keyframes lightSweep{0%,28%,100%{opacity:0;transform:translateX(-40%)}38%{opacity:.55}55%{opacity:0;transform:translateX(45%)}}
}
.hot{
  position:absolute;
  z-index:5;
  display:block;
  color:transparent;
  font-size:0;
  line-height:0;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
}
.hot:hover{background:rgba(238,91,60,.055)}
.hot:focus-visible{outline:2px solid rgba(238,91,60,.8);outline-offset:2px}

/* left rail */
.hot-home{left:0;top:0;width:6%;height:8%}
.hot-about{left:0;top:7%;width:6%;height:10%}
.hot-areas{left:0;top:15%;width:6%;height:13%}
.hot-cases{left:0;top:28%;width:6%;height:9%}
.hot-team{left:0;top:37%;width:6%;height:9%}
.hot-papers{left:0;top:46%;width:6%;height:11%}
.hot-contact{left:0;top:56%;width:6%;height:11%}

/* hero and sections */
.hot-hero-btn{left:74.8%;top:17.9%;width:19.2%;height:3.1%;border-radius:999px}
.hot-work-gallery{left:14.5%;top:22.6%;width:84%;height:12.5%}
.hot-case{left:15%;top:36%;width:78%;height:13%}
.hot-timeline{left:17%;top:51.0%;width:80%;height:8.5%}
.hot-stats{left:14%;top:62.5%;width:82%;height:7.8%}
.hot-team-strip{left:13.5%;top:69.5%;width:83%;height:7.5%}
.hot-publications{left:13.5%;top:79.5%;width:83%;height:8.3%}

/* exact invisible form */
.forma-hot-form{
  position:absolute;
  z-index:7;
  left:18.5%;
  top:88.2%;
  width:73.5%;
  height:6.3%;
  pointer-events:none;
}
.forma-hot-form input,
.forma-hot-form select,
.forma-hot-form button{
  position:absolute;
  border:0;
  background:transparent;
  outline:0;
  font-family:Georgia,"Times New Roman",serif;
  color:#111;
  pointer-events:auto;
}
.forma-hot-form input[name="message"]{
  left:0;
  top:4%;
  width:70.8%;
  height:23%;
  padding:0 2%;
  font-size:clamp(11px,1.35vw,15px);
}
.forma-hot-form input[name="message"]::placeholder{color:transparent}
.forma-hot-form input[name="date"]{
  left:0;
  top:51%;
  width:22%;
  height:25%;
  opacity:.01;
}
.forma-hot-form select{
  left:37%;
  top:51%;
  width:24%;
  height:25%;
  opacity:.01;
}
.forma-hot-form button{
  right:-.5%;
  top:-2%;
  width:15%;
  height:77%;
  border-radius:50%;
  cursor:pointer;
  color:transparent;
  font-size:0;
}
.forma-hot-form button:hover{
  background:radial-gradient(circle, rgba(238,91,60,.12), transparent 62%);
}
.seo-layer{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;
}
.forma-toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  z-index:999;
  padding:14px 20px;
  border-radius:999px;
  background:rgba(7,7,7,.94);
  border:1px solid rgba(238,91,60,.48);
  color:#fff;
  font-size:13px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  transition:.25s;
}
.forma-toast.is-open{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:1041px){.forma-shell{padding:0 0 70px}.forma-stage{width:1040px}}
@media(max-width:520px){.forma-hot-form input{font-size:10px}.forma-toast{width:calc(100% - 28px);text-align:center}}