/* Hallmark · shape: Feature Stack · genre: editorial · theme: Ink (deal 1/3, seed local-house-office-cleaning-a8f4·078de4bd·2026-10-30·r0) · redesign: full · job: hire · draw: c43be1 · copy: verbatim
 * hero: Ledge · nav: slab · footer: letter close · imagery: photographs (the owner's own, muted) · signature: the six services as a ruled list scrolling past a sticky pane that holds the quote · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R5 V4 · weakest: S, a quote-first cleaner looks like any local service; the reassurance line rides under every quote button and the services read as a real list, not tiles */
/* Hallmark · waive 22 · ink and greys at zero chroma · a notice board is printed in plain black, and the cleaning page keeps that */
/* Hallmark · dropped "Residential & Commercial Cleaning · Greater Houston" · 54 names the hero eyebrow; the hero line already says residential and commercial, Greater Houston */
/* Hallmark · dropped "Three Simple Steps" and "Welcome", "Our Services", "Explore" · 54 names each eyebrow; every heading kept word for word */
/* Hallmark · dropped "Cleaning Services · Texas" under the wordmark · 63 names the dotted strip */
/* Hallmark · dismissed 76 · the photographs are the owner's, already in the site's content library */
/* Hallmark · dismissed 19 · "All rights reserved" kept as the owner's legal line */
/* Hallmark · waive 26b · no form controls and no aria-disabled on this homepage · nothing here can be disabled, only links and one menu button */
/* Hallmark · answered F4 · the Ink pair: an ink-filled quote button beside a ruled button on paper-2, as the theme sets its controls */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 64px; }

.sprite { position: absolute; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; }
.ic-xs { width: 14px; height: 14px; }
.skip { position: absolute; left: var(--space-xs); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: 10px; font-weight: 600; }
.skip:focus-visible { top: var(--space-xs); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Controls: the pair, ink-filled and ruled */
.btn { 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; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.assure { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.text-link { justify-self: start; font-weight: 600; color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--color-accent); }
.text-link:active { color: var(--color-ink-2); }

/* Nav: the slab */
.slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-paper); }
.slab-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-lg); text-decoration: none; color: inherit; white-space: nowrap; }
.wordmark-ink { color: var(--color-ink); font-size: var(--text-2xl); white-space: normal; }
@media (max-width: 40rem) { .wordmark-ink { font-size: var(--text-xl); } .statement { font-size: var(--text-2xl); } }
.nav, .slab-actions { display: none; }
@media (min-width: 68rem) { .nav { display: flex; align-items: center; gap: var(--space-2xs); } .slab-actions { display: flex; align-items: center; gap: var(--space-sm); } .slab-menu { display: none; } }
.nav > a, .nav-item > a { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border-radius: 8px; color: var(--color-paper); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.nav > a:hover, .nav-item > a:hover, .nav a[aria-current=page] { background: var(--color-ink-2); }
.nav a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--color-accent-soft); text-underline-offset: 0.3em; }
.slab a:focus-visible, .slab button:focus-visible { outline-color: var(--color-accent-soft); }
.nav-item { position: relative; }
.nav-item .ic { transition: transform var(--dur-short) var(--ease-out); }
.nav-item:hover > a .ic, .nav-item:focus-within > a .ic { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); min-width: 240px; padding: var(--space-xs); background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(var(--space-2xs)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.dropdown-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 460px; }
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: 8px; color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.dropdown a:first-child { font-weight: 600; }
.dropdown a:hover { background: var(--color-paper-2); text-decoration: underline; text-decoration-color: var(--color-accent); }
.slab-link { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); color: var(--color-paper); text-decoration: none; font-size: var(--text-sm); border-radius: 8px; }
.slab-link:hover { background: var(--color-ink-2); }
.slab-quote { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-paper); border-radius: 10px; color: var(--color-paper); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.slab-quote:hover { background: var(--color-paper); color: var(--color-ink); }
.slab-quote:active, .slab-link:active { transform: translateY(1px); }
.slab-menu { min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-paper); border-radius: 10px; background: transparent; color: var(--color-paper); font-weight: 600; cursor: pointer; }
.slab-menu:active { transform: translateY(1px); }
.drawer { background: var(--color-paper); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding-block: var(--space-xs) var(--space-lg); }
.drawer .container > a, .drawer summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer-sub { display: grid; padding-block: var(--space-xs) var(--space-sm); }
.drawer-sub a { padding-block: var(--space-xs); color: var(--color-ink-2); text-decoration: none; }

/* Hero: Ledge */
.hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100dvh - var(--nav-h)); min-height: 600px; }
.hero-field { position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--color-paper-3); }
.hero-field img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 60rem) { .hero { height: auto; min-height: 0; grid-template-rows: auto auto; } .hero-field { aspect-ratio: 16 / 9; } }
.hero-base { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width: 60rem) { .hero-base { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: end; } }
.hero h1 { max-width: none; line-height: 1.0; }
.hero-line { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); max-width: 48ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (max-width: 40rem) { .actions .btn { flex: 1 1 100%; } }
.photo { border-radius: 0; }

