/* Hallmark · macrostructure: Long Document · tone: utilitarian · design-system: design.md
 * nav: N9 edge-aligned minimal · footer: Ft1 mast-headed · enrichment: none
 * Shared stylesheet for service pages.
 * System of record: design.md. Variables come from tokens.css, linked first.
 * Fonts are the same self-hosted latin-subset files index.html preloads.
 */
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/fonts/newsreader-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("/fonts/ibmplexsans-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2rem)}
.measure{max-width:66ch}
a{color:var(--color-accent);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
footer :focus-visible{outline-color:var(--color-foot-accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--color-accent);color:var(--color-accent-ink);
  padding:var(--space-xs) var(--space-sm);border-radius:2px;z-index:100}
.skip:focus{left:var(--space-xs);top:var(--space-xs)}

/* N9 edge-aligned minimal nav */
header{border-bottom:var(--rule-hair) solid var(--color-rule);background:var(--color-paper)}
.head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  padding-block:var(--space-sm);flex-wrap:wrap}
.logo{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  letter-spacing:-.01em;color:var(--color-ink);text-decoration:none;white-space:nowrap}
/* Outlined, same as the home page header. The filled pill is reserved for the page CTA. */
.tel-btn{display:inline-flex;align-items:center;min-height:44px;
  border:1px solid var(--color-accent);color:var(--color-accent);
  border-radius:var(--radius-pill);padding:0 var(--space-md);
  font-weight:500;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.tel-btn:hover{background:var(--color-accent);color:var(--color-accent-ink)}
/* Same narrow-width steps as index.html: wordmark + phone must share one row on a phone. */
@media (max-width:419px){
  .head{flex-wrap:nowrap;gap:var(--space-2xs)}
  .logo{font-size:17px}
  .tel-btn{padding:0 var(--space-xs);font-size:var(--text-sm)}
}
@media (max-width:359px){
  .logo{font-size:var(--text-base)}
  .tel-btn{padding:0 10px;font-size:13.5px}
}

/* Long Document body */
main{padding-block:clamp(2.5rem,6vw,var(--space-2xl))}
h1{font-family:var(--font-display);font-weight:600;font-size:var(--text-display-s);
  line-height:var(--leading-display);letter-spacing:var(--track-display);margin:0 0 var(--space-md)}
h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  line-height:1.1;letter-spacing:-.01em;margin:var(--space-2xl) 0 var(--space-sm);
  padding-bottom:var(--space-2xs);border-bottom:2px solid var(--color-accent)}
h3{font-size:var(--text-md);font-weight:500;margin:var(--space-lg) 0 var(--space-3xs)}
p{margin:0 0 var(--space-sm);color:var(--color-ink-2)}
.lede{font-size:var(--text-lg);line-height:1.45;color:var(--color-ink)}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:var(--text-xs);
  font-weight:500;color:var(--color-accent);margin:0 0 var(--space-2xs)}
ul{padding-left:1.1rem;margin:0 0 var(--space-sm)}
li{margin-bottom:var(--space-3xs);color:var(--color-ink-2)}

/* Ruled list: the price rows */
.rows{list-style:none;padding:0;margin:0 0 var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule)}
.rows li{display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;
  padding-block:var(--space-xs);border-bottom:var(--rule-hair) solid var(--color-rule);margin:0}
.rows .name{font-weight:500;color:var(--color-ink)}
.rows .price{font-variant-numeric:tabular-nums;color:var(--color-accent);font-weight:500;white-space:nowrap}
.note{font-size:var(--text-sm);color:var(--color-ink-2)}

.wash{background:var(--color-paper-2);padding-block:var(--space-xl);margin-block:var(--space-2xl)}
.wash h2{margin-top:0}
.steps{list-style:none;padding:0;margin:0;counter-reset:s;
  display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.steps li{counter-increment:s;margin:0}
.steps li::before{content:counter(s);display:block;font-family:var(--font-display);
  font-size:var(--text-xl);line-height:1;color:var(--color-accent);margin-bottom:var(--space-3xs)}

.cta{display:inline-block;background:var(--color-accent);color:var(--color-accent-ink);
  border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-lg);
  font-weight:500;text-decoration:none;margin-top:var(--space-2xs)}
.cta:hover{background:var(--color-accent-2)}
.cta-2{display:inline-block;border:1px solid var(--color-ink);color:var(--color-ink);
  border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-lg);
  font-weight:500;text-decoration:none;margin-top:var(--space-2xs)}
.cta-row{display:flex;flex-wrap:wrap;gap:0 var(--space-xs)}

/* Ft1 mast-headed footer */
footer{background:var(--color-foot);color:var(--color-foot-ink);margin-top:var(--space-2xl);
  padding-block:var(--space-xl);font-size:var(--text-sm)}
.footer__byline{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;
  color:var(--color-foot-ink);margin:0 0 var(--space-2xs)}
/* Footer has its own ink tokens: --color-paper flips dark in dark mode and vanished here. */
footer p{color:var(--color-foot-ink-2)}
footer a{color:var(--color-foot-accent)}
footer a[href^="tel:"]{white-space:nowrap}
.footer__links{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-md);padding:0;margin:var(--space-sm) 0 0}
.footer__links li{margin:0}
.footer__links a{display:inline-flex;align-items:center;min-height:44px}
.crumbs{font-size:var(--text-sm);color:var(--color-ink-2);margin:0 0 var(--space-md)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}