/* components.css */

/* buttons — white pill default, GREEN on hover/active (approved interaction) */
.btn{display:inline-block;font-family:var(--f-body);font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:999px;transition:background .18s,color .18s,border-color .18s;cursor:pointer}
.btn-primary{background:var(--c-ink);color:var(--c-bg);border:1px solid var(--c-ink)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--c-green);color:#06231a;border-color:var(--c-green)}
.btn-ghost{background:transparent;color:var(--c-ink);border:1px solid var(--c-line)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--c-green);color:var(--c-green)}
.btn-link{font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--c-green)}

/* eyebrow label */
.eyebrow{display:flex;align-items:center;gap:.75rem;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--c-sage-lg);font-weight:600;margin-bottom:1.25rem}

/* trust strip */
.trust{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.8rem;color:var(--c-sage);letter-spacing:.04em}
.trust b{color:var(--c-green);font-weight:600}

/* card */
.card{background:var(--c-panel);border:1px solid var(--c-line);border-radius:14px;padding:1.5rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--c-sage)}

/* review card */
.review{background:var(--c-panel);border:1px solid var(--c-line);border-radius:14px;padding:1.4rem}
.review .stars{color:var(--c-green);letter-spacing:3px}
.review blockquote{font-family:var(--f-display);font-size:1.05rem;line-height:1.4;margin:.85rem 0 1rem}
.review .who{font-size:.8rem;color:var(--c-sage)}
.review .who b{color:var(--c-ink)}
.review .src{margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--c-line);
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-sage-lg)}
.review .src a{color:var(--c-green)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch}
.hero .htext{padding:var(--s-7) var(--s-4)}
.hero h1 em{font-style:italic;color:var(--c-green)}
.hero .sub{color:var(--c-sage);margin:1rem 0 1.75rem;font-size:1.05rem}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap}
.framed{position:relative;background:linear-gradient(150deg,#2c5a3f,#173524 45%,var(--c-bg));min-height:340px}
.framed .line{position:absolute;inset:18px;border:1px solid rgba(236,239,231,.18)}
.framed .tag{position:absolute;top:18px;right:18px;background:var(--c-ink);color:var(--c-bg);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;padding:5px 10px;border-radius:999px}
@media(max-width:760px){ .hero{grid-template-columns:1fr} .framed{min-height:220px} }

/* grid helper */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){ .grid-3{grid-template-columns:1fr} }

/* before/after slider (auto-sweep + hover-to-control) */
.ba-slider{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  --pos:0%;touch-action:none;cursor:ew-resize;user-select:none;border:1px solid var(--c-line)}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.5)}
.ba-handle{position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:999px;background:#fff;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.45)}
.ba-handle::before,.ba-handle::after{content:"";border:solid var(--c-bg);border-width:0 2px 2px 0;padding:3px;display:inline-block}
.ba-handle::before{transform:rotate(135deg);margin-right:3px}
.ba-handle::after{transform:rotate(-45deg);margin-left:3px}
.ba-tag{position:absolute;bottom:12px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:rgba(12,22,17,.72);color:var(--c-ink);pointer-events:none}
.ba-tag-before{left:12px}
.ba-tag-after{right:12px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba-range:focus-visible{outline:2px solid var(--c-green);outline-offset:2px;opacity:1;background:transparent}

/* ── scroll reveals (CSS motion; reveal.js toggles .is-in; gated by .js so content shows without JS) ── */
.js [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-stagger]>*{opacity:0;transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.js [data-stagger].is-in>*{opacity:1;transform:none}
.js [data-stagger].is-in>*:nth-child(2){transition-delay:.07s}
.js [data-stagger].is-in>*:nth-child(3){transition-delay:.14s}
.js [data-stagger].is-in>*:nth-child(4){transition-delay:.21s}
.js [data-stagger].is-in>*:nth-child(5){transition-delay:.28s}
.js [data-stagger].is-in>*:nth-child(6){transition-delay:.35s}
/* failsafe: if JS/observer never fires within ~1.8s, show everything */
.js.anim-failsafe [data-reveal],.js.anim-failsafe [data-stagger]>*{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
}