/* Styles including modal and Netlify forms */
:root{
  --ink:#2b2118;
  --coffee-700:#3a2a1e;
  --coffee-500:#7b5e42;
  --coffee-200:#f3ede6;
  --cream:#faf7f2;
  --accent:#c69c6d;
  --focus: #1b6cff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
.hidden{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
h1,h2,h3{font-family: Outfit, Inter, system-ui, sans-serif; line-height:1.2; color:var(--coffee-700)}
h1{font-size:clamp(1.9rem,3.8vw,3rem); margin:0 0 .5rem}
h2{font-size:clamp(1.4rem,2.2vw,2rem); margin:0 0 .75rem}
h3{font-size:1.1rem; margin:.25rem 0 .25rem}
p{margin:.25rem 0 1rem}
a{color:var(--coffee-700); text-decoration-thickness: .08em;}
a:focus{outline:3px solid var(--focus); outline-offset:2px}
.container{width:min(1100px,92vw); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
  background:color-mix(in oklab, var(--cream) 80%, white);
  border-bottom:1px solid color-mix(in oklab, var(--coffee-200) 70%, white);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--coffee-700); text-decoration:none}
.brand-text{letter-spacing:.3px}
.menu{display:flex; gap:1rem; align-items:center}
.menu a{font-weight:600}
.btn{
  display:inline-block; border:none; background:var(--coffee-700); color:#fff; padding:.8rem 1rem;
  border-radius:.6rem; font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:var(--accent); color:#1b110a}
.btn-small{padding:.5rem .7rem; font-size:.9rem}
.btn.outline{background:transparent; color:var(--coffee-700); border:2px solid var(--coffee-700)}

.hero{ background: radial-gradient(1000px 280px at 20% -10%, #fff 10%, var(--cream) 60%, var(--coffee-200) 100%) }
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; padding:5.5rem 0 3rem}
.hero-copy .lead{font-size:1.05rem; max-width:50ch}
.cta{display:flex; gap:.8rem; margin:1rem 0}
.hero-art{display:flex; align-items:center; justify-content:center}
.badge{ padding:1.2rem 1rem; border:2px dashed var(--coffee-500); border-radius:1rem; color:var(--coffee-700); background:#fff; text-align:center; font-weight:700; max-width:20rem }

.trust{padding:1.2rem 0; background:#fff; border-top:1px solid var(--coffee-200); border-bottom:1px solid var(--coffee-200)}
.trust-list{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin:0; padding:0; list-style:none}
.trust-list li{background:var(--coffee-200); padding:.6rem .8rem; border-radius:.6rem; font-weight:600}

.services{padding:3rem 0}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.card{background:#fff; padding:1rem; border-radius:.9rem; border:1px solid var(--coffee-200); box-shadow:0 6px 18px rgba(0,0,0,.04)}

.brands{padding:1rem 0 2.2rem}

.about{padding:3rem 0; background:linear-gradient(0deg, #fff 0%, var(--cream) 100%)}
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1.5rem; align-items:start}
.about-card{background:#fff; padding:1rem; border-radius:.9rem; border:1px solid var(--coffee-200)}

.area{padding:2.5rem 0}
.contact{padding:3rem 0; background:#fff; border-top:1px solid var(--coffee-200)}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem}
.form{display:grid; gap:.6rem; max-width:520px}
input,textarea{
  width:100%; padding:.8rem; border:1px solid var(--coffee-200); border-radius:.6rem; background:var(--cream);
}
label{font-weight:600}
.microcopy{font-size:.9rem; opacity:.8}

.site-footer{padding:2rem 0; background:var(--coffee-700); color:#fff; margin-top:2rem}
.site-footer a{color:#fff; text-decoration:underline}
.foot{display:flex; align-items:center; justify-content:space-between}

.backtotop{font-weight:700}

.checklist{padding:0; margin:1rem 0; list-style:none; display:grid; gap:.4rem}
.checklist li::before{content:"✓"; margin-right:.5rem; color:var(--accent); font-weight:800}

.modal::backdrop{background:rgba(0,0,0,.5)}
.modal{border:none; padding:0; border-radius:.8rem; max-width:min(560px,92vw)}
.modal-card{background:#fff; padding:1rem 1.2rem; border-radius:.8rem; border:1px solid var(--coffee-200)}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:.6rem}

.hours{padding-left:1rem}
.hours li{margin:.25rem 0}

@media (max-width: 900px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr}
  .menu{display:none}
  .hero{padding-top:.7rem}
}