/* Welcome: the statement */
.welcome { padding-block: var(--section-gap) var(--section-gap-s); }
.welcome-grid { display: grid; gap: var(--space-lg); }
.welcome h2 { font-size: var(--text-title); max-width: 30ch; }
.statement { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--color-ink); max-width: 34ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.promises { display: grid; gap: 0; margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
@media (min-width: 48rem) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } .promises li + li { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); } }
.promises li { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); font-weight: 600; border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 48rem) { .promises li { border-bottom: 0; } }
.promises .ic { color: var(--color-accent); }

/* The feature stack */
.stack { padding-block: var(--section-gap-s); }
.services { border-top: var(--rule-hair) solid var(--color-rule); }
.stack-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) {
  .stack-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
  .stack-grid-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .stack-grid-flip .pane { order: 2; }
  .pane { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
}
.pane { display: grid; gap: var(--space-lg); align-content: start; }
.pane-action { margin-top: var(--space-md); }

.ruled { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled > * { border-bottom: var(--rule-hair) solid var(--color-rule); }
.svc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); text-decoration: none; color: inherit; }
.svc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.svc-text { display: grid; gap: var(--space-xs); }
.svc-name { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.svc-line { color: var(--color-ink-2); max-width: 44ch; }
.svc-more { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.svc:hover .svc-more { text-decoration-color: var(--color-accent); }
.svc:hover .svc-name { color: var(--color-ink-2); }
.svc:active { transform: translateY(1px); }
@media (max-width: 40rem) { .svc { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); } .svc-name { font-size: var(--text-lg); } .svc-line { font-size: var(--text-sm); } }

/* Steps as a notice */
.steps-sec { padding-block: var(--section-gap-l) var(--section-gap); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.steps { display: grid; gap: var(--space-xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); } }
.steps li { counter-increment: step; display: grid; gap: var(--space-sm); align-content: start; border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-lg); }
.steps li::before { content: counter(step); font-size: var(--text-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-ink); }
.steps li:first-child::before { color: var(--color-accent); }
.steps p { color: var(--color-ink-2); max-width: 45ch; }

/* Explore rows */
.rows a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-lg); text-decoration: none; color: inherit; }
@media (min-width: 48rem) { .rows a { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--space-lg); align-items: baseline; } }
.row-name { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; }
.row-line { color: var(--color-ink-2); }
.row-go { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.rows a:hover .row-go { text-decoration-color: var(--color-accent); }
.rows a:active { transform: translateY(1px); }

/* FAQ band */
.faq { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.faq-note { color: var(--color-ink-2); }
.faq-note a { font-weight: 600; }
.faq-note a:hover { text-decoration-color: var(--color-accent); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 64px; padding-block: var(--space-md); cursor: pointer; list-style: none; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { transition: transform var(--dur-short) var(--ease-out); }
.acc details[open] summary .ic { transform: rotate(45deg); color: var(--color-accent); }
.acc summary:hover { color: var(--color-ink-2); }
.acc details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* Close: an ink band */
.close { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.close-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .close-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; } }
.close h2 { font-size: var(--text-display); color: var(--color-paper); max-width: 14ch; line-height: 1.0; }
.close-line { color: var(--color-paper); font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; }
.btn-paper { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.btn-paper:hover { background: var(--color-paper-3); border-color: var(--color-paper-3); }
.btn-ghost { background: transparent; border-color: var(--color-muted); color: var(--color-paper); }
.btn-ghost:hover { border-color: var(--color-paper); }
.close a:focus-visible { outline-color: var(--color-accent-soft); }

/* Footer: the letter close */
.letter { padding-block: var(--space-3xl) var(--space-xl); }
.letter-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 60rem) { .letter-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.signoff { display: grid; gap: var(--space-md); align-content: start; }
.signoff-line { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }
.letter-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.foot-h { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-sm); }
.letter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.letter-links a { display: inline-block; padding-block: var(--space-2xs); text-decoration: none; }
.letter-links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-muted); }
.legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.legal a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* Phone quote bar: state, not motion */
.quote-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md); padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-ink); }
.quote-bar .btn { width: 100%; }
@media (min-width: 68rem) { .quote-bar { display: none; } }
@media (max-width: 67.99rem) { body { padding-bottom: var(--space-3xl); } }

/* Polish pass (make-interfaces-feel-better): touch targets, image edges, press feedback */
.text-link { display: inline-block; padding-block: var(--space-xs); margin-block: calc(-1 * var(--space-xs)); }

/* Guidelines pass (web-design-guidelines) */
html { touch-action: manipulation; }
.drawer { overscroll-behavior: contain; }
.wordmark { padding-block: var(--space-xs); margin-block: calc(-1 * var(--space-xs)); }