/* ADUs and custom homes page (src/pages/services/adus-custom-homes.html). Builder C. */

/* ---------- what we build: drawings left-aligned, text lined up across tiles ---------- */
.build-tiles .ill{margin-bottom:var(--sp-2);align-self:flex-start}

/* ---------- Title 24 cutaway + legend ---------- */
.t24-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.t24-fig{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(12px,2.5vw,32px);margin:0}
.t24-fig svg{width:100%;height:auto;padding:0}
.t24-fig .mk circle{stroke:var(--ink-2);stroke-width:3}
.t24-fig .mk text{font-family:var(--f-label);font-weight:700;font-size:14px;text-anchor:middle;dominant-baseline:central;fill:var(--ink);stroke:none}
.t24-fig .mk-env circle{fill:var(--on-dark-2)}
.t24-fig .mk-use circle{fill:var(--green)}
.t24-fig .mk-sun circle{fill:var(--orange)}
.t24-legend{list-style:none;display:grid;gap:var(--sp-5)}
.t24-legend li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.t24-legend .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:var(--f-label);font-weight:700;font-size:13px;color:var(--ink)}
.t24-legend .n-env{background:var(--on-dark-2)}
.t24-legend .n-use{background:var(--green)}
.t24-legend .n-sun{background:var(--orange)}
.t24-legend strong{display:block;font-family:var(--f-head);font-weight:600;font-size:17px;line-height:1.3;color:var(--on-dark);margin-bottom:2px}
.t24-legend .t{display:block;font-size:15.5px;line-height:1.55;color:var(--on-dark-2)}
.t24-note{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line-dark);font-size:14.5px;color:var(--on-dark-3)}

/* ---------- two reviews ---------- */
.rev-head{margin-top:clamp(56px,7vw,96px);margin-bottom:var(--sp-5)}
.rev-head .muted{margin-top:var(--sp-2)}
.rev-grid.two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.rev-grid.two .rev-feature blockquote p{font-size:clamp(19px,1.7vw,23px)}
.rev-grid.two .rev-feature{grid-row:auto;grid-column:auto}

@media (max-width:900px){
  .t24-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .t24-fig{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-left:0;border-right:0;padding:16px 6px}
  .t24-fig .mk circle{r:21px}
  .t24-fig .mk text{font-size:20px}
}

/* three tiles at tablet width: the third spans the row instead of sitting alone */
@media (min-width:640.02px) and (max-width:900px){
  .tile-grid:not(.cols-2):not(.cols-4) > .tile:nth-child(3):last-child{grid-column:1 / -1}
}