/* ========== Fonts & Base ========== */
:root{
  --container: min(1200px, 92vw);
  --gap: 1.25rem;
  --radius: 18px;
  --line: #e9eaee;
  --ink: #0f1720;
  --muted: #5b616b;
  --brand: #111; /* tune later to match lunnaloans.com palette */
  --bg: #fff;
  --bg2: #f8f9fb;

  /* Font stacks */
  --font-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-alt: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* If you prefer Inter globally, swap to var(--font-alt) here */
.font-alt { font-family: var(--font-alt); }

img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ width: var(--container); margin-inline:auto; }
.site-header, .site-footer{ background: var(--bg); border-bottom: 1px solid var(--line); }
.site-footer{ border-top: 1px solid var(--line); border-bottom: 0; }

.menu{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap; }
.menu a{ text-decoration:none; }

/* Simple spacing utilities */
.section{ padding-block: clamp(2rem, 4vw, 4rem); }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.mt-1{ margin-top:.5rem } .mb-1{ margin-bottom:.5rem }
.mt-2{ margin-top:1rem } .mb-2{ margin-bottom:1rem }
.p-2{ padding:1rem } .p-3{ padding:1.5rem }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.25rem; border-radius:999px; border:1px solid var(--ink);
  background:#fff; color:#111; cursor:pointer; text-decoration:none; transition:.2s;
}
.btn--solid{ background:#111; color:#fff; border-color:#111; }
.btn:hover{ opacity:.9; text-decoration:none; }

/* Basic cards */
.card{
  background: var(--bg2);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* Responsive helpers */
@media (max-width: 768px){
  .container{ width: min(100%, 92vw); }
}