/* OntarioBuilderRankings.ca */
:root{
  --wall:#F4F5F2; --paper:#FFFFFF; --ink:#1C2B3A; --ink-2:#4A5866; --rule:#D9DDD6;
  --tag:#F2B705; --tag-edge:#C99500; --chalk:#2F6DB5;
  --good:#2E7D4F; --mid:#B26B00; --bad:#B3261E;
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 1rem/1.6 var(--body)}
a{color:var(--chalk);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--chalk);outline-offset:2px}
img{max-width:100%}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.25rem}
.measure{max-width:44rem}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.9rem}
h3{font-size:1.35rem;margin-bottom:.4rem}
p{margin:0 0 1rem}
.muted{color:var(--ink-2)}
.small{font-size:.86rem}

/* header */
.top{background:var(--ink);color:#E8ECEF}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.6rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.45rem;color:#fff;text-decoration:none;letter-spacing:.01em}
.brand b{color:var(--tag);font-weight:800}
.nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav a{color:#C9D2DA;text-decoration:none;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{color:#fff}

/* hero */
.hero{padding:3.2rem 0 2.6rem;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center}
.hero p.lede{font-size:1.15rem;max-width:36rem;margin:1.1rem 0 1.6rem;color:var(--ink-2)}
.search{position:relative;max-width:34rem}
.search input{width:100%;font:inherit;font-size:1.1rem;padding:.95rem 1rem;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink)}
.results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 10px 30px rgba(28,43,58,.15);z-index:20;max-height:22rem;overflow:auto;display:none}
.results.open{display:block}
.results a{display:flex;justify-content:space-between;gap:1rem;padding:.65rem .9rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--wall)}
.results a:hover,.results a.sel{background:#EEF3F9}
.results span{color:var(--ink-2);font-size:.88rem;white-space:nowrap}
.results .none{padding:.8rem .9rem;color:var(--ink-2)}

/* the inspection tag: the one bold element */
.tag{position:relative;width:12.5rem;background:var(--tag);color:var(--ink);border:2px solid var(--tag-edge);border-radius:10px 10px 6px 6px;padding:2.4rem 1rem 1rem;text-align:center;box-shadow:0 1px 0 var(--tag-edge),0 12px 24px rgba(28,43,58,.12);transform:rotate(-2.5deg);flex:none}
.tag::before{content:"";position:absolute;top:.7rem;left:50%;width:1.05rem;height:1.05rem;margin-left:-.525rem;border-radius:50%;background:var(--wall);box-shadow:0 0 0 .32rem #FAD34A,0 0 0 .42rem var(--tag-edge)}
.tag .t-score{font-family:var(--display);font-weight:800;font-size:4.2rem;line-height:.9}
.tag .t-out{font-family:var(--display);font-size:1.4rem;font-weight:700}
.tag .t-label{display:block;margin-top:.35rem;font-weight:700;font-size:.95rem}
.tag .t-foot{display:block;margin-top:.7rem;padding-top:.55rem;border-top:1px dashed rgba(28,43,58,.45);font-size:.72rem;line-height:1.35}
.tag.none{background:#E3E6E0;border-color:#B8BDB4}
.tag.none::before{box-shadow:0 0 0 .32rem #EFF1EC,0 0 0 .42rem #B8BDB4}
.tag.none .t-score{font-size:2rem;line-height:1.1}
@media (prefers-reduced-motion:no-preference){.hero .tag{animation:hang 1.6s ease-out 1}}
@keyframes hang{0%{transform:rotate(6deg)}40%{transform:rotate(-5deg)}70%{transform:rotate(-1.5deg)}100%{transform:rotate(-2.5deg)}}

/* score pill used in tables */
.pill{display:inline-block;min-width:3.1rem;text-align:center;font-family:var(--display);font-weight:800;font-size:1.15rem;padding:.12rem .45rem;border-radius:4px;border:2px solid currentColor;background:var(--paper)}
.s-ex,.s-vg{color:var(--good)}.s-gd{color:#4F6B2C}.s-fa{color:var(--mid)}.s-ba{color:var(--bad)}.s-na{color:var(--ink-2);font-size:.9rem}

/* sections */
.sec{padding:2.8rem 0}
.sec + .sec{border-top:1px solid var(--rule)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:2.5rem;align-items:start}

/* tables */
.tbl-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--rule);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:.62rem .8rem;text-align:left;border-bottom:1px solid #ECEEE9;vertical-align:middle}
th{font-weight:700;color:var(--ink-2);font-size:.85rem;background:#FAFBF9;white-space:nowrap}
th button{all:unset;cursor:pointer}
th button:focus-visible{outline:3px solid var(--chalk)}
th[aria-sort] button::after{content:" \25BE";font-size:.75em}
th[aria-sort=ascending] button::after{content:" \25B4"}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.rank{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink-2)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.filters input,.filters select{font:inherit;padding:.55rem .7rem;border:1px solid #BFC5BC;border-radius:5px;background:var(--paper);color:var(--ink)}

/* profile */
.prof-head{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;padding:2.6rem 0 2rem;border-bottom:1px solid var(--rule)}
.crumbs{font-size:.88rem;margin-bottom:.9rem;color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:6px;background:var(--paper);margin:1.6rem 0}
.facts div{padding:.9rem 1rem;border-right:1px solid #ECEEE9}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1.05}
.facts span{font-size:.84rem;color:var(--ink-2)}
.bars{display:grid;gap:1rem;margin:1rem 0 1.5rem}
.bar-row{display:grid;grid-template-columns:13rem minmax(0,1fr) 5.5rem;gap:1rem;align-items:center;font-size:.93rem}
.bar{height:.7rem;background:#E6E9E3;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.bar-row .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.flag{border-left:4px solid var(--bad);background:#FBEDEC;padding:.8rem 1rem;border-radius:0 6px 6px 0;margin:0 0 1rem}
.note{border-left:4px solid var(--chalk);background:#EEF3F9;padding:.8rem 1rem;border-radius:0 6px 6px 0;margin:0 0 1rem}

/* aside: lead + ads */
.aside{display:grid;gap:1.1rem;position:sticky;top:1rem}
.lead{background:var(--ink);color:#E8ECEF;border-radius:8px;padding:1.2rem}
.lead h3{color:#fff}
.lead p{color:#B9C4CE;font-size:.92rem}
.lead label{display:block;font-size:.85rem;margin:.55rem 0 .2rem;color:#DDE3E8}
.lead input,.lead select,.lead textarea{width:100%;font:inherit;font-size:.95rem;padding:.6rem .65rem;border-radius:5px;border:1px solid #6B7B8A;background:#fff;color:var(--ink)}
.lead button{margin-top:.85rem;width:100%;font:700 1rem var(--body);padding:.8rem;border:0;border-radius:5px;background:var(--tag);color:var(--ink);cursor:pointer}
.lead button:hover{background:#FFC61A}
.lead .fine{font-size:.74rem;color:#9FB0BE;margin:.7rem 0 0;line-height:1.45}
.lead .status{font-weight:700;margin-top:.6rem;font-size:.92rem}
.ad{display:block;background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:1rem;text-decoration:none;color:var(--ink)}
.ad:hover{border-color:var(--ink)}
.ad strong{display:block;font-size:1.02rem;margin-bottom:.25rem}
.ad span{display:block;font-size:.9rem;color:var(--ink-2)}
.ad small{display:block;font-size:.72rem;color:#7A8792;margin-top:.55rem}
.ad .go{display:inline-block;margin-top:.55rem;font-weight:700;color:var(--chalk)}

/* guides / prose */
.prose{max-width:44rem;font-size:1.04rem}
.prose h2{margin-top:2rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.gcard{display:block;background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--tag);border-radius:6px;padding:1rem 1.1rem;text-decoration:none;color:var(--ink)}
.gcard:hover{border-color:var(--ink);border-left-color:var(--tag)}
.gcard strong{display:block;font-size:1.05rem;margin-bottom:.25rem}
.gcard span{font-size:.92rem;color:var(--ink-2)}
.citylist{columns:4 11rem;gap:1.5rem;padding:0;list-style:none}
.citylist li{margin-bottom:.35rem}

footer{background:var(--ink);color:#AEBBC7;margin-top:3rem;padding:2.2rem 0 2.6rem;font-size:.86rem}
footer a{color:#DCE3E9}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
footer p{margin-bottom:.6rem}

@media (max-width:900px){
  .hero-grid,.two{grid-template-columns:minmax(0,1fr)}
  .hero .tag{justify-self:start}
  .aside{position:static}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid #ECEEE9}
  .cards3{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .prof-head{flex-direction:column-reverse;gap:1.2rem}
  .bar-row{grid-template-columns:1fr 4.5rem}
  .bar-row .bar{grid-column:1/-1;order:3}
  .hide-sm{display:none}
}

/* owner reviews */
.reviews{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--rule)}
.rv-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.rv-bar h2{margin:0}
.rv-open{font:700 .95rem var(--body);padding:.7rem 1.1rem;border-radius:5px;border:2px solid var(--ink);background:var(--tag);color:var(--ink);cursor:pointer}
.stars{color:#C9CFC5;letter-spacing:.06em;font-size:1.05rem;white-space:nowrap}
.stars .on{color:#D99A00}.stars .half{background:linear-gradient(90deg,#D99A00 50%,#C9CFC5 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rv-head{display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start;background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:1rem 1.1rem;margin-bottom:1rem}
.rv-avg{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;margin-right:.3rem}
.rv-cats{margin:0;display:grid;grid-template-columns:auto auto;gap:.2rem 1rem;font-size:.9rem}
.rv-cats div{display:contents}.rv-cats dt{color:var(--ink-2)}.rv-cats dd{margin:0}
.rv-item{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:1rem 1.1rem;margin-bottom:.8rem}
.rv-top{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.rv-item p{margin:.35rem 0}
.rv-text{white-space:normal}
.rv-tags span{display:inline-block;font-size:.8rem;border:1px solid var(--rule);border-radius:99px;padding:.1rem .55rem;margin:0 .3rem .3rem 0;background:var(--wall)}
.rv-photos{display:flex;gap:.4rem;flex-wrap:wrap}
.rv-photos img{width:120px;height:90px;object-fit:cover;border-radius:4px;display:block}
.rv-report{all:unset;cursor:pointer;font-size:.78rem;color:var(--ink-2);text-decoration:underline;margin-top:.3rem}
.rv-form{background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:1.2rem;margin-bottom:1.2rem}
.rv-form label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .25rem}
.rv-form input[type=text],.rv-form input[type=email],.rv-form select,.rv-form textarea{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid #BFC5BC;border-radius:5px;background:#fff;color:var(--ink)}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.rv-rates{display:grid;gap:.35rem;margin-top:.4rem}
.rv-rate{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.93rem}
.rv-rate button{all:unset;cursor:pointer;font-size:1.5rem;line-height:1;color:#C9CFC5;padding:0 .08rem}
.rv-rate button.on{color:#D99A00}
.rv-rate button:focus-visible{outline:2px solid var(--chalk)}
.rv-tagpick{display:flex;flex-wrap:wrap;gap:.35rem}
.rv-tagpick button{font:inherit;font-size:.84rem;padding:.3rem .7rem;border-radius:99px;border:1px solid #BFC5BC;background:#fff;color:var(--ink);cursor:pointer}
.rv-tagpick button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rv-preview{display:flex;gap:.4rem;margin-top:.4rem}.rv-preview img{width:72px;height:54px;object-fit:cover;border-radius:4px}
.rv-agree{display:flex!important;gap:.5rem;align-items:flex-start;font-weight:400!important;font-size:.88rem!important}
.rv-agree input{margin-top:.25rem}
.rv-form button[type=submit]{margin-top:1rem;font:700 1rem var(--body);padding:.8rem 1.4rem;border:0;border-radius:5px;background:var(--ink);color:#fff;cursor:pointer}
.rv-status{font-weight:700;color:var(--bad);margin-top:.6rem}
.rv-thanks{background:#EAF5EE;border-left:4px solid var(--good);padding:.8rem 1rem;border-radius:0 6px 6px 0}
.hp{position:absolute;left:-9999px}
@media (max-width:620px){.rv-grid{grid-template-columns:1fr}}
.rv-response{margin:.7rem 0 .2rem;padding:.7rem .9rem;border-left:4px solid var(--chalk);background:#EEF3F9;border-radius:0 6px 6px 0}
.rv-response p{margin:.2rem 0}
.rv-actions{display:flex;gap:1.2rem;flex-wrap:wrap}
.rv-reply{all:unset;cursor:pointer;font-size:.78rem;color:var(--chalk);text-decoration:underline;margin-top:.3rem}
.rv-modal{position:fixed;inset:0;background:rgba(28,43,58,.55);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}
.rv-modal[hidden]{display:none}
.rv-modal .rv-form{max-width:32rem;width:100%;max-height:90vh;overflow:auto;margin:0}
.rv-cancel{font:inherit;margin-left:.5rem;padding:.75rem 1rem;border:1px solid #BFC5BC;border-radius:5px;background:#fff;cursor:pointer}

/* VIP new build list */
.vip{background:var(--ink);color:#DCE3E9;padding:3rem 0;margin-top:2rem;border-top:6px solid var(--tag)}
.vip + footer{margin-top:0}
.vip-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:start}
.vip h2{color:#fff}
.vip p{color:#B9C4CE}
.vip-points{padding-left:1.1rem;color:#DCE3E9}
.vip-points li{margin-bottom:.35rem}
.vip-form fieldset{border:0;padding:0;margin:0 0 .8rem}
.vip-form legend,.vip-form label{font-size:.88rem;color:#DCE3E9;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;font-size:.84rem;font-weight:400;padding:.38rem .75rem;border:1px solid #5D6E7D;border-radius:99px;color:#DCE3E9}
.chip input:checked + span{background:var(--tag);border-color:var(--tag);color:var(--ink);font-weight:700}
.chip input:focus-visible + span{outline:3px solid #fff;outline-offset:2px}
.vip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin-bottom:.6rem}
.vip-row label{display:block;margin-bottom:.25rem}
.vip-form input[type=text],.vip-form input[type=email],.vip-form input[type=tel],.vip-form input:not([type]),.vip-form select{width:100%;font:inherit;font-size:.95rem;padding:.6rem .65rem;border-radius:5px;border:1px solid #6B7B8A;background:#fff;color:var(--ink)}
.vip-consent{display:flex;gap:.55rem;align-items:flex-start;font-weight:400!important;margin:.5rem 0 .2rem}
.vip-consent input{margin-top:.28rem}
.vip-form button{margin-top:.6rem;font:700 1rem var(--body);padding:.85rem 1.6rem;border:0;border-radius:5px;background:var(--tag);color:var(--ink);cursor:pointer}
.vip-form button:hover{background:#FFC61A}
.vip-form .status{font-weight:700;margin-top:.6rem;color:#fff}
.vip-form .fine{font-size:.74rem;color:#9FB0BE;margin-top:.6rem}
.vip-form .fine a{color:#DCE3E9}
.l-cmtg{font-size:.85rem;margin:.6rem 0 0;color:#DCE3E9}
.l-cmtg a{color:var(--tag)}
@media (max-width:900px){.vip-grid{grid-template-columns:1fr}}