/* Hallmark · shape: Catalogue (swap from draw 5c00f2 Manifesto: no hours, dates or times to book, so the services lead) · genre: editorial · theme: Ink (deal 1/3, seed local-house-cleaning-company-c309·ae9fce4b·2026-10-26·r0), brand palette from the Daisy's logo · redesign: full
 * hero: Settled (/), Split with photo (service pages), Stage (/book-now) · nav: slab, the logo and one action · footer: mast · imagery: photographs (owner's stock picks, self-hosted) · signature: the eight services as a ruled list beside the headline, each a row you can open · ink: paper, forest-green ink, daisy yellow as the one state mark
 * axes: light/grotesk-sans/chromatic-green · posture: restrained · contrast: pass · fold: pass · draw: 5c00f2 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, the photos are stock until the owner sends job photos; slots are marked so hers replace them */
/* Hallmark · waive 22 · the ink carries the logo's forest green instead of a hueless black · the brand is green, and a cleaning company should not print in plain black */
/* Note: daisy yellow is a second colour against Ink's do-not; it marks only the same-day state, as the logo's flower centre does. The brand beats the theme. */
/* Hallmark · dropped https://cdn.tailwindcss.com · the rebuild ships its own stylesheet; nothing on the page reads Tailwind */
/* Hallmark · reworded headings to sentence case and the new name (Daisy House Keeping Service to Daisy's Housekeeping) · the owner renamed the business with the new logo; dashes in copy cut under 19 */
/* Hallmark · dropped pexels-photo-4239130.jpeg, pexels-photo-4021256.jpeg · the same photographs, now self-hosted in /img instead of hotlinked */
/* Hallmark · waive 44c · reviews, faq and thanks heroes are text only · they have no photograph or product to fill the screen and nothing is invented to pad them */
/* Hallmark · waive 78 · faq.html question heads at --text-title · each question is an item in a ruled list, not a section */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Chrome ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: 10px; }
.skip:focus-visible { top: var(--space-md); }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; }
.nav__logo { display: block; flex: none; }
.nav__logo img { height: 52px; width: auto; }
.nav__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.nav__links a { text-decoration: none; font-weight: 600; color: var(--color-ink-2); padding-block: var(--space-xs); }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-leaf); }
.nav__links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; }
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav__phone { font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.nav__phone:hover { text-decoration: underline; text-decoration-color: var(--color-leaf); }
.nav__menu { display: none; }
.nav__menu summary { list-style: none; cursor: pointer; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-paper); box-shadow: var(--shadow-card); padding: var(--space-md) var(--gutter) var(--space-lg); }
.nav__menu-panel ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.nav__menu-panel li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__menu-panel a { white-space: nowrap; display: block; padding: var(--space-sm) 0; text-decoration: none; font-weight: 600; }
@media (max-width: 64rem) {
  .nav__links, .nav__phone { display: none; }
  .nav__menu { display: block; }
  .nav__logo img { height: 44px; }
}

