/* ---------------------------------------------------------------------------
   Distilled Development — styles

   Theming happens in three layers, and only the last one needs JavaScript:

     1. :root                              the light palette, always defined
     2. @media (prefers-color-scheme:dark) the dark palette, honouring the
                                           setting the visitor already made
                                           system-wide — no JavaScript involved
     3. :root[data-theme="…"]              an explicit choice made on this site,
                                           applied pre-paint by theme.js and
                                           flipped by main.js

   Layer 1 is what guarantees the page is never unstyled: with the palette
   defined only under [data-theme], a visitor with JavaScript disabled would get
   no custom properties at all.
--------------------------------------------------------------------------- */

/* Layer 1 — light, the default when nothing else applies. */
:root {
  --bg: #FBFBFA;
  --bg2: #F3F3EF;
  --text: #15151A;
  --muted: #52525c;
  --faint: #86868f;
  --accent: #0B8A5B;      /* darkened green for AA contrast on light */
  --accent-text: #FFFFFF;
  --line: #e7e7e1;
  --card: #FFFFFF;
  --card-line: #e9e9e3;
  --danger: #b3261e;      /* AA contrast on the light background */
  color-scheme: light;
}

/* Layer 2 — the visitor's system preference. Guarded so that an explicit
   light override still wins on a device set to dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E12;
    --bg2: #15151B;
    --text: #EDEDF0;
    --muted: #9b9ba5;
    --faint: #7e7e8a;
    --accent: #7CF5C4;
    --accent-text: #0E0E12;
    --line: #23232b;
    --card: #16161d;
    --card-line: #262630;
    --danger: #ff6b6b;
    color-scheme: dark;
  }
}

/* Layer 3 — an explicit choice on this site, which beats both of the above. */
:root[data-theme="dark"] {
  --bg: #0E0E12;
  --bg2: #15151B;
  --text: #EDEDF0;
  --muted: #9b9ba5;
  --faint: #7e7e8a;
  --accent: #7CF5C4;
  --accent-text: #0E0E12;
  --line: #23232b;
  --card: #16161d;
  --card-line: #262630;
  --danger: #ff6b6b;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FBFBFA;
  --bg2: #F3F3EF;
  --text: #15151A;
  --muted: #52525c;
  --faint: #86868f;
  --accent: #0B8A5B;
  --accent-text: #FFFFFF;
  --line: #e7e7e1;
  --card: #FFFFFF;
  --card-line: #e9e9e3;
  --danger: #b3261e;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}

a { color: inherit; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- Nav -------------------------------------------------------------- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 14px;
}

.brand {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 26px;
}

.navlinks a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.navlinks a:hover { color: var(--text); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12px/1 system-ui, sans-serif;
  padding: 8px 13px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.toggle:hover { border-color: var(--accent); }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding: 70px 0 60px; }

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--accent);
  margin: 0 0 22px;
}

h1 {
  font-weight: 660;
  letter-spacing: -.025em;
  font-size: clamp(38px, 6vw, 54px);
  line-height: 1.06;
  margin: 0 0 22px;
  max-width: 17ch;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 32px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  transition: transform .12s ease, opacity .15s ease;
}
.cta:hover { transform: translateY(-1px); opacity: .92; }

.cta.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.cta.ghost:hover { border-color: var(--accent); }

.logos {
  margin: 54px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
  letter-spacing: .02em;
}
.logos b { color: var(--muted); font-weight: 600; margin: 0 2px; }

/* ---- Sections --------------------------------------------------------- */
section { padding: 64px 0; }

.label {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(28px, 4vw, 32px);
  font-weight: 640;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

.section-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0 0 40px;
}

/* ---- Approach cycle (timeline) ---------------------------------------- */
.cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  padding-bottom: 34px;
}
.phase:last-child { padding-bottom: 0; }

/* connector line linking the step markers */
.phase::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: -6px;
  width: 2px;
  background: var(--line);
}
.phase:last-child::before { display: none; }

.phase-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.phase-body { padding-top: 7px; }
.phase-body h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -.01em; }
.phase-body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 60ch; }

/* ---- About ------------------------------------------------------------ */
.about {
  background: var(--bg2);
  border-radius: 20px;
  padding: 48px;
}
.about h2 { margin-bottom: 18px; }
.about p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
  margin: 0 0 16px;
}
.about p:last-child { margin-bottom: 0; }
.about p b { color: var(--text); font-weight: 600; }

/* ---- Contact ---------------------------------------------------------- */
.contact { text-align: center; }
.contact .label { /* keep centered with the rest */ }
.contact h2 { font-size: clamp(32px, 5vw, 40px); margin-bottom: 12px; }
.contact .section-sub { margin: 0 auto 34px; }

form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  gap: 16px;
}

.field { display: grid; gap: 6px; }

label { font-size: 13px; color: var(--muted); }

input, textarea {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 9px;
  padding: 13px 15px;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  transition: border-color .15s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
textarea { min-height: 120px; resize: vertical; }

/* Honeypot — visually and from layout hidden, still in the DOM for bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button.send {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 9px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: transform .12s ease, opacity .15s ease;
}
button.send:hover { transform: translateY(-1px); opacity: .92; }
button.send:disabled { opacity: .55; cursor: default; transform: none; }

.form-status { font-size: 14px; margin: 4px 0 0; min-height: 1.2em; }
.form-status.ok { color: var(--accent); }
.form-status.err { color: var(--danger); }

/* Per-field validation message, rendered by the server beneath its input. */
.field-error {
  font-size: 13px;
  margin: 0;
  color: var(--danger);
}

[aria-invalid="true"] { border-color: var(--danger); }

/* While htmx has a request in flight, the submit button is disabled via
   hx-disable; make that visible rather than leaving it looking clickable. */
.send:disabled { opacity: .6; cursor: progress; }

/* ---- Footer ----------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--faint);
}
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---- Focus visibility ------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .about { padding: 30px; }
  section { padding: 48px 0; }
}

@media (max-width: 600px) {
  .navlinks a { display: none; }   /* short page; keep nav to brand + toggle on mobile */
  .navlinks { gap: 0; }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}