@font-face{font-family:"CM";src:url(/assets/fonts/cm-he.woff2) format("woff2");font-weight:200 700;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"CM";src:url(/assets/fonts/cm-la.woff2) format("woff2");font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:"AR";src:url(/assets/fonts/ar-he.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"AR";src:url(/assets/fonts/ar-la.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
:root{--paper:#F2F1EB;--paper2:#E9E8E0;--ink:#13254B;--ink2:#3D4D70;--line:rgba(19,37,75,.09);--line2:rgba(19,37,75,.17);--g:#46B356;--gd:#1D7A32;--mono:"CM",ui-monospace,Menlo,monospace;--sans:"AR",Arial,sans-serif;--hd:54px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;
background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:96px 96px,96px 96px,12px 12px,12px 12px;background-position:-1px -1px}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}
[id]{scroll-margin-top:calc(var(--hd) + 14px)}
.skip{position:absolute;top:-80px;right:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}

/* header = drawing strip */
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hd);gap:10px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.brand svg{flex:none}
.brand b{font-family:var(--mono);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap}
.brand small{display:block;font-family:var(--mono);font-size:.66rem;color:var(--ink2);letter-spacing:.04em;line-height:1}
.top .call{font-family:var(--mono);font-weight:700;font-size:.86rem;text-decoration:none;border:2px solid var(--ink);padding:6px 10px;white-space:nowrap}
.top nav{display:none}
.prog{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--g);transform-origin:right;transform:scaleX(var(--p,0))}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 12px;font-family:var(--mono);font-weight:700;font-size:.95rem;white-space:nowrap;text-decoration:none;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;flex:1 1 150px}
.btn.wa{background:var(--g);color:#08200E;box-shadow:4px 4px 0 var(--ink)}
.btn.wa:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn svg{flex:none}

/* labels */
.tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink2);text-transform:uppercase}
.callout{display:inline-grid;grid-template-rows:1fr 1fr;width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;text-align:center;font-family:var(--mono);font-weight:700;line-height:1;background:var(--paper);flex:none;overflow:hidden}
.callout span{display:flex;align-items:center;justify-content:center;font-size:.95rem}
.callout span+span{border-top:2px solid var(--ink);font-size:.62rem;font-weight:400}
.sh{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.sh h2{font-family:var(--mono);font-weight:700;font-size:clamp(1.55rem,6.6vw,2.6rem);line-height:1.08;letter-spacing:-.03em;margin:0}
.sub{margin:0 0 24px;color:var(--ink2);max-width:58ch}
section{padding:56px 0}

/* hero */
.hero{padding:22px 0 30px}
.hero .meta{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:18px}
.hero h1{font-family:var(--mono);font-weight:700;font-size:clamp(2.3rem,11.4vw,4.9rem);line-height:.98;letter-spacing:-.05em;margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--gd);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;right:0;left:0;bottom:-.04em;height:.09em;background:var(--g);transform-origin:right;animation:ul .9s .5s cubic-bezier(.6,0,.2,1) both}
@keyframes ul{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lead{font-size:1.08rem;margin:0 0 18px;max-width:40ch}
.tb{display:grid;grid-template-columns:1fr 1fr 1fr;border:2px solid var(--ink);margin:0 0 18px;background:var(--paper)}
.tb div{padding:7px 9px;border-left:1px solid var(--ink);min-width:0}
.tb div:last-child{border-left:0}
.tb small{display:block;font-family:var(--mono);font-size:.64rem;color:var(--ink2);letter-spacing:.04em}
.tb b{font-family:var(--mono);font-size:.92rem;white-space:nowrap}
.plan{margin:22px -6px 0;position:relative}
.plan svg{width:100%;height:auto;overflow:visible}
.plan text{font-family:var(--mono);fill:var(--ink)}
.wall{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:square}
.thin{fill:none;stroke:var(--ink);stroke-width:1}
.door{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2}
.win{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.dimln{stroke:var(--ink2);stroke-width:.8;fill:none}
.pc{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.pc.lift{stroke:var(--gd);filter:drop-shadow(3px 5px 0 rgba(19,37,75,.18))}
.pc.set{stroke:var(--ink)}
.ghost{fill:none;stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.route{fill:none;stroke:var(--g);stroke-width:1.6;stroke-dasharray:6 5;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
.rlbl{font-size:9px;fill:var(--gd)!important;font-weight:700}
.photo{margin:26px 0 0;position:relative;border:2px solid var(--ink);background:var(--paper2);padding:8px}
.photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.photo figcaption{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--ink2);padding:7px 2px 0}
.crop{position:absolute;width:16px;height:16px;border:0 solid var(--ink)}
.crop.a{top:-9px;right:-9px;border-top-width:2px;border-right-width:2px}
.crop.b{bottom:-9px;left:-9px;border-bottom-width:2px;border-left-width:2px}

/* legend */
.legend{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper);padding:14px 0}
.legend .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.legend figure{margin:0;text-align:center;font-family:var(--mono);font-size:.7rem;color:var(--ink2)}
.legend svg{width:100%;max-width:60px;height:34px;margin:0 auto 2px;display:block}

/* rooms */
.rooms{display:grid;gap:44px;margin-top:34px}
.room{position:relative;padding-top:26px}
.dim{position:absolute;top:0;right:0;left:0;height:16px;display:flex;align-items:center;justify-content:center}
.dim::before{content:"";position:absolute;right:0;left:0;top:50%;border-top:1px solid var(--ink2)}
.dim::after{content:"";position:absolute;right:0;left:0;top:2px;bottom:2px;border-right:1px solid var(--ink2);border-left:1px solid var(--ink2)}
.dim span{position:relative;background:var(--paper);padding:0 8px;font-family:var(--mono);font-size:.74rem;color:var(--ink2);z-index:1}
.dim i{position:absolute;top:50%;width:9px;border-top:1.4px solid var(--ink2);transform:rotate(-45deg)}
.dim i:first-child{right:-4px}.dim i:last-child{left:-4px}
.rm{position:relative;border:5px solid var(--ink);background:var(--paper);padding:14px 14px 18px}
.rm .gap{position:absolute;top:-5px;left:22px;width:46px;height:5px;background:var(--paper)}
.rm .swing{position:absolute;top:0;left:22px;width:46px;height:46px;pointer-events:none}
.rm .no{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-family:var(--mono);font-size:.74rem;color:var(--ink2)}
.rm .no b{font-size:.8rem;color:var(--ink);border:1.5px solid var(--ink);padding:1px 7px}
.rm figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--ink)}
.rm img{width:100%;aspect-ratio:4/3;object-fit:cover}
html.js .room.in .rm figure::after{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--g);box-shadow:0 0 0 1px rgba(19,37,75,.25);animation:scan 1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes scan{from{transform:translateX(0)}95%{opacity:1}to{transform:translateX(-340px);opacity:0}}
.rm h3{font-family:var(--mono);font-weight:700;font-size:1.45rem;letter-spacing:-.03em;margin:14px 0 4px}
.rm p{margin:0;color:var(--ink2)}

/* revisions */
.rev{border:2px solid var(--ink);background:var(--paper);margin:28px 0 0;padding:0;list-style:none}
.rev li{display:grid;grid-template-columns:52px 1fr 78px;border-top:1px solid var(--ink)}
.rev li.h{border-top:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.7rem;letter-spacing:.05em}
.rev li>*{padding:12px 10px;min-width:0}
.rev li>*+*{border-right:1px solid var(--ink)}
.rev li.h>*+*{border-right-color:rgba(242,241,235,.35)}
.rev .r{font-family:var(--mono);font-weight:700;font-size:1.6rem;display:flex;align-items:flex-start;justify-content:center;line-height:1}
.rev .r span{border:2px solid var(--ink);width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transform:rotate(45deg)}
.rev .r span b{transform:rotate(-45deg)}
.rev h3{font-family:var(--mono);font-size:1.08rem;margin:0 0 3px;letter-spacing:-.02em}
.rev p{margin:0;font-size:.95rem;color:var(--ink2)}
.rev .who{font-family:var(--mono);font-size:.76rem;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ok{width:30px;height:30px;border:2px solid var(--gd);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gd)}
html.js .rev li:not(.h) .ok svg path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s .2s}
html.js .rev li.in .ok svg path{stroke-dashoffset:0}

