[hidden]{display:none!important}
:root{
  --concrete:oklch(0.93 0.008 80);--sheet:oklch(0.97 0.005 85);--ink:oklch(0.27 0.015 255);--band:oklch(0.24 0.014 255);
  --bronze:oklch(0.64 0.06 75);--bronze-ink:oklch(0.47 0.06 70);--laterite:oklch(0.56 0.11 40);--lat-deep:oklch(0.47 0.1 40);
  --steel:oklch(0.47 0.012 255);--rule:oklch(0.8 0.01 80);--on-band:oklch(0.9 0.008 80);--on-band-mute:oklch(0.74 0.012 255);
  --ease:cubic-bezier(0.16,1,0.3,1);--disp:'Lexend',system-ui,sans-serif;--text:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 16px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-0.01em}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.7rem 1.25rem;border:0;border-radius:2px;background:var(--ink);color:var(--sheet);font:600 .95rem/1 var(--disp);text-decoration:none;box-shadow:inset 0 -3px 0 var(--bronze);transition:transform .18s var(--ease),box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 -5px 0 var(--bronze),0 6px 14px -8px oklch(0.2 0.02 255/.6)}
.btn:active{transform:translateY(0)}
.btn.light{background:var(--sheet);color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn[disabled]{opacity:.6;pointer-events:none}

/* hoarding header */
.hoard{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.6rem clamp(1rem,3vw,2.5rem);background:var(--sheet);border-bottom:3px solid var(--ink);box-shadow:0 3px 0 var(--bronze)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark{width:38px;height:42px;flex:none}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font:800 1.2rem/1 var(--disp);text-transform:uppercase;letter-spacing:-0.005em}
.wm small{font:500 .62rem/1 var(--disp);text-transform:uppercase;letter-spacing:.42em;color:var(--steel);margin-top:.35rem}
.links{display:flex;gap:1.4rem;margin-left:auto}
.links a{font:500 .92rem var(--disp);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.links a:hover{border-color:var(--bronze)}
.hud{display:flex;align-items:center;gap:.6rem}

/* site */
.site{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(1rem,2.5vw,2.5rem);padding:clamp(1rem,2.5vw,2rem) clamp(1rem,3vw,2.5rem) 2.5rem;min-height:calc(100svh - 66px);align-items:center}
.sheet{position:relative;align-self:stretch;display:flex;flex-direction:column;padding:1.2rem 1.4rem;background-color:var(--sheet);border:1.5px solid var(--ink);outline:1px solid var(--ink);outline-offset:5px;margin:6px;
  background-image:linear-gradient(oklch(0.27 0.015 255/.05) 1px,transparent 1px),linear-gradient(90deg,oklch(0.27 0.015 255/.05) 1px,transparent 1px);background-size:28px 28px}
.sheet-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;flex-wrap:wrap}
.sheet h1{font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.rule{margin:0;max-width:44ch;color:var(--steel);font-size:.95rem}
.stage{position:relative;margin:auto;width:min(100%,calc((100svh - 230px) * var(--ar,1)));flex:none}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tblock{position:absolute;right:1rem;bottom:1rem;display:flex;align-items:stretch;border:1.5px solid var(--ink);background:var(--sheet)}
.tblock svg{width:40px;height:40px;padding:5px;border-right:1.5px solid var(--ink);box-sizing:content-box}
.tblock div{display:flex;flex-direction:column;justify-content:center;padding:.3rem .7rem;border-right:1px solid var(--ink)}
.tblock div:last-child{border-right:0}
.tblock span{font:600 .6rem var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--steel)}
.tblock b{font:700 .8rem var(--disp);white-space:nowrap}
.post{align-self:stretch;display:flex;flex-direction:column;padding-bottom:56px;background:linear-gradient(90deg,oklch(0.4 0.012 255),oklch(0.3 0.012 255)) 22% 0/12px 100% no-repeat,linear-gradient(90deg,oklch(0.4 0.012 255),oklch(0.3 0.012 255)) 78% 0/12px 100% no-repeat}
.post .board{margin:6px 0 0}
.board-lines .wide{grid-column:1/-1;border-left:0!important;border-top:1.5px solid var(--ink)}
.wm b{white-space:nowrap}

polygon{stroke:var(--ink);stroke-width:.7;stroke-linejoin:round;transition:fill .2s,stroke .2s}
line{stroke:var(--ink);stroke-width:.7;stroke-linecap:round;transition:stroke .2s}
.t.earth{fill:oklch(0.7 0.08 48)}.x.earth{fill:oklch(0.55 0.1 40)}.y.earth{fill:oklch(0.47 0.09 38)}
.t.con{fill:oklch(0.97 0.004 85)}.x.con{fill:oklch(0.87 0.008 80)}.y.con{fill:oklch(0.79 0.01 80)}
.t.old{fill:oklch(0.9 0.03 88)}.x.old{fill:oklch(0.8 0.035 85)}.y.old{fill:oklch(0.72 0.035 82)}
.t.dark,.x.dark,.y.dark{fill:oklch(0.36 0.015 255)}.t.dark{fill:oklch(0.46 0.015 255)}
.t.office{fill:oklch(0.8 0.015 255)}.x.office{fill:oklch(0.66 0.015 255)}.y.office{fill:oklch(0.58 0.015 255)}
.t.stl{fill:oklch(0.5 0.012 255)}.x.stl{fill:oklch(0.38 0.012 255)}.y.stl{fill:oklch(0.3 0.012 255)}
.t.deck{fill:oklch(0.9 0.008 80)}.x.deck,.y.deck{fill:oklch(0.75 0.01 80)}
.t.mep,.x.mep,.y.mep{fill:oklch(0.62 0.06 75)}.t.mep{fill:oklch(0.74 0.06 78)}
.mast{fill:transparent;stroke-width:.9}.lat{stroke-width:.45}.tie,.cable{stroke-width:.5}
.t.cab,.x.cab,.y.cab{fill:oklch(0.62 0.06 75)}.t.cab{fill:oklch(0.75 0.06 78)}
.t.asph{fill:oklch(0.42 0.012 255)}.x.asph,.y.asph{fill:oklch(0.3 0.012 255)}
.t.drain{fill:oklch(0.55 0.012 255)}.x.drain,.y.drain{fill:oklch(0.62 0.01 255)}
.t.block{fill:oklch(0.86 0.012 85)}.x.block{fill:oklch(0.74 0.014 82)}.y.block{fill:oklch(0.66 0.015 80)}
.t.rebar,.x.rebar,.y.rebar{fill:oklch(0.5 0.1 40)}
.t.skip,.x.skip,.y.skip{fill:oklch(0.55 0.11 40)}.t.skip{fill:oklch(0.62 0.1 42)}
.t.board,.x.board,.y.board{fill:oklch(0.72 0.06 72)}
.water{fill:oklch(0.72 0.04 220);stroke:none}.ripple{stroke:oklch(0.88 0.02 220)}
.w{fill:oklch(0.4 0.02 250);stroke-width:.4}.glass{fill:oklch(0.5 0.03 235)}.door{fill:oklch(0.34 0.015 255)}.old-w{fill:oklch(0.45 0.02 70)}
.fl{stroke:oklch(0.7 0.01 80);stroke-width:.5}.dash{stroke:oklch(0.95 0.005 85);stroke-dasharray:8 7;stroke-width:1}
.pole{stroke:oklch(0.5 0.05 70);stroke-width:1.3}.brace{stroke:oklch(0.35 0.012 255);stroke-width:1.1}.leg{stroke-width:1}.staff{stroke:var(--laterite);stroke-width:2}

.grp,.base{animation:rise .7s var(--ease) calc(var(--i)*70ms) backwards;transition:opacity .25s,filter .25s}
@keyframes rise{from{opacity:0;transform:translateY(-30px)}}
.focus .grp:not(.on){filter:saturate(.7)}
.grp.on polygon{stroke:var(--bronze-ink)}
.grp.on .t:not(.w){fill:oklch(0.9 0.045 80)}.grp.on .x:not(.w){fill:oklch(0.76 0.07 76)}.grp.on .y:not(.w){fill:oklch(0.64 0.07 72)}
.grp.on .mast{fill:transparent}.grp.on line{stroke:var(--bronze-ink)}
.grp{cursor:pointer}
.load.swing{animation:hoist 1.8s var(--ease)}
@keyframes hoist{35%{transform:translateY(-26px)}}

.bubble{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--sheet);font:800 1rem/1 var(--disp);display:grid;place-items:center;transition:transform .18s var(--ease),background .18s,color .18s;z-index:2}
.bubble:hover{transform:translate(-50%,-50%) scale(1.12)}
.bubble.on{background:var(--ink);color:var(--sheet);box-shadow:0 0 0 4px var(--bronze)}

