:root{
  --ink:#101210;
  --paper:#f3efe7;
  --paper-2:#e8e1d7;
  --brass:#d7c39d;
  --muted:#6a6d68;
  --line:rgba(16,18,16,.16);
  --display:"Space Grotesk",sans-serif;
  --body:"Manrope",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--ink)}
body{
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.loader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:var(--ink);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),visibility .55s;
}
.loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{
  position:relative;
  width:min(360px,70vw);
  padding:24px;
}
.loader-mark img{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:invert(1) brightness(2);
  clip-path:inset(0 50% 0 50%);
  opacity:0;
  animation:logoReveal .75s cubic-bezier(.76,0,.24,1) .05s forwards;
}
.loader-mark span{
  position:absolute;
  left:24px;
  right:24px;
  bottom:13px;
  height:1px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.loader-mark span:after{
  content:"";
  display:block;
  width:32%;
  height:100%;
  background:var(--brass);
  transform:translateX(-120%);
  animation:loaderLine .7s cubic-bezier(.4,0,.2,1) .45s forwards;
}
@keyframes logoReveal{
  to{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes loaderLine{
  to{transform:translateX(312%)}
}

.coming-soon{
  height:100svh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  background:var(--paper);
}
.content-panel{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  padding:clamp(28px,4vw,64px);
  border-right:1px solid rgba(16,18,16,.14);
}
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
}
.logo{
  width:clamp(230px,24vw,360px);
  height:auto!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
}
.top-contact{
  display:grid;
  justify-items:end;
  gap:8px;
  padding-top:7px;
  font:600 clamp(.58rem,.7vw,.72rem) var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.top-contact a{
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  transition:opacity .2s;
}
.top-contact a:hover{opacity:.55}

.hero-copy{
  align-self:center;
  max-width:880px;
}
.status{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  margin-bottom:24px;
  font:600 clamp(.58rem,.68vw,.72rem) var(--mono);
  letter-spacing:.17em;
  text-transform:uppercase;
}
.status i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 0 5px rgba(215,195,157,.22);
}
h1{
  margin:0;
  font:600 clamp(4rem,7vw,7.5rem)/.86 var(--display);
  letter-spacing:-.07em;
}
.hero-copy p{
  max-width:660px;
  margin:28px 0 0;
  color:var(--muted);
  font-size:clamp(.98rem,1.25vw,1.14rem);
  line-height:1.62;
  font-weight:600;
}
.actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:22px;
}
.primary-btn,
.secondary-btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:0 19px;
  border:1px solid var(--ink);
  font-size:.84rem;
  font-weight:700;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.primary-btn{
  min-width:275px;
  background:var(--ink);
  color:var(--paper);
}
.secondary-btn{min-width:145px}
.primary-btn b,.secondary-btn b{
  font-size:1.1rem;
  font-weight:400;
  transition:transform .22s;
}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-3px)}
.primary-btn:hover b,.secondary-btn:hover b{transform:translate(3px,-3px)}
.secondary-btn:hover{background:var(--brass)}

