/* ============================================================
   BUILDPANAMA — tokens
   ============================================================ */
:root{
  --ground:#F1F0EA;
  --ground-2:#E8E7DF;
  --surface:#FBFAF6;
  --ink:#16211D;
  --ink-soft:#5A6560;
  --ink-faint:#8A938D;
  --line:#D8D6CD;
  --line-strong:#C3C1B5;
  --jade:#0F6B4F;
  --jade-ink:#0A4E39;
  --jade-wash:rgba(15,107,79,.08);
  --clay:#B25C3A;
  --clay-wash:rgba(178,92,58,.10);
  --shadow:0 1px 0 rgba(22,33,29,.04), 0 10px 30px -18px rgba(22,33,29,.35);

  --fs-hero:clamp(2.7rem,7.2vw,5.4rem);
  --fs-h2:clamp(1.75rem,3.6vw,2.7rem);
  --fs-h3:1.0625rem;
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.6875rem;

  --display:"Arial Narrow","Helvetica Neue Condensed","Liberation Sans Narrow","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Consolas",ui-monospace,"SF Mono","Roboto Mono","Courier New",monospace;

  --pad:clamp(1.15rem,4vw,2.5rem);
  --max:1200px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E1412;
    --ground-2:#121A17;
    --surface:#161F1B;
    --ink:#E7EDE9;
    --ink-soft:#95A29B;
    --ink-faint:#6E7C75;
    --line:#243029;
    --line-strong:#33443A;
    --jade:#35C48D;
    --jade-ink:#8FE6C2;
    --jade-wash:rgba(53,196,141,.10);
    --clay:#DE8B62;
    --clay-wash:rgba(222,139,98,.12);
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 40px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1412; --ground-2:#121A17; --surface:#161F1B;
  --ink:#E7EDE9; --ink-soft:#95A29B; --ink-faint:#6E7C75;
  --line:#243029; --line-strong:#33443A;
  --jade:#35C48D; --jade-ink:#8FE6C2; --jade-wash:rgba(53,196,141,.10);
  --clay:#DE8B62; --clay-wash:rgba(222,139,98,.12);
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 40px -22px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --ground:#F1F0EA; --ground-2:#E8E7DF; --surface:#FBFAF6;
  --ink:#16211D; --ink-soft:#5A6560; --ink-faint:#8A938D;
  --line:#D8D6CD; --line-strong:#C3C1B5;
  --jade:#0F6B4F; --jade-ink:#0A4E39; --jade-wash:rgba(15,107,79,.08);
  --clay:#B25C3A; --clay-wash:rgba(178,92,58,.10);
  --shadow:0 1px 0 rgba(22,33,29,.04), 0 10px 30px -18px rgba(22,33,29,.35);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.label{
  font-family:var(--display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.disp{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:.98}

/* ---------- title-block header ---------- */
.top{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:1.25rem;min-height:60px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand-mark{width:26px;height:26px;flex:none;color:var(--jade)}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.01em}
.brand-pa{color:var(--jade)}
.brand-tag{font-family:var(--mono);font-size:.6875rem;color:var(--ink-faint);letter-spacing:.06em;padding-left:.6rem;border-left:1px solid var(--line-strong)}
.nav{display:flex;gap:1.4rem}
.nav a{font-size:var(--fs-small);color:var(--ink-soft);text-decoration:none}
.nav a:hover{color:var(--ink)}
.top-tools{display:flex;align-items:center;gap:.5rem}
.lang{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.lang button{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;padding:.3rem .55rem;
  background:transparent;color:var(--ink-faint);border:0;cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:.8125rem;padding:.7rem 1.15rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--jade);color:#FBFAF6}
.btn-primary:hover{background:var(--jade-ink)}
@media (prefers-color-scheme:dark){
  .btn-primary{color:#08120E}
  .btn-primary:hover{background:var(--jade-ink);color:#08120E}
}
:root[data-theme="dark"] .btn-primary{color:#08120E}
:root[data-theme="dark"] .btn-primary:hover{background:var(--jade-ink);color:#08120E}
:root[data-theme="light"] .btn-primary{color:#FBFAF6}
:root[data-theme="light"] .btn-primary:hover{background:var(--jade-ink);color:#FBFAF6}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ground-2)}
@media (max-width:900px){.nav{display:none}.top .btn-primary{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#celosia{position:absolute;inset:0;width:100%;height:100%;opacity:.6;
  -webkit-mask-image:radial-gradient(120% 90% at 12% 8%,#000 5%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 12% 8%,#000 5%,transparent 72%);}
.hero-sweep{position:absolute;inset:-20% -40%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,var(--jade-wash) 50%,transparent 58%);
  animation:sweep 22s linear infinite;}
@keyframes sweep{0%{transform:translateX(-25%)}100%{transform:translateX(25%)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem);align-items:start}
@media (max-width:960px){.hero-in{grid-template-columns:1fr;padding-block:2.5rem 3rem}}

.eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--jade);flex:none}
h1{font-family:var(--display);font-weight:700;font-size:var(--fs-hero);line-height:.94;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--jade);}
.hero-sub{max-width:46ch;color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.1875rem);margin:1.5rem 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-note{display:flex;gap:.5rem;align-items:baseline;margin-top:1.4rem;font-size:var(--fs-small);color:var(--ink-faint)}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);gap:1.6rem;justify-content:start;
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero-facts dt{font-family:var(--mono);font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-facts dd{margin:.2rem 0 0;font-size:var(--fs-small);color:var(--ink-faint);max-width:14ch}

/* ---------- estimator ---------- */
.est{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow)}
.est-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.1rem;border-bottom:1px solid var(--line);background:var(--ground-2);border-radius:3px 3px 0 0}
.est-body{padding:1.35rem 1.1rem 1.1rem;display:grid;gap:1.35rem}
.field{display:grid;gap:.6rem}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.field-val{font-family:var(--mono);font-size:.9375rem;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-strong);border-radius:3px}
input[type=range]::-moz-range-track{height:3px;background:var(--line-strong);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--jade);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--jade);margin-top:-7.5px}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--jade);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--jade)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:2px;overflow:hidden}
.seg label{position:relative;text-align:center;padding:.55rem .3rem;font-size:.8125rem;cursor:pointer;color:var(--ink-soft);
  border-right:1px solid var(--line-strong)}
.seg label:last-child{border-right:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--ink);color:var(--ground)}
.seg label:has(input:focus-visible){outline:2px solid var(--jade);outline-offset:-2px}
select{width:100%;font-family:var(--body);font-size:.9375rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:2px;padding:.6rem .7rem;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.est-out{border-top:1px solid var(--line);padding:1.1rem;background:var(--ground-2);border-radius:0 0 3px 3px}
.est-total{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.est-range{font-family:var(--mono);font-size:clamp(1.35rem,3.4vw,1.8rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.est-perm2{font-family:var(--mono);font-size:.8125rem;color:var(--ink-soft);text-align:right}
.bars{display:grid;gap:.4rem;margin-top:1.1rem}
.bar-row{display:grid;grid-template-columns:11ch 1fr 9ch;gap:.7rem;align-items:center;font-size:.75rem}
.bar-row .bn{color:var(--ink-soft)}
.bar-track{height:8px;background:var(--line);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;background:var(--jade);width:0;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar-row:nth-child(6) .bar-fill{background:var(--clay)}
.bar-row .bv{font-family:var(--mono);text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.est-foot{margin:.9rem 0 0;font-size:.75rem;color:var(--ink-faint);line-height:1.45}

/* ---------- generic section ---------- */
.sec{padding-block:clamp(3.5rem,7vw,6rem);border-bottom:1px solid var(--line)}
.sec-alt{background:var(--ground-2)}
.sec-head{display:grid;gap:.9rem;max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);line-height:1.02;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--ink-soft);max-width:56ch}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feat{background:var(--ground);padding:1.6rem 1.4rem;display:grid;gap:.55rem;align-content:start}
.feat-ico{width:22px;height:22px;color:var(--jade)}
.feat h3{font-family:var(--body);font-size:var(--fs-h3);font-weight:600;margin:.5rem 0 0}
.feat p{margin:0;font-size:var(--fs-small);color:var(--ink-soft)}
.feat .tag{font-family:var(--mono);font-size:.6875rem;color:var(--ink-faint);letter-spacing:.06em;margin-top:.35rem}
@media (max-width:900px){.feats{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1100px){.feats{grid-template-columns:repeat(2,1fr)}}

/* ---------- quote compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:900px){.compare{grid-template-columns:1fr}}
.qtable{border:1px solid var(--line);background:var(--surface);border-radius:3px;overflow:hidden;box-shadow:var(--shadow)}
.qtable-head{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:.5rem;padding:.65rem .9rem;
  background:var(--ink);color:var(--ground)}
.qtable-head span{font-family:var(--display);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.qrow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);font-size:.8125rem}
.qrow:last-child{border-bottom:0}
.qrow .qn{color:var(--ink-soft)}
.qrow span+span{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.qrow .low{color:var(--jade);font-weight:600}
.qrow .miss{color:var(--clay)}
.qrow-total{background:var(--ground-2);font-weight:600}
.checks{display:grid;gap:.85rem;margin:1.6rem 0 0;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:.7rem;font-size:.9375rem;color:var(--ink-soft)}
.checks svg{width:18px;height:18px;color:var(--jade);margin-top:.2rem}
.checks b{color:var(--ink);font-weight:600}

/* ---------- directory ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.9rem;padding:1rem 1.1rem;
  border:1px solid var(--line);background:var(--surface);border-radius:3px;margin-bottom:1.1rem}
.filter{display:grid;gap:.35rem;min-width:12rem;flex:1 1 12rem}
.filter select{font-size:.875rem;padding:.5rem .7rem}
.filter-count{font-family:var(--mono);font-size:.8125rem;color:var(--ink-soft);
  padding-bottom:.55rem;white-space:nowrap}
.filter-count b{color:var(--jade);font-weight:400}

.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:3px;display:grid;
  overflow:hidden;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--line-strong)}
.card[hidden]{display:none}

/* elevation-drawing thumbnails standing in for project photos */
.shots{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.shot{position:relative;aspect-ratio:4/3;background:var(--ground-2);overflow:hidden}
.shots .shot:first-child{aspect-ratio:16/11}
.shot::before{content:"";position:absolute;inset:auto 12% 16% 12%;height:52%;
  background:var(--line-strong);opacity:.85}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:16%;height:1px;background:var(--ink-faint);opacity:.5}
.shot.f1::before{clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%)}
.shot.f2::before{clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
.shot.f3::before{clip-path:polygon(0 30%,38% 30%,38% 8%,100% 8%,100% 100%,0 100%)}
.shot.f4::before{clip-path:polygon(0 12%,100% 12%,100% 100%,0 100%);inset:auto 8% 16% 8%}
.shot-tag{position:absolute;left:.5rem;bottom:.45rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.08em;color:var(--ink-faint)}
.shot-more{display:grid;place-items:center;font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);
  background:var(--ground-2);aspect-ratio:4/3}
.shot-more::before,.shot-more::after{display:none}

.card-in{padding:1.05rem 1.1rem 1.15rem;display:grid;gap:.75rem}
.card-top{display:flex;align-items:flex-start;gap:.7rem}
.avatar{width:36px;height:36px;border-radius:2px;background:var(--jade-wash);color:var(--jade);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1rem;flex:none}
.card-name{font-weight:600;font-size:.9375rem;line-height:1.25}
.card-meta{font-family:var(--mono);font-size:.6875rem;color:var(--ink-faint);margin-top:.15rem}
.rating{display:flex;align-items:center;gap:.45rem;font-size:.8125rem;color:var(--ink-soft);margin-left:auto;flex:none}
.stars{display:flex;gap:1px;color:var(--jade)}
.stars svg{width:12px;height:12px}
.stars .off{color:var(--line-strong)}
.rating .rv{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.reviews{font-size:.75rem;color:var(--ink-faint)}

.badges{display:flex;flex-wrap:wrap;gap:.35rem}
.badge{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;padding:.22rem .45rem;border-radius:2px;
  border:1px solid var(--line-strong);color:var(--ink-soft);display:inline-flex;align-items:center;gap:.3rem}
.badge-ok{border-color:var(--jade);color:var(--jade);background:var(--jade-wash)}
.badge-ok svg{width:10px;height:10px}

.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;border-top:1px solid var(--line);padding-top:.75rem;font-size:.8125rem}
.kv dt{font-family:var(--display);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.2rem}
.kv dd{margin:0;color:var(--ink-soft)}
.kv dd.price{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font-size:.6875rem;padding:.15rem .45rem;border-radius:999px;background:var(--ground-2);
  border:1px solid var(--line);color:var(--ink-soft)}

.card-foot{display:flex;align-items:center;gap:.6rem;border-top:1px solid var(--line);padding-top:.85rem;flex-wrap:wrap}
.card-foot .btn{padding:.6rem .9rem;font-size:.75rem}
.icon-link{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-strong);
  border-radius:2px;color:var(--ink-soft);text-decoration:none;flex:none}
.icon-link:hover{color:var(--jade);border-color:var(--jade)}
.icon-link svg{width:15px;height:15px}
.card-foot .btn-primary{margin-left:auto}

/* contractor call-to-action, sitting under the directory it belongs to */
.join{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.25rem,4vw,2.5rem);align-items:center;
  margin-top:1.6rem;padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--jade);
  background:var(--jade-wash);border-radius:3px}
@media (max-width:820px){.join{grid-template-columns:1fr}}
.join-text{display:grid;gap:.55rem}
.join-text h3{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.015em;line-height:1.02;margin:0}
.join-text p{margin:0;color:var(--ink-soft);font-size:.9375rem;max-width:58ch}
.join-cta{display:grid;gap:.6rem;justify-items:start}
@media (min-width:821px){.join-cta{justify-items:end;text-align:right}}
.btn-lg{padding:.95rem 1.5rem;font-size:.9375rem}
.join-note{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-faint)}