/* signboard */
.board{position:relative;background:var(--sheet);border:3px solid var(--ink);margin-bottom:56px;animation:rise .7s var(--ease) .3s backwards}

.board-top{display:flex;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--sheet);padding:.55rem 1rem;font:600 .78rem var(--disp);text-transform:uppercase;letter-spacing:.12em}
.board-top #boardNo{color:var(--bronze)}
.board-body{padding:1.3rem 1.2rem .8rem;min-height:300px}
.board h2{font-size:clamp(1.6rem,2.3vw,2.2rem);font-weight:800;text-transform:uppercase;margin-bottom:.9rem}
.clause{margin:0 0 1rem;font-size:1.02rem}
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{border:1.5px solid var(--ink);border-radius:2px;padding:.2rem .55rem;font:500 .8rem var(--disp)}
.board-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:0 1.2rem 1.1rem}
.steps{display:flex;gap:.4rem}
.step{width:46px;height:46px;border:1.5px solid var(--ink);background:none;border-radius:2px;font:600 1.5rem/1 var(--disp)}
.step:hover{background:var(--concrete)}
.board-lines{margin:0;border-top:3px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.board-lines div{padding:.6rem 1rem}.board-lines div+div{border-left:1.5px solid var(--ink)}
.board-lines dt{font:600 .68rem var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--steel)}
.board-lines dd{margin:.1rem 0 0;font:600 .88rem/1.45 var(--disp)}