.footer-note{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  color:rgba(16,18,16,.46);
  font:500 .58rem var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.visual-panel{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:white;
  isolation:isolate;
}
.visual-grid{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
}
.visual-panel:before{
  content:"";
  position:absolute;
  width:540px;
  height:540px;
  left:50%;
  top:50%;
  transform:translate(-42%,-48%);
  border:1px solid rgba(215,195,157,.14);
  border-radius:50%;
}
.visual-panel:after{
  content:"";
  position:absolute;
  inset:30px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}
.visual-title{
  position:absolute;
  left:28px;
  bottom:18px;
  font:600 clamp(5rem,9vw,11rem)/.75 var(--display);
  letter-spacing:-.085em;
  color:rgba(255,255,255,.025);
  user-select:none;
}
.project-sheet{
  position:absolute;
  left:11%;
  top:14%;
  width:66%;
  height:62%;
  padding:22px;
  background:rgba(243,239,231,.94);
  color:var(--ink);
  box-shadow:0 35px 85px rgba(0,0,0,.28);
  transform:rotate(-4deg);
  animation:floatSheet 7s ease-in-out infinite;
}
.sheet-top,.sheet-bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font:600 .58rem var(--mono);
  letter-spacing:.13em;
}
.sheet-top b{font-weight:600;color:#76684f}
.sheet-plan{
  position:relative;
  height:calc(100% - 72px);
  margin:23px 0;
  border:1px solid rgba(16,18,16,.18);
  background:
    linear-gradient(rgba(16,18,16,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,16,.07) 1px,transparent 1px);
  background-size:38px 38px;
  overflow:hidden;
}
.sheet-plan .line,
.sheet-plan .room{
  position:absolute;
  display:block;
}
.sheet-plan .line{background:rgba(16,18,16,.42)}
.l1{left:17%;top:12%;width:1px;height:76%}
.l2{left:17%;top:31%;width:62%;height:1px}
.l3{left:49%;top:31%;width:1px;height:49%}
.l4{left:49%;top:62%;width:38%;height:1px}
.room{border:1px solid rgba(16,18,16,.34)}
.r1{left:22%;top:17%;width:28%;height:12%}
.r2{left:53%;top:36%;width:25%;height:23%}
.r3{left:22%;top:37%;width:24%;height:38%}
.dimension{
  position:absolute;
  font:500 .48rem var(--mono);
  letter-spacing:.08em;
  color:#746d63;
}
.d1{left:19%;bottom:5%}
.d2{right:9%;top:33%;transform:rotate(90deg)}
.sheet-bottom{color:#6a6257}
.material-card{
  position:absolute;
  right:8%;
  bottom:10%;
  width:145px;
  height:180px;
  padding:15px;
  background:#b89c78;
  color:white;
  box-shadow:0 25px 55px rgba(0,0,0,.25);
  transform:rotate(4deg);
  animation:floatMaterial 6s ease-in-out infinite;
}
.material-card span{
  font:600 .52rem var(--mono);
  letter-spacing:.12em;
}
.material-card i{
  display:block;
  width:58px;
  height:58px;
  margin:33px auto 26px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#f1e5d2,#806d5d);
}
.material-card b{
  font:600 1rem var(--display);
}
.datum{
  position:absolute;
  left:6%;
  bottom:14%;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(215,195,157,.52);
  font:500 .55rem var(--mono);
  letter-spacing:.11em;
}
.datum i{
  width:20px;
  height:20px;
  border:1px solid currentColor;
  border-radius:50%;
  position:relative;
}
.datum i:before,.datum i:after{
  content:"";
  position:absolute;
  background:currentColor;
}
.datum i:before{left:-4px;top:9px;width:28px;height:1px}
.datum i:after{left:9px;top:-4px;width:1px;height:28px}
.rev{
  position:absolute;
  right:30px;
  top:28px;
  color:rgba(255,255,255,.35);
  font:500 .52rem var(--mono);
  letter-spacing:.13em;
}
@keyframes floatSheet{
  0%,100%{transform:rotate(-4deg) translateY(0)}
  50%{transform:rotate(-3.3deg) translateY(-9px)}
}
@keyframes floatMaterial{
  0%,100%{transform:rotate(4deg) translateY(0)}
  50%{transform:rotate(3.3deg) translateY(8px)}
}

@media(max-width:900px){
  .coming-soon{grid-template-columns:1fr}
  .visual-panel{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.075;
    pointer-events:none;
  }
  .content-panel{
    z-index:1;
    border-right:0;
    background:rgba(243,239,231,.93);
  }
}
@media(max-width:650px){
  .content-panel{
    padding:24px 22px 20px;
    grid-template-rows:auto 1fr auto auto;
  }
  .topbar{
    display:grid;
    gap:18px;
  }
  .logo{
    width:min(320px,100%);
  }
  .top-contact{
    justify-items:start;
    padding-top:0;
    gap:6px;
    font-size:.57rem;
  }
  .hero-copy{
    padding:10px 0;
  }
  .status{
    margin-bottom:16px;
    font-size:.55rem;
  }
  h1{
    font-size:clamp(3.15rem,14.5vw,5.4rem);
    line-height:.9;
  }
  .hero-copy p{
    margin-top:20px;
    font-size:.88rem;
    line-height:1.48;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr 53px;
    gap:9px;
    padding-top:17px;
  }
  .primary-btn,.secondary-btn{
    min-height:51px;
    min-width:0;
    padding:0 14px;
    font-size:.77rem;
  }
  .secondary-btn span{display:none}
  .footer-note{
    font-size:.49rem;
    padding-top:14px;
  }
}
@media(max-height:720px) and (min-width:651px){
  .content-panel{padding-top:28px;padding-bottom:24px}
  .logo{width:270px}
  h1{font-size:clamp(3.5rem,6vw,5.6rem)}
  .hero-copy p{margin-top:18px}
  .project-sheet{top:10%;height:66%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader{display:none}
}


/* ================================================================
   V4 CLEAN — decorative right-side project-board visual removed
   ================================================================ */

.coming-soon-clean{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  padding:clamp(16px,3vw,38px);
  background:
    linear-gradient(rgba(16,18,16,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,16,.055) 1px,transparent 1px),
    var(--paper-2);
  background-size:88px 88px,88px 88px,auto;
  overflow:hidden;
}
.coming-soon-clean:before{
  content:"";
  position:absolute;
  right:-16vw;
  top:-25vw;
  width:min(58vw,760px);
  aspect-ratio:1;
  border:1px solid rgba(16,18,16,.07);
  border-radius:50%;
  pointer-events:none;
}
.coming-soon-clean:after{
  content:"";
  position:absolute;
  left:-18vw;
  bottom:-27vw;
  width:min(50vw,640px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(16,18,16,.035);
  pointer-events:none;
}

.coming-soon-clean .content-panel{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  height:min(760px,calc(100svh - clamp(32px,6vw,76px)));
  min-height:520px;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  padding:clamp(30px,4.5vw,62px);
  background:rgba(243,239,231,.96);
  border:1px solid rgba(16,18,16,.24);
  box-shadow:0 30px 90px rgba(16,18,16,.12);
  overflow:hidden;
}
.coming-soon-clean .content-panel:before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:34px;
  height:34px;
  background:
    linear-gradient(135deg,transparent 49%,rgba(16,18,16,.30) 50% 52%,transparent 53%);
}
.coming-soon-clean .content-panel:after{
  content:"";
  position:absolute;
  left:clamp(30px,4.5vw,62px);
  right:clamp(30px,4.5vw,62px);
  bottom:84px;
  height:1px;
  background:rgba(16,18,16,.10);
  pointer-events:none;
}

.coming-soon-clean .hero-copy{
  max-width:900px;
  align-self:center;
}
.coming-soon-clean h1{
  max-width:980px;
  font-size:clamp(4rem,7.5vw,7.4rem);
}
.coming-soon-clean .hero-copy p{
  max-width:690px;
}
.coming-soon-clean .actions{
  padding-top:20px;
}
.coming-soon-clean .footer-note{
  padding-top:18px;
}

@media(max-width:650px){
  .coming-soon-clean{
    padding:14px;
    background-size:70px 70px,70px 70px,auto;
  }
  .coming-soon-clean .content-panel{
    width:100%;
    height:calc(100svh - 28px);
    min-height:0;
    padding:24px 22px 20px;
  }
  .coming-soon-clean h1{
    font-size:clamp(3.1rem,14.5vw,5.25rem);
  }
  .coming-soon-clean .content-panel:after{
    display:none;
  }
}