/* Additions on top of site.css (the compiled Tailwind build from the original site). */

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5rem; }

/* ---------- Header ---------- */
.jm-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .5s, border-color .5s;
}
.jm-header.is-scrolled,
.jm-header.is-open {
  background: hsl(var(--background) / .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: hsl(var(--border));
}
/* Both pages open on a dark hero, so the transparent header needs light text. */
.jm-header:not(.is-scrolled):not(.is-open) .font-heading,
.jm-header:not(.is-scrolled):not(.is-open) .jm-toggle { color: hsl(var(--background)); }
.jm-nav, .jm-cta { display: none; }
@media (min-width: 1024px) {
  .jm-header.is-scrolled .jm-nav { display: flex; align-items: center; gap: 2.25rem; }
  .jm-header.is-scrolled .jm-cta { display: block; }
  .jm-toggle, .jm-mobile { display: none !important; }
}
.jm-navlink {
  position: relative; font-family: var(--font-body); font-size: .875rem; letter-spacing: .025em;
  color: hsl(var(--primary) / .8); transition: color .3s;
}
.jm-navlink::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: hsl(var(--accent)); transition: width .5s;
}
.jm-navlink:hover { color: hsl(var(--primary)); }
.jm-navlink:hover::after { width: 100%; }

.jm-toggle .jm-icon-close { display: none; }
.jm-header.is-open .jm-toggle .jm-icon-open { display: none; }
.jm-header.is-open .jm-toggle .jm-icon-close { display: block; }
.jm-mobile { overflow: hidden; max-height: 0; transition: max-height .5s; }
.jm-header.is-open .jm-mobile { max-height: 480px; }
.jm-mlink {
  padding: .75rem 0; font-family: var(--font-body); font-size: .875rem; letter-spacing: .025em;
  color: hsl(var(--primary) / .8); border-bottom: 1px solid hsl(var(--border) / .6);
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Founder section (text-only) ---------- */
.jm-founder-quote {
  position: relative; padding: 2.5rem 0 2.5rem 2rem;
  border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
}
.jm-founder-quote::before {
  content: ""; position: absolute; left: 0; top: 2.5rem; bottom: 2.5rem; width: 2px; background: hsl(var(--accent));
}
.jm-founder-quote p { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.3; max-width: 60rem; }

/* ---------- FAQ accordion ---------- */
[data-acc-trigger] svg { transition: transform .2s; }
[data-acc-trigger][aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Inquiry form ---------- */
.jm-step { display: flex; align-items: center; gap: .5rem; color: hsl(var(--muted-foreground)); }
.jm-step-dot {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .75rem; border: 1px solid hsl(var(--border));
}
.jm-step.is-active { color: hsl(var(--accent)); }
.jm-step.is-active .jm-step-dot { border-color: hsl(var(--accent)); background: hsl(var(--accent)); color: hsl(var(--primary)); }
.jm-step-line { height: 1px; flex: 1; background: hsl(var(--border)); }
.jm-step-line.is-active { background: hsl(var(--accent)); }

.jm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.jm-chip span {
  display: inline-flex; align-items: center; min-height: 48px; padding: .75rem 1.25rem; cursor: pointer;
  font-family: var(--font-body); font-size: .875rem; color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border)); transition: all .3s;
}
.jm-chip span:hover { border-color: hsl(var(--accent) / .6); }
.jm-chip input:checked + span { border-color: hsl(var(--accent)); background: hsl(var(--accent) / .1); color: hsl(var(--primary)); }
.jm-chip input:focus-visible + span { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }

.jm-select {
  appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E9196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; padding-right: 2rem;
}
[hidden] { display: none !important; }