/* Shared by the React homepage and every static page. Layouts may vary;
   typography, colors, spacing, links, and buttons have one owner.
   Navigation and content placement remain intentional and page-specific. */
:root {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 0 0% 13%;
  --muted-foreground: 0 0% 36%;
  --accent: 217 78% 36%;
  --accent-foreground: 0 0% 100%;
  --primary: var(--accent);
  --primary-foreground: var(--accent-foreground);
  --border: 0 0% 86%;
  --muted: 0 0% 96%;
  --secondary: var(--muted);
  --secondary-foreground: var(--foreground);
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
  --input: var(--border);
  --ring: var(--accent);
  --destructive: 0 75% 40%;
  --destructive-foreground: 0 0% 100%;
  --radius: 0.25rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --content-width: 44rem;
  --wide-width: 60rem;
}

.site, .site *, .site *::before, .site *::after { box-sizing: border-box; }
.site {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.site .container { width: min(var(--content-width), calc(100% - 3rem)); margin-inline: auto; padding: 0; }
.site .container-wide { width: min(var(--wide-width), calc(100% - 3rem)); }
.site .site-main { margin-block: 3rem 4rem; }
.site h1, .site h2, .site h3, .site h4 { color: hsl(var(--foreground)); font-family: inherit; font-weight: 650; }
.site h1 { margin: 0 0 1.25rem; font-size: clamp(1.875rem, 4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.025em; }
.site h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.015em; }
.site h3 { margin: 1.75rem 0 0.5rem; font-size: 1.125rem; line-height: 1.4; }
.site p { margin: 0 0 1.25rem; }
.site strong { font-weight: 650; }
.site a { color: hsl(var(--accent)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
.site a:hover { text-decoration-thickness: 2px; }
.site a:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 4px; }
.site img { display: block; max-width: 100%; height: auto; }
.site ul, .site ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.site li + li { margin-top: 0.5rem; }
.site blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid hsl(var(--border)); }
.site hr { margin: 2.5rem 0; border: 0; border-top: 1px solid hsl(var(--border)); }
.site code, .site pre { font-family: var(--font-mono); font-size: 0.9em; }
.site pre { padding: 1rem; overflow-x: auto; background: hsl(var(--muted)); }
.site .meta, .site .date, .site .caption { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.5; }
.site .date { margin-bottom: 0.75rem; }
.site .page-intro { margin-bottom: 2rem; }
.site .page-intro > :last-child { margin-bottom: 0; }
.site .lead { font-size: 1.25rem; line-height: 1.6; }
.site .subtitle { color: hsl(var(--muted-foreground)); margin-top: -0.5rem; }

/* Existing navigation varies by page; CSS shares its presentation only. */
.site .nav { padding-block: 2rem 0; font-size: 1rem; }
.site .masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 2rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.site .masthead .rule { flex: 1; height: 1px; background: hsl(var(--border)); }
.site .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.25rem 2rem; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }

/* Existing lists and reference material. */
.site .reference-list, .site .career-list { list-style: none; padding: 0; margin: 0; }
.site .reference-list > li { margin: 0 0 1rem; }
.site .reference-list .meta { display: block; margin-bottom: 0.125rem; }
.site .career-item { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.25rem 1.5rem; margin-bottom: 1.75rem; }
.site .career-item h3 { margin: 0; }
.site .career-item p { margin: 0.25rem 0 0; }
.site .links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; font-size: 1rem; }
.site .links li { margin: 0; }
/* Call notes: a run-in bold lead, its body, then its links as a footnote line. */
.site .note { margin-bottom: 1.75rem; }
.site .note p { margin-bottom: 0.75rem; }
.site .note .links { margin: 0; }
.site .note .links a { color: hsl(var(--muted-foreground)); }
.site .note .links a:hover { color: hsl(var(--accent)); }
.site .notes h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border)); }
.site .author-note { margin: 1.5rem 0 2rem; color: hsl(var(--muted-foreground)); font-size: 1rem; }
.site .author-note p { margin-bottom: 0.5rem; }
.site .signoff { margin-bottom: 0.25rem; }