/* sections */
section{padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,3.5rem)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:2.5rem}
.sec-head h1,.sec-head h2{font-size:clamp(2rem,4.4vw,3.8rem);font-weight:800;text-transform:uppercase}
.sec-head p{margin:0;max-width:52ch;color:var(--steel)}
.objects{background:var(--sheet);border-top:3px solid var(--ink)}
.schedule{list-style:none;margin:0;padding:0;border-bottom:1.5px solid var(--ink)}
.schedule a{display:grid;grid-template-columns:64px minmax(200px,.8fr) minmax(0,1.6fr);gap:1.5rem;padding:1.4rem .8rem;border-top:1.5px solid var(--ink);text-decoration:none;transition:background .18s}
.schedule a:hover{background:var(--concrete)}
.schedule .no{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:800 1.1rem var(--disp)}
.schedule h3{font-size:1.25rem;font-weight:700;text-transform:uppercase;margin-top:.55rem}
.schedule p{margin:0;max-width:70ch}
.schedule .tags{margin-top:.7rem}

.programme{border-top:3px solid var(--ink)}
.gantt{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);border-top:1.5px solid var(--ink)}
.g-axis{display:contents}
.g-axis span{font:600 .72rem var(--disp);text-transform:uppercase;letter-spacing:.12em;color:var(--steel);padding:.6rem 0}
.g-scale{display:grid;grid-template-columns:repeat(10,1fr);border-left:1.5px solid var(--ink)}
.g-scale i{font-style:normal;font:600 .72rem var(--disp);text-transform:uppercase;letter-spacing:.1em;color:var(--steel);padding:.6rem .5rem;grid-column:span 2}
.g-row{display:contents}
.g-label{padding:1rem 1rem 1rem 0;border-top:1px solid var(--rule)}
.g-label h3{font-size:1.05rem;font-weight:700;text-transform:uppercase}
.g-label p{margin:.3rem 0 0;font-size:.92rem;color:var(--steel)}
.g-track{position:relative;display:grid;grid-template-columns:repeat(10,1fr);align-items:center;border-top:1px solid var(--rule);border-left:1.5px solid var(--ink);background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--rule) calc(20% - 1px) 20%)}
.g-bar{height:26px;border:1.5px solid var(--ink);background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,transparent 2px 7px);transform-origin:left;animation:grow .9s var(--ease) backwards}
.g-bar.main{background:var(--bronze)}
@keyframes grow{from{transform:scaleX(0)}}

.cta{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;background:var(--lat-deep);color:var(--sheet)}
.cta h2{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:800;text-transform:uppercase;max-width:22ch}
.cta p{margin:.8rem 0 0;font-size:1.05rem}

