/* Katie & Kate Cleaning — Simple, responsive theme */
:root{
  --bg:#d4cbbd;       /* warm taupe like the flyers */
  --panel:#f3efe8;
  --ink:#1a1a1a;
  --muted:#50545a;
  --brand:#efb2df;    /* soft pink accent */
  --brand-2:#b3a3ff;  /* soft lilac */
  --card:#ffffff;
  --border:#e0d8cc;
  --focus:#111;
}
:root.dark{
  --bg:#0f1113;
  --panel:#181b1f;
  --ink:#e9ecf1;
  --muted:#aab2c3;
  --brand:#efb2df;
  --brand-2:#b3a3ff;
  --card:#1d2127;
  --border:#2a2f37;
  --focus:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
.container{width:min(1100px,92%); margin-inline:auto}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:static; padding:.5rem .75rem; background:var(--brand); color:#000}

.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(6px);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.75rem}
.logo{
  width:40px; height:40px; border-radius:.6rem;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; color:#000; font-weight:800;
}
.brand-title{font-size:1.15rem; margin:0}
.brand-tag{margin:0; color:var(--muted); font-size:.9rem}
.nav{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav a{color:inherit; text-decoration:none; padding:.3rem .4rem; border-radius:.4rem}
.nav a:hover{background:rgba(0,0,0,.06)}
.theme-toggle{margin-left:.75rem; border:1px solid var(--border); background:var(--panel); color:inherit; padding:.35rem .55rem; border-radius:.5rem; cursor:pointer}

.hero{padding:3rem 0 1.5rem}
.hero-grid{display:grid; gap:1.5rem; grid-template-columns:1.1fr .9fr; align-items:center}
.hero-copy h2{font-size:clamp(1.6rem, 1.2rem + 2vw, 2.6rem); margin:.2rem 0 .5rem}
.highlights{margin:.5rem 0 1rem}
.highlights li{margin:.25rem 0}
.cta-row{display:flex; gap:.6rem; flex-wrap:wrap}
.btn{background:var(--ink); color:#fff; border:none; border-radius:.6rem; padding:.65rem 1rem; text-decoration:none; display:inline-block; font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#0000000d; color:inherit; border:1px solid var(--ink)}

.section{padding:2rem 0}
.section.alt{background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-hd h2{margin:.2rem 0}
.section-hd p{margin:0; color:var(--muted)}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin:1rem 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:.9rem; overflow:hidden; transition:transform .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-2px)}
.card-link{color:inherit; text-decoration:none; display:block}
.card-body{padding:.9rem}
.card-body h3{margin:.2rem 0 .2rem}
.card-body p{margin:0; color:var(--muted)}

.wide-card{margin:1rem 0; border:1px solid var(--border); border-radius:.9rem; overflow:hidden; background:var(--card)}

.note{color:var(--muted)}

.contact-card{display:grid; gap:1rem}
.inquiry{display:grid; gap:.6rem; grid-template-columns:1fr 1fr}
.inquiry label{display:grid; gap:.35rem; font-weight:600}
.inquiry input, .inquiry select, .inquiry textarea{
  border:1px solid var(--border); background:#fff; color:#000; padding:.6rem .7rem; border-radius:.5rem; font:inherit
}
.inquiry textarea{grid-column:1/-1}
.inquiry button{justify-self:start}

.site-footer{border-top:1px solid var(--border); padding:1rem 0; color:var(--muted)}

@media (max-width: 820px){
  .hero-grid{grid-template-columns:1fr}
  .inquiry{grid-template-columns:1fr}
}