/* Fourseen — single stylesheet for all four pages.
   Kept deliberately small and readable: no framework, no build step. */

/* ---- Design tokens ---------------------------------------------------- */

:root {
  --ink:        #1a1d21;  /* body text */
  --ink-soft:   #555d66;  /* secondary text */
  --rule:       #dfe2e6;  /* hairlines */
  --paper:      #ffffff;
  --paper-tint: #f6f7f8;  /* section bands */
  --accent:     #1f3a5f;  /* deep navy — links, headings */

  --measure: 34rem;       /* comfortable reading width */
  --page:    40rem;       /* max page width: the measure plus breathing room */
}

/* ---- Base ------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, nav, .site-header, .site-footer, .eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1 { font-size: 2rem;    line-height: 1.25; margin: 0 0 1rem;    color: var(--accent); }
h2 { font-size: 1.35rem; line-height: 1.3;  margin: 2.5rem 0 .75rem; color: var(--accent); }
h3 { font-size: 1.05rem; line-height: 1.4;  margin: 1.75rem 0 .4rem; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.1rem; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* ---- Layout ----------------------------------------------------------- */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { padding: 3rem 0 4rem; }

/* Body text stays at --measure, but the column is centred inside the page
   rather than pinned to its left edge — so a wide monitor leaves even margins
   on both sides instead of one large empty field on the right. */
main .wrap > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.band {
  background: var(--paper-tint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 2.5rem 0;
  margin: 3rem 0;
}

/* ---- Header and navigation -------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  font-size: .95rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
}

nav a:hover { color: var(--accent); }

/* The current page is marked with aria-current in the HTML, so the styling
   and the accessibility hint stay in sync automatically. */
nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* ---- Hero (Home) ------------------------------------------------------- */

.hero { padding: 1rem 0 .5rem; }

.eyebrow {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .75rem;
}

.tagline {
  /* Fluid so each sentence still fits on one line at phone width; the upper
     bound is the old fixed 1.6rem, reached at about 30rem and above. */
  font-size: clamp(1.05rem, 5vw, 1.6rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

/* The break belongs to the sentence, not to the browser: each sentence is its
   own block, so the tagline is always exactly two lines and "Recovery" always
   starts the second one. The space between the spans in the HTML keeps the
   two sentences separated when the styles don't load. */
.tagline .line { display: block; }

.lead { font-size: 1.1rem; }

/* ---- Lists ------------------------------------------------------------- */

.plain { list-style: none; padding: 0; }
.plain li { margin-bottom: .5rem; }

.stack > * + * { margin-top: 2rem; }

/* ---- Placeholders for proof still to be gathered ----------------------- */

.awaiting {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .85rem;
  background: #fff6d9;
  border: 1px dashed #c9a227;
  border-radius: 3px;
  padding: .1em .45em;
  color: #6b5200;
  white-space: nowrap;
}

/* ---- Call to action ---------------------------------------------------- */

.cta { margin-top: 1.5rem; }

.button {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .95rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: .7rem 1.4rem;
  border-radius: 3px;
}

.button:hover { background: #162943; }

/* ---- Contact form ------------------------------------------------------ */

form { max-width: var(--measure); margin-top: 1.5rem; }

.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .9rem;
  margin-bottom: .35rem;
}

input, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: .6rem .7rem;
  border: 1px solid #b9bfc6;
  border-radius: 3px;
  background: #fff;
  color: inherit;
}

input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea { min-height: 8rem; resize: vertical; }

button[type="submit"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .95rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: .7rem 1.4rem;
  cursor: pointer;
}

button[type="submit"]:hover { background: #162943; }

.form-note { font-size: .9rem; color: var(--ink-soft); }

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.site-footer p { margin: 0 0 .4rem; max-width: none; }

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 34rem) {
  body { font-size: 17px; }
  h1 { font-size: 1.6rem; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: .75rem; }
}