/* ============================================================
   CAPITAL DISTRICT CLEANOUTS — page.css
   Page-level components only; all values from tokens.css.
   Layer: tokens → base → components → page.
   ============================================================ */

/* — what we take / can't: two editorial columns, hairline rows — */
.take-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m) var(--space-2xl)}
.take-head{
  font-family:var(--font-grotesk);font-size:var(--step--1);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text);
  padding-bottom:var(--space-xs);border-bottom:1px solid var(--line-strong);margin-bottom:var(--space-2xs);
}
.take-head.cant{color:var(--muted)}
.take-list{list-style:none}
.take-list li{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--font-display);font-size:var(--step-1);font-weight:var(--w-head);
  letter-spacing:var(--track-head);padding-block:var(--space-xs);border-bottom:1px solid var(--line);
}
.take-list li svg{flex:none;width:1.05rem;height:1.05rem;color:var(--accent)}
.take-list.cant li{color:var(--ink-soft)}
.take-list.cant li svg{color:var(--muted)}
.take-grid .note{margin-top:var(--space-s)}
@media (max-width:680px){.take-grid{grid-template-columns:1fr}}

/* — service area: towns set as display type, accent separators — */
.towns{
  font-family:var(--font-display);font-size:var(--step-3);font-weight:var(--w-display);
  letter-spacing:var(--track-head);line-height:1.3;max-width:22em;margin-bottom:var(--space-m);
}
.towns span{color:var(--accent)}

/* — contact: two columns on the night block — */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-l) var(--space-2xl);margin-top:var(--space-l);align-items:start}
.phone-big{
  display:block;margin-top:var(--space-m);
  font-family:var(--font-display);font-size:var(--step-3);font-weight:var(--w-display);
  letter-spacing:var(--track-head);color:var(--night-text);text-decoration:none;
  transition:color var(--dur-2);
}
.phone-big:hover{color:var(--accent-bright)}
.contact .mail{font-size:var(--step-1);margin-top:var(--space-s)}
.contact .mail svg{width:1em;height:1em;flex:none}
.contact-note{margin-top:var(--space-m);font-size:var(--step--1)}
@media (max-width:680px){.contact-grid{grid-template-columns:1fr}}

/* — lead form on night — */
.lead-form{display:grid;gap:var(--space-s)}
.lead-form label{
  display:grid;gap:.45em;
  font-family:var(--font-grotesk);font-size:var(--step--1);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--night-muted);
}
.lead-form input,.lead-form textarea{
  font-family:var(--font-sans);font-size:var(--step-0);letter-spacing:0;text-transform:none;
  color:var(--night-text);background:var(--night-2);
  border:1px solid var(--night-line);border-radius:0;
  padding:.7em .85em;width:100%;resize:vertical;
}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--night-muted)}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.lead-form .btn{justify-self:start;margin-top:var(--space-2xs)}
.form-ok{color:var(--accent-pale);font-size:var(--step--1);max-width:none}
.form-err{color:#e8b4a0;font-size:var(--step--1);max-width:none}
.form-err a{color:var(--accent-bright)}