/* ============================================================
   site.css — shared foundation for every page
   Design tokens + layout + nav + buttons + footer + responsive
   ============================================================ */

:root {
  --bg:     #F8F7F4;
  --ink:    #1C1C1C;
  --accent: #E05A2B;
  --yellow: #F5E642;
  --mid:    #999;
  --soft:   #EFEFEB;
  --border: rgba(0,0,0,0.08);
  --maxw:   1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans', sans-serif;
  background:var(--bg);
  color:var(--ink);
  width:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; }

a { color:inherit; }

/* Centred, capped content container */
.inner {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}

/* Full-bleed band (marquee, coloured strips) */
.full { width:100%; }

/* ---------- HEADER / NAV ---------- */
.site-header { background:var(--bg); }

.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0;
}
.logo {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:900; font-size:20px; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
}
.logo span { color:var(--accent); }

.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a {
  color:var(--mid); text-decoration:none; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; transition:color 0.15s;
}
.nav-links a:hover { color:var(--ink); }
.nav-links a.on { color:var(--ink); font-weight:500; }

.nav-cta {
  background:var(--ink); color:#fff !important; padding:9px 20px;
  border-radius:100px; font-size:12px !important; font-weight:500 !important;
  transition:background 0.15s;
}
.nav-cta:hover { background:var(--accent); color:#fff !important; }

/* Hamburger — hidden on desktop */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform 0.25s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- BUTTONS ---------- */
.btn-dark, .btn-soft, .btn-yellow {
  display:inline-block; border:none; cursor:pointer;
  font-family:'DM Sans', sans-serif; white-space:nowrap;
  text-decoration:none; text-align:center; border-radius:100px;
  transition:background 0.15s, transform 0.15s;
}
.btn-dark  { background:var(--ink);   color:#fff;      padding:12px 24px; font-size:13px; font-weight:500; }
.btn-soft  { background:var(--soft);  color:var(--ink);padding:12px 24px; font-size:13px; }
.btn-yellow{ background:var(--yellow);color:var(--ink);padding:14px 32px; font-size:14px; font-weight:600; }
.btn-dark:hover  { background:var(--accent); }
.btn-soft:hover  { background:#e4e4de; }
.btn-yellow:hover{ transform:translateY(-2px); }

/* ---------- FOOTER ---------- */
.footer {
  padding:24px 0; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--border);
}
.footer-copy { font-size:12px; color:var(--mid); }
.social-links { display:flex; gap:20px; }
.social-links a { font-size:12px; color:var(--mid); text-decoration:none; }
.social-links a:hover { color:var(--accent); }

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width:760px) {
  .inner { padding:0 22px; }

  .nav-toggle { display:flex; z-index:201; }

  .nav-links {
    position:fixed; top:0; right:0; bottom:0;
    width:74%; max-width:300px;
    background:var(--bg);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:24px; padding:40px;
    transform:translateX(100%);
    transition:transform 0.28s ease;
    box-shadow:-12px 0 44px rgba(0,0,0,0.12);
    z-index:200;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links a { font-size:16px; }
  .nav-cta { align-self:flex-start; }
}