.dir-empty{display:none;border:1px dashed var(--line-strong);border-radius:3px;padding:2rem;
  text-align:center;color:var(--ink-soft);font-size:.9375rem}
.dir-empty.on{display:block}
.sample-note{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-faint);
  border:1px dashed var(--line-strong);padding:.3rem .6rem;border-radius:2px}

/* ---------- money band ---------- */
.money{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){.money{grid-template-columns:1fr}}
.ladder{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rung{background:var(--surface);padding:1rem 1.1rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.rung-t{font-size:.9375rem;font-weight:600}
.rung-s{font-size:.8125rem;color:var(--ink-soft);grid-column:1/-1;margin-top:-.35rem}
.rung-v{font-family:var(--mono);font-size:.9375rem;color:var(--jade);font-variant-numeric:tabular-nums}

/* ---------- builders / supply side ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split > div{background:var(--surface);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:.8rem;align-content:start}
.split h3{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:0;letter-spacing:-.01em}
.split ul{margin:.3rem 0 0;padding-left:1.1rem;color:var(--ink-soft);font-size:.9375rem;display:grid;gap:.45rem}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:76ch}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-size:1.0625rem;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.35rem;top:1.45rem;width:9px;height:9px;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 1.15rem;color:var(--ink-soft);max-width:64ch}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.75rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact-alt{font-size:var(--fs-small);color:var(--ink-faint);margin:.4rem 0 0}
.contact-form{display:grid;gap:1.1rem}
.contact-form textarea{min-height:8rem}
.contact-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.contact-submit .btn{padding:.85rem 1.4rem}
.contact-submit .hint{margin:0}
.contact-ok{display:none;grid-column:1/-1;margin:0;border:1px solid var(--jade);
  background:var(--jade-wash);border-radius:3px;padding:1.1rem 1.2rem;
  font-family:var(--mono);font-size:.875rem;color:var(--jade)}
.contact-ok.on{display:block}

/* ---------- cta ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:var(--ground);border-bottom:1px solid var(--line)}
#celosia2{position:absolute;inset:0;width:100%;height:100%;opacity:.35;
  -webkit-mask-image:radial-gradient(90% 120% at 88% 50%,#000 0%,transparent 70%);
  mask-image:radial-gradient(90% 120% at 88% 50%,#000 0%,transparent 70%)}
.cta-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding-block:clamp(3rem,6vw,4.5rem)}
@media (max-width:900px){.cta-in{grid-template-columns:1fr}}
.cta h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.cta p{color:color-mix(in srgb,var(--ground) 72%,transparent);margin:.9rem 0 0;max-width:48ch}
.cta-link{color:var(--jade-ink);text-underline-offset:3px}
.cta-side{display:grid;gap:.7rem;justify-items:start}
@media (min-width:901px){.cta-side{justify-items:end;text-align:right}}
.cta-foot{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  color:color-mix(in srgb,var(--ground) 55%,transparent);margin:0}
.form{display:flex;gap:.6rem;flex-wrap:wrap}
.form input[type=email]{flex:1 1 15rem;font-family:var(--body);font-size:.9375rem;padding:.75rem .85rem;
  background:transparent;color:var(--ground);border:1px solid color-mix(in srgb,var(--ground) 35%,transparent);border-radius:2px}
.form input[type=email]::placeholder{color:color-mix(in srgb,var(--ground) 45%,transparent)}
.form .btn-primary{flex:none}
.form-note{font-size:.75rem;color:color-mix(in srgb,var(--ground) 55%,transparent);margin:.75rem 0 0}
.form-ok{display:none;font-family:var(--mono);font-size:.875rem;color:var(--jade-ink);
  border:1px solid color-mix(in srgb,var(--ground) 30%,transparent);padding:.85rem;border-radius:2px}
.form-ok.on{display:block}
.form-err{display:none;margin:.75rem 0 0;font-size:.8125rem;color:var(--clay)}
.form-err.on{display:block}
.form button[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.foot{padding-block:2rem;font-size:var(--fs-small);color:var(--ink-faint)}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.foot-in .mono{font-size:.75rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   REGISTRO — contractor sign-up form (registro.html)
   ============================================================ */
.reg-hero{border-bottom:1px solid var(--line);background:var(--ground-2)}
.reg-hero-in{padding-block:clamp(2.2rem,5vw,3.5rem);max-width:62ch;margin-right:auto;text-align:left}
.reg-hero h1{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3.2rem);margin:.9rem 0 0;text-wrap:balance}
.reg-hero p{color:var(--ink-soft);margin:1rem 0 0}
.reg-steps{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.5rem 1.4rem;
  margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.reg-steps span{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint)}

.reg{padding-block:clamp(2.5rem,5vw,4rem)}
.reg-form{max-width:60rem;display:grid;gap:1rem}
fieldset{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:clamp(1.1rem,2.5vw,1.6rem);margin:0}
legend{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  padding:0 .5rem;margin-left:-.5rem}
.fs-note{color:var(--ink-soft);font-size:.875rem;margin:.2rem 0 1.2rem}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.span2{grid-column:1/-1}

.f{display:grid;gap:.4rem}
.f > label{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.f .req{color:var(--jade)}
.f .hint{font-size:.75rem;color:var(--ink-faint);line-height:1.4}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=url],
.f input[type=number],.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:.9375rem;color:var(--ink);background:var(--ground);
  border:1px solid var(--line-strong);border-radius:2px;padding:.6rem .7rem}