/* Service pages use the same type and controls, with space for real imagery. */
.site .portrait-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 2.5rem; align-items: start; }
.site .hero-portrait { width: 100%; }
.site .photo { width: 8rem; height: 8rem; object-fit: cover; margin-bottom: 1.5rem; border-radius: 50%; }
.site .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.5rem 0 2rem; }
.site .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.7rem 1.15rem; border: 1px solid hsl(var(--accent)); border-radius: var(--radius); background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.site .btn-primary:hover { background: hsl(var(--foreground)); border-color: hsl(var(--foreground)); text-decoration: none; }
.site .btn-secondary { font-size: 1rem; }
.site .logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-block: 1rem 2rem; }
.site .related-link { display: flex; align-items: start; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid hsl(var(--border)); text-decoration: none; }
.site .related-link img { flex-shrink: 0; object-fit: cover; }
.site .card-kicker, .site .card-sub { display: block; margin-top: 0.25rem; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.5; }
.site .card-title { display: block; font-weight: 600; text-decoration: underline; text-underline-offset: 0.17em; }
.site .related-link svg { width: 0.9em; height: 0.9em; display: inline; vertical-align: baseline; fill: currentColor; }
.site .steps li { padding-left: 0.25rem; margin-bottom: 1.25rem; }
.site .steps h3 { margin-top: 0; }
.site .steps p { margin-bottom: 0; }
.site .closer { margin-top: 2.5rem; padding-top: 0.25rem; border-top: 1px solid hsl(var(--border)); }
.site .deal section { margin-top: 1.5rem; }
.site .deal strong { display: block; margin-bottom: 0.25rem; }

@media (max-width: 40rem) {
  .site .site-main { margin-block: 2rem 3rem; }
  .site .portrait-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .site .career-item { grid-template-columns: 1fr; }
  .site .hero-portrait { max-width: 28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { scroll-behavior: auto !important; }
}

.site .reference-link { display: block; text-decoration: none; }
.site .reference-link > span:last-child { text-decoration: underline; text-underline-offset: 0.17em; }
.site .label, .site .section-label, .site .eyebrow { display: block; font-size: 1rem; font-weight: 600; margin-block: 1.5rem 0.5rem; }
.site .masthead.label { display: flex; margin: 0; color: hsl(var(--muted-foreground)); font-weight: 400; }
.site .cta-note, .site .hero-kicker { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.site .blog-intro { margin-block: 3rem 2rem; }
.site .blog-posts { margin-bottom: 4rem; }
.site .post { display: block; padding-block: 1rem; border-bottom: 1px solid hsl(var(--border)); text-decoration: none; }
.site .post .meta, .site .post .title, .site .post .desc { display: block; }
.site .post .title { margin-block: 0.25rem; font-size: 1.25rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.17em; }
.site .post .desc { color: hsl(var(--foreground)); }

/* Rime retains its own content, branding, anchors, and footer. */
.site.car-wash .topbar { width: min(var(--content-width), calc(100% - 3rem)); margin: 2rem auto; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.site.car-wash .hero { margin-block: 3rem; }
.site.car-wash section { margin-bottom: 2.5rem; }
.site.car-wash .hero-image, .site.car-wash .rime-photo-img { width: 100%; }
.site.car-wash .price-badge { margin-top: 0.75rem; font-weight: 600; }
.site.car-wash .service-item { margin-block: 1.5rem; }
.site.car-wash .service-num, .site.car-wash .service-check, .site.car-wash .photo-caption { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.site.car-wash .service-content h3 { margin-top: 0.25rem; }
.site.car-wash .stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 1.5rem; }
.site.car-wash .stats-row .label { font-size: 1rem; font-weight: 400; margin: 0; }
.site.car-wash .num, .site.car-wash .total-amount { font-weight: 600; }
.site.car-wash .total-amount small { display: block; font-size: 1rem; font-weight: 400; }
.site.car-wash .contact-grid { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-bottom: 1.5rem; }
.site.car-wash > footer { border-top: 1px solid hsl(var(--border)); padding-block: 1.25rem 2rem; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); }
.site.car-wash footer .big { color: hsl(var(--foreground)); font-weight: 600; }