/* =========================================================
   Custom homes page (ch-). Built on the homepage hx- blocks.
   ========================================================= */
.ch-hero .h1 { font-size: 50px; }
.ch-hero-img { object-position: center 30%; }

/* who it's for */
.ch-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.ch-who-item { background: #fff; padding: 30px; border-top: 3px solid var(--red); box-shadow: 0 0.8px 2.4px -0.6px rgba(0,0,0,.024), 0 2.4px 7.2px -1.2px rgba(0,0,0,.03), 0 6px 18px -1.9px rgba(0,0,0,.04); }
.ch-who-item svg { width: 30px; height: 30px; fill: var(--red); }
.ch-who-item h3 { margin-top: 18px; font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.ch-who-item p { margin-top: 12px; font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }

/* included */
.ch-sol-h { margin-top: 12px; }
.ch-solution .checks { margin-top: 0; }

/* pricing */
.ch-per { margin-top: 0; }
.ch-big { margin-top: 12px; font: 500 34px/1.15 var(--f-dm); letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }

/* see how we work */
.ch-see-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
.ch-see-item { padding: 6px 30px 6px 24px; border-left: 3px solid var(--red); display: flex; flex-direction: column; gap: 10px; }
.ch-see-item + .ch-see-item { margin-left: 20px; }
.ch-see-item h3 { font: 500 22px/1.2 var(--f-dm); letter-spacing: 0.01em; color: var(--ink); }
.ch-see-item p { font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }
.ch-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 15px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); }
.ch-link svg { width: 14px; height: 14px; fill: currentColor; }
.ch-link:hover { color: var(--red-bright); }
.ch-see .hx-badges { margin-top: 44px; }

@media (max-width: 1199px) {
  .ch-hero .h1 { font-size: 42px; }
  .ch-who, .ch-see-grid { grid-template-columns: 1fr; }
  .ch-see-grid { gap: 24px; }
  .ch-see-item + .ch-see-item { margin-left: 0; }
}
@media (max-width: 809px) {
  .ch-hero .h1 { font-size: 32px; }
  .ch-who { gap: 14px; margin-top: 24px; }
  .ch-who-item { padding: 22px 20px; }
  .ch-who-item h3 { font-size: 18px; margin-top: 12px; }
  .ch-see-grid { margin-top: 28px; }
  .ch-see-item { padding: 4px 0 4px 16px; }
  .ch-see-item h3 { font-size: 19px; }
  .ch-big { font-size: 26px; }
  .ch-see .hx-badges { gap: 20px; margin-top: 32px; }
  .ch-solution .checks { margin-top: 0; }

  /* phone body text 17px, as on the homepage */
  .page-custom-homes .body, .page-custom-homes .lead, .page-custom-homes .checks p,
  .page-custom-homes .hx-card p, .page-custom-homes .hx-pay li span, .page-custom-homes .faq-a p,
  .page-custom-homes .ch-who-item p, .page-custom-homes .ch-see-item p { font-size: 17px; color: var(--ink); }
  .page-custom-homes .hx-price-main .body { color: rgba(250, 250, 250, 0.85); }
  .page-custom-homes .hx-work-list span { font-size: 17px; color: var(--ink); }
  .page-custom-homes .hx-note, .page-custom-homes .hx-sub { font-size: 17px; }
  .page-custom-homes .nav-cta { display: none; }
}

/* round 2: proof cards from real ADU projects */
.ch-proof .projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.ch-proof .projects-head .btn { flex: none; }
.ch-proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
.ch-see-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
@media (max-width: 1199px) {
  .ch-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-proj-grid .hx-dt { display: none; }
  .ch-see-grid { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .ch-proof .projects-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .ch-proof .projects-head .btn { order: 2; }
  .ch-proj-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .ch-proj-grid .proj-card { height: 280px; }
}
.ch-quote { margin-top: 30px; max-width: 760px; }

/* round v3: grey loading state so a slow image never shows as a blank white card */
html.v2 .ch-proj-grid .proj-card { background: var(--panel); }