.f textarea{resize:vertical;min-height:6.5rem;line-height:1.55}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{
  outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:var(--clay)}
.f .money-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center}
.f .money-pair span{font-family:var(--mono);font-size:.8125rem;color:var(--ink-faint)}

.checks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem}
.check{display:flex;align-items:flex-start;gap:.55rem;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:2px;background:var(--ground);cursor:pointer;font-size:.875rem;line-height:1.35}
.check:hover{border-color:var(--line-strong)}
.check:has(input:checked){border-color:var(--jade);background:var(--jade-wash)}
.check:has(input:focus-visible){outline:2px solid var(--jade);outline-offset:1px}
.check input{margin:.15rem 0 0;accent-color:var(--jade);flex:none}

/* one delivered project — repeated as many times as they add */
.projects{display:grid;gap:1rem;margin-bottom:1.1rem}
.proj{border:1px solid var(--line-strong);border-radius:3px;background:var(--ground);
  padding:clamp(1rem,2.2vw,1.35rem);display:grid;gap:1rem}
.proj-head{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.proj-n{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade)}
.proj-del{margin-left:auto;background:none;border:0;cursor:pointer;padding:.2rem .3rem;
  font-family:var(--body);font-size:.8125rem;color:var(--ink-faint);text-decoration:underline;
  text-underline-offset:3px}
