/* Lauri's House Cleaning — spec preview. Colors from their published logo. */
:root {
  --ink: #111111;
  --cyan: #2eb8d1;
  --cyan-d: #1a8ea3;
  --yellow: #f4d35e;
  --paper: #f7f4ee;
  --white: #fff;
  --mute: #5a5852;
  --rule: #e2dcd0;
  --max: 1080px;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Karla", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--cyan-d); }
.skip { position:absolute; left:-999px; top:0; background:#000; color:#fff; padding:.6rem 1rem; z-index:100; }
.skip:focus { left:.5rem; top:.5rem; }
.wrap { width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:40; background:#111; color:#fff; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:80px; }
.wordmark { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff; }
.wordmark img { height:56px; width:auto; background:#111; }
.wordmark strong { display:block; letter-spacing:.08em; font-size:.95rem; }
.wordmark span { display:block; color:var(--yellow); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.nav-toggle { display:none; background:var(--cyan); color:#111; border:0; padding:.5rem .8rem; font:inherit; font-weight:700; }
nav ul { display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; align-items:center; }
nav a { color:#fff; text-decoration:none; font-weight:700; }
nav a[aria-current="page"] { color:var(--yellow); }
.btn { display:inline-block; text-decoration:none; font-weight:700; padding:.75rem 1.1rem; border-radius:2px; }
.btn-cyan { background:var(--cyan); color:#082328; }
.btn-yellow { background:var(--yellow); color:#111; }
.btn-ghost { border:2px solid currentColor; color:inherit; }
.hero { padding:3rem 0 2.2rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
h1, h2, h3 { font-family:var(--serif); line-height:1.25; }
h1 { font-size:clamp(1.9rem, 4.5vw, 2.8rem); margin:.3rem 0 .8rem; }
.eyebrow { letter-spacing:.16em; text-transform:uppercase; font-size:.75rem; font-weight:700; color:var(--cyan-d); }
.lede { font-size:1.12rem; max-width:38rem; color:var(--mute); }
.hero-photo { border:1px solid var(--rule); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.section { padding:2.8rem 0; }
.section.white { background:var(--white); }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.card { background:var(--white); border-top:4px solid var(--cyan); padding:1.1rem 1.2rem; }
.story { display:grid; grid-template-columns:.9fr 1.1fr; gap:2rem; align-items:center; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.step { background:var(--white); padding:1rem; }
.step b { display:block; color:var(--cyan-d); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.site-footer { background:#111; color:#ccc; padding:2rem 0; }
.site-footer a { color:#fff; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
form { display:grid; gap:.7rem; max-width:32rem; }
label { display:grid; gap:.25rem; font-weight:700; }
input, textarea { font:inherit; padding:.65rem .7rem; border:1px solid var(--rule); }
.note { font-size:.88rem; color:var(--mute); }
@media (max-width: 820px) {
  .hero, .grid, .story, .steps { grid-template-columns:1fr; }
  .nav-toggle { display:block; }
  nav { display:none; position:absolute; right:1rem; top:80px; background:#111; padding:1rem; }
  nav.open { display:block; }
  nav ul { flex-direction:column; align-items:flex-start; }
}