/* title block builder */
.blk{border:3px solid var(--ink);background:var(--paper);margin-top:26px;display:grid;grid-template-columns:1fr 1fr}
.blk>.c{border-top:1px solid var(--ink);padding:10px 12px;min-width:0}
.blk>.c.f{grid-column:1/-1}
.blk>.c.r{border-left:1px solid var(--ink)}
.blk>.c:first-child,.blk>.c:nth-child(2){border-top:0}
.blk .lb{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink2);margin-bottom:6px}
.blk .ttl{font-family:var(--mono);font-weight:700;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.chips legend{padding:0;float:right;width:100%}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:1.5px solid var(--ink);font-family:var(--mono);font-size:.9rem;background:var(--paper)}
.chips input:checked+span{background:var(--ink);color:var(--paper);box-shadow:inset 0 -4px 0 var(--g)}
.chips input:focus-visible+span{outline:3px solid var(--g);outline-offset:2px}
.blk input[type=text]{width:100%;font:16px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1.5px dashed var(--ink);padding:6px 0;border-radius:0}
.blk input[type=text]:focus{outline:none;border-bottom:2px solid var(--g)}
.pre{font-family:var(--mono);font-size:.84rem;white-space:pre-wrap;background:var(--paper2);border:1px dashed var(--ink2);padding:10px;min-height:96px;margin:0}
.blk .send{grid-column:1/-1;border-top:2px solid var(--ink);padding:12px}
.blk .send .btn{width:100%}
.blk .foot{display:flex;font-family:var(--mono);font-size:.7rem;color:var(--ink2)}
.blk .foot span{flex:1;padding:8px 10px;border-left:1px solid var(--ink)}
.blk .foot span:last-child{border-left:0}