.proj-del:hover{color:var(--clay)}
.proj .drop{padding:1.1rem}
.proj-add{justify-self:start}

.drop{border:1px dashed var(--line-strong);border-radius:3px;padding:1.6rem 1.2rem;text-align:center;
  background:var(--ground);cursor:pointer;display:grid;gap:.4rem;justify-items:center}
.drop:hover,.drop.over{border-color:var(--jade);background:var(--jade-wash)}
.drop svg{width:26px;height:26px;color:var(--ink-faint)}
.drop b{font-size:.9375rem;font-weight:600}
.drop span{font-size:.8125rem;color:var(--ink-faint)}
.drop input{position:absolute;left:-9999px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem;margin-top:.9rem}
.thumb{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--ground-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:.3rem;right:.3rem;width:22px;height:22px;border-radius:2px;
  border:0;background:rgba(10,20,16,.78);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.thumb button:hover{background:var(--clay)}

.consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.875rem;color:var(--ink-soft);line-height:1.5}
.consent input{margin:.2rem 0 0;accent-color:var(--jade);flex:none}

.reg-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-top:.3rem}
.reg-submit .btn{padding:.9rem 1.6rem;font-size:.9375rem}
.reg-submit p{margin:0;font-size:.8125rem;color:var(--ink-faint)}
.reg-err{display:none;border:1px solid var(--clay);background:var(--clay-wash);color:var(--clay);
  border-radius:2px;padding:.85rem 1rem;font-size:.875rem;margin:0}
.reg-err.on{display:block}

.done{display:none;border:1px solid var(--jade);background:var(--jade-wash);border-radius:3px;
  padding:clamp(1.5rem,4vw,2.5rem);max-width:60rem}
.done.on{display:block}
.done h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.2rem);margin:.6rem 0 0;letter-spacing:-.015em}
.done p{color:var(--ink-soft);max-width:56ch}
.done .btn{margin-top:.6rem}