/* form */
.form-wrap{max-width:1100px;margin:0 auto}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.35rem;font:600 .9rem var(--disp)}
.opt{font-weight:400;color:var(--steel)}
input,textarea{font:400 1rem var(--text);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink);border-radius:2px;padding:.75rem .85rem;min-height:48px;width:100%}
input::placeholder,textarea::placeholder{color:oklch(0.52 0.012 255)}
input:focus,textarea:focus{outline:3px solid var(--bronze);outline-offset:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pick{border:0;padding:0;margin:0}
.pick legend{font:600 .9rem var(--disp);margin-bottom:.5rem}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.pick-grid button{display:flex;gap:.6rem;align-items:center;text-align:left;min-height:56px;padding:.6rem .75rem;background:var(--sheet);border:1.5px solid var(--ink);border-radius:2px;font:600 .88rem/1.2 var(--disp)}
.pick-grid button b{flex:none;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.pick-grid button[aria-checked="true"]{background:var(--ink);color:var(--sheet);box-shadow:inset 0 -3px 0 var(--bronze)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-err{margin:0;color:var(--lat-deep);font-weight:600}
.form-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.note{color:var(--steel);font-size:.9rem}
.stamp-card{padding:2.5rem;background:var(--sheet);border:1.5px solid var(--ink);text-align:center}
.stamp{display:inline-block;font:800 2rem var(--disp);text-transform:uppercase;letter-spacing:.1em;color:var(--lat-deep);border:4px solid var(--lat-deep);padding:.3rem 1.2rem;transform:rotate(-6deg);animation:stamp .45s var(--ease) backwards}
@keyframes stamp{from{transform:rotate(-6deg) scale(1.8);opacity:0}}
.stamp-card p{font-size:1.1rem;margin:1.4rem 0}

.sec-head p a,.board-lines a{color:var(--ink);text-decoration-color:var(--bronze);text-underline-offset:3px}

/* footer title block */
.titleblock{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;background:var(--band);color:var(--on-band);border-top:3px solid var(--bronze)}
.titleblock>div{padding:1.4rem clamp(1rem,2vw,1.6rem);border-left:1px solid oklch(0.4 0.012 255);display:flex;flex-direction:column;gap:.35rem;min-width:0}
.tb-brand{flex-direction:row!important;align-items:center;gap:.9rem!important;border-left:0!important}
.tb-brand b{display:block;font:700 1rem var(--disp);text-transform:uppercase}
.tb-brand span{color:var(--on-band-mute);font-size:.88rem}
.titleblock .k{font:600 .7rem var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--bronze)}
.titleblock a{text-decoration:none}.titleblock a:hover{text-decoration:underline}

.dock{display:none}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--sheet);padding:.8rem 1.1rem;border-radius:2px;box-shadow:inset 0 -3px 0 var(--bronze);font:500 .92rem var(--disp);max-width:calc(100vw - 2rem)}
.toast a{color:var(--bronze)}

@media (max-width:1100px){
  .links{display:none}.hud{margin-left:auto}
  .site{grid-template-columns:1fr;min-height:0}
  .stage{width:100%}
  .titleblock{grid-template-columns:1fr 1fr}.tb-brand{grid-column:1/-1}
}
@media (max-width:700px){
  .hoard{gap:.6rem;padding:.5rem .8rem}
  .wm small{letter-spacing:.28em}.wm b{font-size:1rem}.mark{width:30px;height:33px}
  .quote-top{display:none}
  .site{padding:.8rem .6rem 2rem}
  .sheet{padding:.8rem .6rem;margin:5px}
  .tblock{position:static;margin-top:.6rem}.tblock div:nth-child(4){display:none}.tblock div:nth-child(3){flex:1;border-right:0}
  .schedule a>div{grid-column:1/-1}
  .wm small{font-size:.55rem}
  .bubble{width:30px;height:30px;font-size:.85rem}
  .sec-head{grid-template-columns:1fr;gap:1rem}
  .schedule a{grid-template-columns:48px minmax(0,1fr);gap:.8rem}
  .schedule a p,.schedule a .tags{grid-column:2}
  .gantt{grid-template-columns:1fr}
  .g-axis>span:first-child{display:none}
  .g-track{height:44px}
  .g-label{padding-right:0}
  .row2,.pick-grid{grid-template-columns:1fr}
  .titleblock{grid-template-columns:1fr;padding-bottom:70px}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:.5rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:var(--sheet);border-top:3px solid var(--ink)}
  .dock a:first-child{display:grid;place-items:center;padding:0 1rem;font:600 .9rem var(--disp);text-decoration:none;border:1.5px solid var(--ink);border-radius:2px}
  .dock .btn{flex:1}
  .toast{bottom:5rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
