/* renovationcost.sg — contractor directory.
   Loaded after assets/style.css by every page under /contractors/, the claim
   page and the firm portal. The base palette is the site's own (style.css);
   nothing here adds a grey or a button colour.

   Each segment differs by three things only: an accent, a card layout and its
   filters. The accent (--seg) is used for the header band's edge, the active
   segment tab, the segment badge and the rule under the H1. It is never a
   button: buttons are lemon (--scan) everywhere. Red stays for money at risk. */

body.dir{--seg:#2C4C5C;--seg-tint:#E6ECEE;background:var(--paper)}
body.seg-hdb{--seg:#2C4C5C;--seg-tint:#E6ECEE}
body.seg-condo{--seg:#3B4E8C;--seg-tint:#E8EAF3}
body.seg-landed{--seg:#8A6A2F;--seg-tint:#F7F2E8}
body.seg-windows{--seg:#2F6466;--seg-tint:#E3EEEE}
body.seg-casetrust{--seg:#4F6E4B;--seg-tint:#E4ECE1}
body.seg-hub{--seg:#2B2622;--seg-tint:var(--band)}

.dir .nav-links a.on{color:var(--ink);font-weight:600}

/* ---------- segment tabs ---------- */
.segnav{background:#fff;border-bottom:1px solid var(--line)}
.segnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.segnav .wrap::-webkit-scrollbar{display:none}
.segnav a{flex:0 0 auto;padding:13px 14px 11px;font-size:.88rem;font-weight:500;
  color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.segnav a:hover{color:var(--ink)}
.segnav a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--seg)}
.segnav a i{font-style:normal;font-family:'IBM Plex Mono';font-size:.7rem;color:var(--ink-faint);margin-left:6px}

/* ---------- header band ---------- */
.band{background:var(--seg-tint);border-top:4px solid var(--seg);border-bottom:1px solid var(--line)}
.band .wrap{padding-top:30px;padding-bottom:26px}
.crumbs{font-size:.8rem;color:var(--ink-soft);margin-bottom:14px}
.crumbs a{color:var(--ink)}
.eyebrow-seg{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.band h1{font-size:clamp(1.75rem,4.6vw,2.6rem);letter-spacing:-.03em;line-height:1.05;color:var(--slate);
  padding-bottom:14px;margin-bottom:14px;position:relative;max-width:46rem}
.band h1::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;background:var(--seg);border-radius:2px}
.band .lede{color:var(--ink);max-width:62ch;font-size:1rem}
.stamp{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';
  font-size:.72rem;color:var(--ink-soft);margin-top:14px}
.stamp b{width:6px;height:6px;border-radius:50%;background:var(--seg);display:block}

.main{padding-top:30px;padding-bottom:90px}
.intro{max-width:66ch;color:var(--ink);font-size:.97rem;margin-bottom:26px}
.intro p{margin-bottom:12px}
.order{font-size:.84rem;color:var(--ink-soft);margin:0 0 16px;max-width:70ch}

/* ---------- badges: verified vs self-declared ----------
   Verified: solid accent, a tick, and the number that backs it.
   Self-declared: dashed outline, no number, and it says the firm stated it.
   The two must never be mistaken for each other, at any size. */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.bdg{display:inline-flex;align-items:center;gap:6px;border-radius:7px;font-size:.72rem;
  line-height:1.2;padding:4px 8px;white-space:nowrap;font-weight:600}
.bdg.v{background:var(--bseg,var(--seg));color:#fff;border:1px solid var(--bseg,var(--seg))}
.bdg.v::before{content:"\2713";font-weight:700}
.bdg.v code{font-family:'IBM Plex Mono';font-weight:500;font-size:.7rem;opacity:.95}
.bdg.d{background:#fff;color:var(--ink);border:1.5px dashed var(--bseg,var(--seg));font-weight:500}
.bdg.d em{font-style:italic;color:var(--ink-soft);font-weight:400}
.bdg.b-hdb{--bseg:#2C4C5C}.bdg.b-condo{--bseg:#3B4E8C}.bdg.b-landed{--bseg:#8A6A2F}
.bdg.b-windows{--bseg:#2F6466}.bdg.b-casetrust{--bseg:#4F6E4B}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:.8rem;color:var(--ink-soft);margin:0 0 18px}

/* ---------- filters ---------- */
.filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin-bottom:18px}
.filters .fld{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 150px}
.filters .fld label{margin:0;font-size:.76rem}
.filters select,.filters input[type=search]{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.88rem;background:#fff;color:var(--ink);width:100%}
.filters .chk{display:flex;gap:7px;align-items:center;font-size:.86rem;color:var(--ink);margin:0;flex:0 0 auto;padding-bottom:8px}
.filters .chk input{width:17px;height:17px;accent-color:var(--slate)}
.filters .chips{display:flex;flex-wrap:wrap;gap:6px}
.filters .chips label{margin:0;cursor:pointer}
.filters .chips input{position:absolute;opacity:0;pointer-events:none}
.filters .chips span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:99px;font-size:.84rem;color:var(--ink)}
.filters .chips input:checked+span{border-color:var(--seg);box-shadow:inset 0 0 0 1px var(--seg);font-weight:600}
.filters .chips input:focus-visible+span{outline:3px solid var(--scan);outline-offset:2px}
.filters .fnote{flex:1 0 100%;font-size:.76rem;color:var(--ink-soft);margin:0}
.fstatus{font-family:'IBM Plex Mono';font-size:.76rem;color:var(--ink-soft);margin:-6px 0 14px;min-height:1em}
[hidden]{display:none !important}

/* ---------- HDB: dense three-column grid, licence first ---------- */
.g-hdb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.c-hdb{background:#fff;border:1px solid var(--line);border-left:3px solid var(--seg);border-radius:8px;
  padding:9px 11px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.c-hdb .lic{font-family:'IBM Plex Mono';font-size:.8rem;font-weight:600;color:var(--seg);letter-spacing:.02em}
.c-hdb .lic.none{color:var(--ink-soft);font-weight:400;font-size:.72rem}
.c-hdb .nm{font-size:.88rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.c-hdb .nm a{color:var(--ink);text-decoration:none}
.c-hdb .nm a:hover{text-decoration:underline;text-underline-offset:3px}
.c-hdb .meta{font-family:'IBM Plex Mono';font-size:.68rem;color:var(--ink-soft)}
.c-hdb .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.c-hdb .bdg{font-size:.64rem;padding:2px 6px}
.letter{grid-column:1/-1;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.1rem;
  color:var(--seg);padding:12px 0 2px;border-bottom:1px solid var(--line);margin-bottom:2px}

/* ---------- Condo: two columns, wider cards, project types first ---------- */
.g-condo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.c-condo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 1px 0 var(--line-soft)}
.c-condo .lead{display:flex;flex-wrap:wrap;gap:6px}
.c-condo .lead span{background:var(--seg-tint);color:var(--ink);border-radius:6px;padding:4px 9px;font-size:.8rem;font-weight:600}
.c-condo h3{font-size:1.12rem;margin:0}
.c-condo h3 a{color:var(--ink);text-decoration:none}
.c-condo h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.c-condo .row{font-size:.86rem;color:var(--ink-soft)}
.c-condo .row b{color:var(--ink);font-weight:600}

/* ---------- Landed: single column, full-width rows, scope and years first ---------- */
.g-landed{display:flex;flex-direction:column;border-top:2px solid var(--seg)}
.c-landed{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:8px 28px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.c-landed .lead{display:flex;flex-direction:column;gap:6px}
.c-landed .scope{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--ink)}
.c-landed .yrs{font-family:'IBM Plex Mono';font-size:.82rem;color:var(--ink-soft)}
.c-landed .yrs b{font-size:1.5rem;color:var(--seg);font-weight:600;display:block;line-height:1.1}
.c-landed h3{font-size:1.25rem;margin:0 0 6px}
.c-landed h3 a{color:var(--ink);text-decoration:none}
.c-landed h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.c-landed p{font-size:.92rem;color:var(--ink);margin:0 0 8px;max-width:64ch}
.c-landed .row{font-size:.84rem;color:var(--ink-soft)}

/* ---------- Windows: a register table, licence first ---------- */
.t-win{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.88rem}
.t-win th{text-align:left;font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;padding:10px 12px;border-bottom:2px solid var(--seg);background:var(--seg-tint)}
.t-win td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.t-win td.l{font-family:'IBM Plex Mono';font-weight:600;color:var(--seg);white-space:nowrap}
.t-win td a{color:var(--ink);font-weight:600;text-decoration:none}
.t-win td a:hover{text-decoration:underline}
.t-win td.r{color:var(--ink-soft);font-size:.82rem}

/* ---------- CaseTrust: numbered ledger, accreditation first ---------- */
.g-ct{list-style:none;counter-reset:ct;columns:2;column-gap:28px}
.c-ct{break-inside:avoid;counter-increment:ct;display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.c-ct::before{content:counter(ct);grid-row:span 3;font-family:'IBM Plex Mono';font-size:.74rem;color:var(--seg);
  border:1.5px solid var(--seg);border-radius:50%;width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center}
.c-ct .seal{font-size:.72rem;font-weight:600;color:var(--seg);text-transform:uppercase;letter-spacing:.06em}
.c-ct a{color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.c-ct a:hover{text-decoration:underline}
.c-ct .meta{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--ink-soft)}

/* ---------- empty segment ---------- */
.empty{background:#fff;border:1.5px dashed var(--seg);border-radius:14px;padding:24px;max-width:46rem}
.empty h2{font-size:1.1rem;margin-bottom:6px}
.empty p{font-size:.92rem;color:var(--ink);margin-bottom:12px}

/* ---------- pager and A-Z ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;align-items:center}
.pager a,.pager span{font-family:'IBM Plex Mono';font-size:.82rem;min-width:38px;text-align:center;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:#fff}
.pager a:hover{border-color:var(--seg)}
.pager span.on{background:var(--seg-tint);border-color:var(--seg);font-weight:600}
.pager span.gap{border:none;background:none;min-width:auto}
.az{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 18px}
.az a,.az span{font-family:'IBM Plex Mono';font-size:.8rem;font-weight:600;min-width:32px;text-align:center;
  padding:6px 6px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--ink);background:#fff}
.az a:hover{border-color:var(--seg)}
.az span{color:var(--ink-faint);background:transparent;border-color:transparent;font-weight:400}

/* ---------- hub ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:6px 0 30px}
.tile{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--bseg);
  border-radius:12px;padding:18px;text-decoration:none;color:var(--ink)}
.tile:hover{box-shadow:0 6px 18px rgba(31,28,25,.08)}
.tile h2{font-size:1.15rem}
.tile .n{font-family:'IBM Plex Mono';font-size:1.5rem;font-weight:600;color:var(--bseg);line-height:1}
.tile p{font-size:.86rem;color:var(--ink-soft)}
.tile .bdg{align-self:flex-start}
.regs{width:100%;border-collapse:collapse;font-size:.9rem;max-width:52rem;background:#fff;border:1px solid var(--line)}
.regs th,.regs td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.regs th{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.find{display:flex;gap:8px;max-width:34rem;margin:0 0 6px}
.find input{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.found{list-style:none;max-width:34rem;margin:8px 0 26px}
.found li{padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.found li a{color:var(--ink);font-weight:600}
.found li span{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);margin-left:8px}

/* ---------- sections shared by firm pages ---------- */
.sec{margin:32px 0 0;max-width:48rem}
.sec h2{font-size:1.12rem;margin:0 0 10px;color:var(--slate)}
.sec>p{font-size:.92rem;color:var(--ink);margin:0 0 10px}
.sec ul{padding-left:20px;font-size:.92rem;color:var(--ink)}
.sec li{margin-bottom:7px}
.ans{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:20px;max-width:46rem}
.ans-h{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:1.04rem;color:var(--ink);line-height:1.35}
.ans-h i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:.92rem;margin-top:1px}
.ans p{color:var(--ink);font-size:.92rem;margin:10px 0 0 38px}
.facts{margin:24px 0 0;max-width:48rem;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:4px 18px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.facts dt{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.declared{margin:30px 0 0;max-width:48rem;border:1.5px dashed var(--seg);border-radius:14px;padding:18px 20px;background:#fff}
.declared h2{font-size:1.1rem;margin:0 0 4px}
.declared .note{font-size:.82rem;color:var(--ink-soft);margin:0 0 12px}
.declared .facts{margin:0;border-top:none}
.declared .facts div:last-child{border-bottom:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.gallery figcaption{font-size:.74rem;color:var(--ink-soft);margin-top:4px}
.prices{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;border:1px solid var(--line)}
.prices th,.prices td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prices th{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.prices td.p{font-family:'IBM Plex Mono';font-weight:600;white-space:nowrap}
.prices tr.cat td{background:var(--card);font-weight:600;font-size:.8rem}
.prices .eff{font-family:'IBM Plex Mono';font-size:.74rem;color:var(--ink-soft);white-space:nowrap}
.tpv{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;background:#fff;font-size:.8rem;font-weight:600;color:var(--ink);margin:4px 0 12px}
.tpv svg{width:18px;height:18px}
.claimbox{margin:30px 0 0;max-width:48rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.claimbox h2{font-size:1.05rem;flex:1 0 100%;margin:0}
.claimbox p{font-size:.9rem;color:var(--ink);flex:1 1 22rem;margin:0}
.claimed{margin:22px 0 0;max-width:48rem;border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:#fff}
.claimed h2{font-size:1.02rem;margin:0 0 4px}
.claimed .note{font-size:.82rem;color:var(--ink-soft);margin:0 0 10px}
.claimed div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:4px 18px;padding:8px 0;
  border-top:1px solid var(--line-soft);font-size:.92rem}
.claimed dt{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.claimed dd{margin:0;overflow-wrap:anywhere}
.cta{margin:30px 0 0;max-width:48rem;background:var(--band);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cta h2{font-size:1.08rem;margin:0 0 6px}
.cta p{font-size:.92rem;margin:0 0 12px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{font-size:.85rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 12px;text-decoration:none}
.links a:hover{border-color:var(--seg)}
.foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-soft);max-width:68ch}
.foot p{margin-bottom:10px}

@media(max-width:900px){
  .g-hdb{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .g-hdb,.g-condo{grid-template-columns:minmax(0,1fr)}
  .c-landed{grid-template-columns:minmax(0,1fr);gap:10px}
  .g-ct{columns:1}
  .facts div,.claimed div{grid-template-columns:minmax(0,1fr)}
  .ans p{margin-left:0}
  .t-win thead{display:none}
  .t-win,.t-win tbody,.t-win tr,.t-win td{display:block;width:100%}
  .t-win tr{border-bottom:1px solid var(--line);padding:6px 0}
  .t-win td{border:none;padding:3px 12px}
  .prices{font-size:.82rem}
}

/* ---------- claim page and firm portal forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;max-width:46rem}
.form .row{margin-bottom:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input[type=tel],.form input[type=url],.form input[type=file],.form input[type=date],.form textarea{
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;
  background:#fff;color:var(--ink);width:100%}
.form textarea{min-height:110px;resize:vertical}
.form fieldset{border:none;margin:0 0 16px;padding:0}
.form legend{font-size:.85rem;color:var(--ink);font-weight:600;margin-bottom:8px}
.form .checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.form .checks label{display:flex;gap:6px;align-items:center;margin:0;font-size:.88rem;color:var(--ink);font-weight:400}
.form .checks input{width:16px;height:16px;accent-color:var(--slate)}
.form .areas{max-height:260px;overflow:auto;border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px}
.form .areas h4{font-size:.74rem;font-family:'IBM Plex Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0}
.hint{font-size:.78rem;color:var(--ink-soft);margin-top:5px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink);margin:0 0 14px;font-weight:400}
.tick input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--slate)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
p.err{color:var(--flag);font-size:.9rem;margin:10px 0}
.ok-note{background:var(--ok-soft);border:1px solid #C9D6C4;border-radius:12px;padding:12px 14px;font-size:.9rem;margin:10px 0}
.status-pill{font-family:'IBM Plex Mono';font-size:.7rem;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:#fff}
.status-pill.pending{border-color:#F0D2A6;background:var(--warn-soft)}
.status-pill.live{border-color:#C9D6C4;background:var(--ok-soft)}
.ptable{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff}
.ptable th,.ptable td{padding:6px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.ptable select,.ptable input{padding:7px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.85rem;width:100%;background:#fff}
.ptable td.x button{background:none;border:none;color:var(--ink-soft);font-size:1.1rem;cursor:pointer}
.ptable tr.bad td{background:var(--flag-soft)}
.embed{font-family:'IBM Plex Mono';font-size:.76rem;width:100%;min-height:90px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.thumbs figure{margin:0;width:120px}
.thumbs img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.thumbs input{width:100%;font-size:.74rem;padding:4px 6px;border:1px solid var(--line);border-radius:6px;margin-top:4px}
.thumbs button{font-size:.72rem;background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:2px 0}
@media(max-width:640px){.form .row2{grid-template-columns:1fr;gap:0}}