/* ============================================================
   BRAND TOKENS — Community Development Partners
   Palette + type taken from the CDP project-sign identity:
   warm cream ground, near-black ink, elegant serif with
   tracked sans-serif caps for labels. Monochrome by design.
   ============================================================ */
:root{
  --paper:      #f4f0eb;   /* brand cream */
  --paper-deep: #ebe5db;   /* alternate band */
  --ink:        #16130e;   /* warm near-black */
  --ink-soft:   #4f4a42;
  --stone:      #7a7064;   /* muted label tone (darkened for WCAG AA on cream) */
  --line:       #ddd5c8;
  --accent:     #16130e;   /* emphasis / buttons (brand is monochrome) */
  --accent-ink: #f4f0eb;

  --font-display: "Cormorant", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
a{ color:inherit; }

/* small tracked-caps label, the brand's sans voice */
.eyebrow, .ba-tag, .ba-caption, .col h3, .brand-name span, .credit{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.22em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.18em;
  padding:.95rem 1.6rem; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:1px; text-decoration:none; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); opacity:.9; }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1rem; }
.brandlock{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.seal{ width:72px; height:72px; flex:none; color:var(--ink); }
.seal svg{ display:block; width:100%; height:100%; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.85rem; line-height:1; color:var(--ink); }
.brand-name span{ display:block; font-weight:500; font-size:.72rem; color:var(--stone); margin-top:.45rem; }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(3.5rem, 8vw, 7rem) clamp(2rem,5vw,3.5rem); }
.eyebrow{ font-size:.74rem; color:var(--stone); font-weight:600; margin-bottom:1.5rem; }
.hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.9rem, 1.6rem + 5.4vw, 5.6rem);
  line-height:1.0; letter-spacing:-0.005em; max-width:15ch; margin-bottom:1.6rem;
}
.hero p.lead{ font-size:clamp(1.05rem, 1rem + 0.35vw, 1.28rem); color:var(--ink-soft); max-width:52ch; line-height:1.6; }

/* staggered reveal */
.reveal{ opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal.d1{ animation-delay:.05s } .reveal.d2{ animation-delay:.15s } .reveal.d3{ animation-delay:.28s } .reveal.d4{ animation-delay:.42s }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .reveal{ animation:none; opacity:1; transform:none; } }

/* ============================================================
   BEFORE / AFTER SLIDER  —  the centerpiece
   ============================================================ */
.ba-stage{ padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.ba{
  --pos:50;
  position:relative; width:100%;
  aspect-ratio:3 / 2;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:var(--paper-deep);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  cursor:ew-resize;
}
.ba img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  -webkit-user-drag:none; user-drag:none; pointer-events:none; -webkit-touch-callout:none;
}
.ba-before{ clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0); }
.ba.is-smooth .ba-before{ transition:clip-path .18s ease; }

.ba-tag{
  position:absolute; top:1rem; z-index:3;
  font-size:.62rem; font-weight:600; color:#fff;
  background:rgba(22,19,14,.6); backdrop-filter:blur(2px); padding:.42rem .72rem; border-radius:1px; pointer-events:none;
}
.ba-tag--before{ left:1rem; } .ba-tag--after{ right:1rem; }

.ba-handle{
  position:absolute; top:0; bottom:0; left:calc(var(--pos) * 1%);
  width:2px; transform:translateX(-1px);
  background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(22,19,14,.18); z-index:4; cursor:ew-resize;
}
.ba.is-smooth .ba-handle{ transition:left .18s ease; }
.ba-grip{
  position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 2px 12px rgba(22,19,14,.28);
  display:grid; place-items:center; color:var(--ink);
}
.ba-handle:focus-visible{ outline:none; }
.ba-handle:focus-visible .ba-grip{ box-shadow:0 0 0 3px var(--accent), 0 2px 12px rgba(22,19,14,.28); }
.ba-grip svg{ display:block; }
.ba.dragging .ba-grip{ transform:translate(-50%,-50%) scale(1.06); }

.ba-caption{ margin-top:1rem; font-size:.66rem; color:var(--stone); font-weight:600; display:flex; justify-content:space-between; gap:1rem; }

@media (max-width:600px){ .ba{ aspect-ratio:4 / 3; } }

/* Hide the sticky header CTA on narrow screens so the wordmark + seal
   keep room. The hero and footer CTAs still cover the conversion path. */
@media (max-width:720px){
  .nav-cta{ display:none; }
}
@media (max-width:520px){
  header{ position:static; }
}

/* ---------- Positioning band ---------- */
.band{ background:var(--paper-deep); border-block:1px solid var(--line); }
.band .wrap{ padding-block:clamp(3rem,6vw,5.5rem); }
.band h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,1.3rem+2vw,2.9rem); letter-spacing:-0.005em; line-height:1.1; margin-bottom:2.75rem; max-width:22ch; }
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); }
.col h3{ font-weight:600; font-size:.74rem; color:var(--ink); margin-bottom:.7rem; padding-top:1rem; border-top:1px solid var(--ink); }
.col p{ color:var(--ink-soft); font-size:.96rem; }
@media (max-width:720px){ .cols{ grid-template-columns:1fr; gap:1.75rem; } }

/* ---------- CTA ---------- */
.cta{ padding-block:clamp(4rem,9vw,7.5rem); text-align:center; }
.cta h2{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(2.4rem,1.6rem+3vw,4rem); letter-spacing:-0.005em; margin-bottom:1.2rem; }
.cta p{ color:var(--ink-soft); max-width:46ch; margin:0 auto 2.4rem; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); }
footer .wrap{ padding-block:2.75rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:flex-end; font-size:.85rem; color:var(--ink-soft); }
footer .firm{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--ink); }
footer a{ text-decoration:none; border-bottom:1px solid var(--line); }
footer a:hover{ border-color:var(--ink); }
.credit{ color:var(--stone); font-size:.62rem; font-weight:600; }