/* ==========================================================================
   LAYOUT — wraps, header/nav, footer, responsive breakpoints
   Breakpoints:  mobile  < 640px   |   tablet 640–1023px   |   desktop ≥1024px
   ========================================================================== */

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 760px; }

.section { padding-block: clamp(3.4rem, 2.5rem + 4vw, 6rem); }
.section-lead { color: var(--ink-soft); max-width: 60ch; font-size: var(--step-1); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1);
  font-weight: 700; color: var(--brand); margin-bottom: .5rem;
}
.section h2 { margin-bottom: .6rem; }

/* --- Demo banner ---------------------------------------------------------- */
.demo-banner {
  background: var(--ink); color: #f7e4d3; text-align: center;
  font-size: var(--step--1); padding: .55rem 1rem;
}

/* --- Header / nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-name { font-size: var(--step-1); letter-spacing: -.02em; }
.brand-mark { display: inline-flex; }

.primary-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.6rem); }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.6rem); }
.primary-nav a { color: var(--ink); font-weight: 500; font-size: var(--step-0); }
.primary-nav a:hover { color: var(--brand); text-decoration: none; }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 24px; margin: 5px auto; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .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); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #e9d9cb; margin-top: 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.site-footer .brand-name { color: #fff; }
.footer-brand p { color: #c9b6a6; margin-top: .6rem; max-width: 32ch; font-size: var(--step-0); }
.footer-col h3 { color: #fff; font-size: var(--step-0); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a { color: #d8c7b8; }
.footer-col a:hover { color: #fff; }
.footer-safety p { color: #c9b6a6; margin-bottom: .8rem; font-size: var(--step--1); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.5rem; }
.footer-legal p { color: #b6a396; font-size: var(--step--1); max-width: 90ch; }
.footer-legal .copyright { margin-top: .5rem; color: #8f7d70; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet and below */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

/* Mobile — collapse nav into a toggle drawer */
@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem 1.2rem 1.2rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav a { display: block; padding: .9rem .2rem; font-size: var(--step-1); }
  .primary-nav .btn-crisis { margin-top: .9rem; text-align: center; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}