/* =====================================================================
   page: homes.html  (loaded after base.css; base.css tokens only)
   ===================================================================== */

/* 1. hero: paper, 7/5, the baseboards promise + a deep-clean bathroom sheet */
.hm-hero{padding-block:var(--s6) var(--s8)}
.hm-hero h1{font-size:clamp(2.55rem,1.5rem + 3.3vw,4.35rem)}
.hm-hero .lead{margin-top:var(--s5)}
.hm-hero .actions{margin-top:var(--s6)}
.hero__micro{margin-top:var(--s3)}
.hm-hero__sheet .sheet{margin-inline:auto}
@media (max-width:599px){
  .hm-hero .actions{flex-direction:column;align-items:stretch}
  .hm-hero .actions .btn{width:100%}
}
@media (min-width:1024px){
  .hm-hero{padding-block:var(--s8) var(--s9)}
  .hm-hero__grid{align-items:center}
  .hm-hero__sheet{justify-self:end;width:100%;max-width:440px}
}

/* 2. pick your clean: full-width ledger with its own link column */
.hm-ledger .hm-ledger__go{justify-self:start;margin-top:var(--s2)}
@media (min-width:1024px){
  .hm-ledger .ledger__row{grid-template-columns:minmax(0,9fr) minmax(0,11fr) minmax(0,4fr)}
  .hm-ledger .hm-ledger__go{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;margin-top:0;white-space:nowrap}
}
.hm-pets{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);margin-top:var(--s6)}  /* a plain sentence under the ledger, not a callout box */
.hm-pets__line .bubbles{width:18px;margin-right:6px;vertical-align:-1px}
.hm-pets__line{flex:1 1 30ch;font:400 1.15rem/1.4 var(--f-display);color:var(--ink);max-width:52ch}
@media (min-width:1024px){ .hm-pets__line{font-size:1.3rem} }

/* 3. room by room: head + action left, tabs right (1024+); stacked below */
.hm-rooms{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
.hm-rooms__act{margin-top:0}
@media (min-width:1024px){
  .hm-rooms{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;grid-template-rows:auto 1fr}
  .hm-rooms__head{grid-column:1 / span 5;grid-row:1}
  .hm-rooms__act{grid-column:1 / span 5;grid-row:2;align-self:start;margin-top:var(--s6)}
  .hm-tabs{grid-column:6 / span 7;grid-row:1 / span 2}
}
@media (min-width:768px){ .hm-tabs .tabs__panel{min-height:17.5rem} }
.hm-tabs .tabs__note{align-items:center}

/* 4. tier table: its own paper-2 band, 768+ only (table.tier is display:none below) */
.hm-tierband{display:none}
@media (min-width:768px){
  .hm-tierband{display:block}
  .hm-tier__h{font-size:var(--t-h3);margin-bottom:var(--s5);max-width:44ch}
  .hm-tier .tier td.hm-tier__ask{font-size:var(--t-small);font-weight:600;color:var(--ink-2)}
}

/* 5. reviews: Nicky large left, Barbara short right */
.hm-rev{align-items:start}
.hm-rev__main .review__q{max-width:38ch}
@media (min-width:1024px){ .hm-rev__main .review__q{font-size:1.4rem;line-height:1.42} }
.hm-rev__act{margin-top:var(--s6)}
@media (min-width:1024px){
  .hm-rev{column-gap:var(--s7)}
  .hm-rev__side{padding-top:0}
}

/* 6. photos note: base.css .cta-line (one full-width line, no button block) */

/* 2b. add-on label on the laundry row (same family as the DEEP tag, sky instead of orchid) */
.hm-addon{display:inline-block;margin-left:8px;padding:2px 6px;border:1px solid var(--sky-ink);border-radius:3px;font:700 .65rem/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--sky-ink);vertical-align:.35em;white-space:nowrap}

/* 2c. how pricing works: a ruled row closing the services band (no prices, by design) */
.hm-price{display:grid;gap:var(--s3) var(--s6);margin-top:var(--s7);padding-top:var(--s5);border-top:var(--border)}
.hm-price__head .kicker{margin-bottom:var(--s2)}
.hm-price__h{font-size:var(--t-h2)}
.hm-price__line{font:400 var(--t-lead)/1.45 var(--f-display);color:var(--ink);max-width:40ch}
@media (min-width:768px){
  .hm-price{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
}
/* the organizing row's name links to its own page */
.hm-ledger__page{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:.16em}
.hm-ledger__page:hover{color:var(--sky-ink)}