/* =====================================================================
   page: construction.html  (base.css tokens only; no new colours/fonts/radii/shadows)
   Contractor tone: no Kalam, no bubbles, no reviews. Spec-sheet rhythm:
   sky-deep type hero -> full-width punch-list ledger -> plain steps + multi-unit bar
   -> memo-left job sheet on ink -> form-first estimate.
   ===================================================================== */

/* 1. hero */
.cn-hero{padding-block:var(--s7) var(--s8)}
.cn-hero h1{font-size:clamp(2.35rem,1.5rem + 3.4vw,4.1rem)}
@media (min-width:1024px){ .cn-hero h1{font-size:clamp(3.4rem,1.5rem + 3vw,4.4rem)} }
.cn-hero .lead{margin-top:var(--s5);max-width:44ch}
.cn-hero__btns{margin-top:var(--s6)}
.cn-hero__area{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule-dark);max-width:52ch}
/* a flat "ready for walkthrough on ____" line: the job-site promise without a second punch list */
.cn-hero__ready{margin-top:var(--s6);font:400 1.3rem/1.3 var(--f-display);color:#fff}
.cn-hero__blank{display:inline-block;width:6em;margin-left:6px;border-bottom:2px solid var(--orchid-lt);transform:translateY(-2px)}
@media (max-width:599px){ .cn-hero__ready{font-size:1.15rem} .cn-hero__blank{width:3.5em} }
@media (max-width:599px){
  .cn-hero__btns{flex-direction:column;align-items:stretch}
  .cn-hero__btns .btn{width:100%}
}
@media (min-width:1024px){
  .cn-hero{padding-block:var(--s9)}
  .cn-hero__copy{grid-column:1 / span 7}
  .cn-hero__grid{align-items:center}
  .cn-hero__sheet{grid-column:8 / span 5;justify-self:end;width:100%;max-width:420px}
  .cn-hero__ready{display:none}  /* the sheet's footer carries the "ready for walkthrough on ____" line at 1024+ */
}

/* 2. covers: full-width spec rows; names get more room than on homes */
@media (min-width:1024px){
  .cn-ledger .ledger__row{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);align-items:baseline}
  .cn-ledger .ledger__name{grid-column:1;grid-row:1}
  .cn-ledger .ledger__for{grid-column:2;grid-row:1}
  .cn-ledger .ledger__desc{grid-column:3;grid-row:1}
}
.cn-covers__act{margin-top:var(--s6)}

/* 3. schedule: steps, then a ruled bar with the multi-unit note + action */
.cn-multi{display:grid;gap:var(--s4);margin-top:var(--s6);padding:var(--s5);background:var(--card);border:var(--border);border-radius:var(--r)}
.cn-multi__t{font:400 var(--t-h3)/1.2 var(--f-display);max-width:30ch}
@media (min-width:768px){ .cn-multi{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--s5) var(--s6)} }

/* 4. job sheet on ink: memo left, a short note right */
.cn-job .memo__title{font-size:var(--t-h3)}
.cn-job__big{font:400 var(--t-h3)/1.2 var(--f-display);color:#fff;margin-bottom:var(--s4);max-width:22ch}
@media (min-width:1024px){ .cn-job{align-items:center} .cn-job__side{padding-left:var(--s6)} }

/* 5. estimate */
.cn-est__head{margin-bottom:var(--s6)}
.cn-est__other{margin-top:var(--s6);padding-top:var(--s4);border-top:var(--hair)}
.cn-est__other .link-go + .link-go{margin-left:0}
@media (min-width:1024px){
  .cn-est{align-items:start}
  .cn-est__side{position:sticky;top:calc(var(--header-h) + var(--s6));padding-left:var(--s5)}
}
.cn-est__links{margin-top:var(--s3)}