/* area */
.area{display:grid;gap:18px;margin-top:20px;align-items:center}
.area .big{font-family:var(--mono);font-weight:700;font-size:clamp(3rem,17vw,7rem);line-height:.9;letter-spacing:-.06em;margin:0}
.area .big em{font-style:normal;color:var(--gd)}
.axis{position:relative;border:2px solid var(--ink);background:var(--paper);padding:16px 14px}
.axis ol{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative;font-family:var(--mono);font-size:.82rem}
.axis ol::before{content:"";position:absolute;top:9px;right:6px;left:6px;border-top:2px dashed var(--g)}
.axis li{position:relative;padding-top:24px;text-align:center}
.axis li::before{content:"";position:absolute;top:2px;right:50%;margin-right:-8px;width:12px;height:12px;border:2px solid var(--ink);background:var(--paper);transform:rotate(45deg)}
.axis p{margin:14px 0 0;font-size:.92rem;color:var(--ink2)}

/* notes */
.notes{margin-top:22px;border-top:2px solid var(--ink)}
.notes details{border-bottom:1px solid var(--ink)}
.notes summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 20px;gap:6px;align-items:center;padding:14px 0;font-family:var(--mono);font-weight:700;font-size:1rem}
.notes summary::-webkit-details-marker{display:none}
.notes summary .n{color:var(--gd)}
.notes summary .pl{width:14px;height:14px;position:relative}
.notes summary .pl::before,.notes summary .pl::after{content:"";position:absolute;top:6px;right:0;width:14px;border-top:2px solid var(--ink)}
.notes summary .pl::after{transform:rotate(90deg);transition:transform .2s}
.notes details[open] .pl::after{transform:rotate(0)}
.notes details p{margin:0 0 16px;padding-right:40px;color:var(--ink2)}

/* approved */
.end{overflow:hidden;padding:64px 0 70px;border-top:2px solid var(--ink);background:var(--paper)}
.end .wrap{display:grid;gap:26px;justify-items:center;text-align:center}
.stamp{display:inline-block;color:var(--gd);border:4px double var(--gd);padding:12px 18px 10px;transform:rotate(-7deg);font-family:var(--mono);text-align:center;mix-blend-mode:multiply}
.stamp b{display:block;font-size:clamp(1.9rem,9.6vw,3.6rem);line-height:1;letter-spacing:-.04em}
.stamp small{display:flex;justify-content:space-between;gap:14px;font-size:.72rem;border-top:2px solid var(--gd);margin-top:8px;padding-top:6px}
html.js .stamp.hit{animation:stamp .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp{0%{transform:rotate(-14deg) scale(1.5)}100%{transform:rotate(-7deg) scale(1)}}
.end p{margin:0;max-width:34ch;font-size:1.08rem}
.end .btns{width:100%;max-width:520px}
.sign{font-family:var(--mono);font-size:.78rem;color:var(--ink2)}

footer{background:var(--ink);color:#C9CEDA;font-size:.86rem;padding:24px 0 96px}
footer b{color:#fff;font-family:var(--mono)}
footer a{color:#fff;margin-left:14px}
footer p{margin:0 0 8px}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1.35fr;background:var(--paper);border-top:2px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font-family:var(--mono);font-weight:700;text-decoration:none;color:var(--ink)}
.bar a.wa{background:var(--g);color:#08200E;border-right:2px solid var(--ink)}

@media (min-width:860px){
  :root{--hd:64px}
  body{font-size:18px}
  .top nav{display:flex;gap:22px;font-family:var(--mono);font-size:.86rem}
  .top nav a{text-decoration:none}
  .top nav a:hover{color:var(--gd)}
  .hero{padding:40px 0 50px}
  .hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
  .plan{margin:0}
  .rooms{grid-template-columns:1fr 1fr;gap:56px 40px}
  .rev li{grid-template-columns:80px 1fr 140px}
  .bwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .bwrap .blk{margin-top:0}
  .area{grid-template-columns:1fr 1fr}
  .bar{display:none}
  footer{padding-bottom:28px}
  section{padding:84px 0}
}