.footer { margin-top: var(--section-gap); background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl) var(--space-xl); }
.footer a { color: var(--color-paper); }
.footer a:hover { text-decoration-color: var(--color-sun); }
.footer__mast { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-muted); }
.footer__name { font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.02; margin-bottom: var(--space-md); }
.footer__phones { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-lg); font-weight: 600; }
.footer__head { font-size: var(--text-sm); color: var(--color-sun-soft); margin-bottom: var(--space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.footer__fine { padding-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-paper-3); display: grid; gap: var(--space-xs); }
@media (max-width: 48rem) { .footer__mast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 26rem) { .footer__mast { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Controls ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn--small { min-height: 40px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn--on-ink { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.btn--on-ink:hover { background: var(--color-sun-soft); border-color: var(--color-sun-soft); }
.btn--ghost-ink { background: transparent; border-color: var(--color-paper-3); color: var(--color-paper); }
.btn--ghost-ink:hover { background: var(--color-accent-strong); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.tag { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-3); color: var(--color-ink-2); white-space: nowrap; }
.tag--sun { background: var(--color-sun-soft); color: var(--color-sun-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-sun); }
.tag--in { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }

.link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-leaf); }

/* ---------- Layout ---------- */
.section { padding-top: var(--section-gap-s); }
.section__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.section__head p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 48ch; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 60rem) { .split, .split--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero .split { align-items: center; }
.hero__copy { display: grid; gap: var(--space-lg); align-content: start; }
.hero__copy h1 { color: var(--color-ink); }
.hero__copy .lead { color: var(--color-ink-2); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); }
.hero__note a { color: var(--color-ink); }
@media (min-width: 60rem) { .hero { padding-block: var(--space-3xl) 0; } }
.hero + .section { padding-top: var(--section-gap-s); }
.hero--page { min-height: 0; padding-block: var(--space-2xl) var(--space-lg); }
.hero--page h1 { font-size: var(--text-display-s); }
.hero--page .split--top { align-items: start; }
.split--center { align-items: center; }
@media (min-width: 60rem) { .hero--page { min-height: 0; } }

/* the signature: services as a ruled list */
.shelf { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.shelf li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.shelf a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-2xs); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.shelf a:hover { background: var(--color-accent-soft); }
.shelf a:active { background: var(--color-paper-3); }
.shelf__name { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.2; }
.shelf__what { color: var(--color-ink-2); font-size: var(--text-sm); }
.shelf__go { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.shelf__foot { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .shelf a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } .shelf__go { display: none; } }

/* ---------- Figures well ---------- */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.figures > div { padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.figures > div + div { border-left: var(--rule-hair) solid var(--color-rule); }
.figures__big { font-variant-numeric: tabular-nums; font-size: var(--text-display-s); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-ink); }
.figures__big--sun { text-decoration: underline; text-decoration-color: var(--color-sun); text-decoration-thickness: 0.12em; text-underline-offset: 0.12em; }
.figures__label { font-weight: 600; }
.figures__note { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 32ch; }
@media (max-width: 48rem) { .figures { grid-template-columns: minmax(0, 1fr); } .figures > div + div { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); } }

/* ---------- Photographs ---------- */
.photo { border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.photo--hero { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) { .hero--page .photo--hero { aspect-ratio: 1 / 1; max-height: 640px; width: 100%; } }
.photo--wide { aspect-ratio: 21 / 9; }
.photo--tall { aspect-ratio: 4 / 5; }
@media (max-width: 40rem) { .photo--wide { aspect-ratio: 4 / 3; } }
[data-slot] > img { filter: saturate(0.85) contrast(0.98); }

/* ---------- Ruled lists ---------- */
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled > li { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-md); }
.ruled > li > strong { font-weight: 700; }
.ruled > li > span { color: var(--color-ink-2); }
.ruled--single > li { grid-template-columns: minmax(0, 1fr); }
.ruled--cols { columns: 2; column-gap: var(--gap-columns); }
.ruled--cols > li { break-inside: avoid; }
@media (max-width: 40rem) { .ruled > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .ruled--cols { columns: 1; } }

.towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); border-top: var(--rule-hair) solid var(--color-ink); }
.towns li { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 600; }
.towns li:first-child { color: var(--color-accent); }

.prose { display: grid; gap: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; }
.prose p { max-width: 58ch; }

/* ---------- Band ---------- */
.band { margin-top: var(--section-gap-s); background: var(--color-ink); color: var(--color-accent-ink); border-radius: var(--radius-card); padding: var(--space-2xl) var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: end; }
.band h2 { max-width: 18ch; }
.band p { color: var(--color-accent-soft); margin-top: var(--space-sm); }
.band + .footer { margin-top: var(--section-gap-s); }
@media (max-width: 48rem) { .band { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); align-items: start; } }

/* ---------- FAQ ---------- */
.faq { border-top: var(--rule-hair) solid var(--color-ink); }
.faq > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq h2 { font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
.faq p { color: var(--color-ink-2); }
@media (max-width: 48rem) { .faq > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-md); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
@media (max-width: 40rem) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field label span { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-field-edge); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--color-leaf); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.field input:user-invalid, .field select:user-invalid { border-color: var(--color-error); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside { display: grid; gap: var(--space-md); align-content: start; }
.well { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-xs); }
.well h2 { font-size: var(--text-title); letter-spacing: -0.02em; line-height: 1.2; }
.well p, .well li { color: var(--color-ink-2); }
.well a { font-weight: 600; }

.empty { border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-card); padding: var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-md); justify-items: start; }
.empty p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 48ch; }