/* ---------- Typography ----------
 * Self-hosted, subset to Latin, SOFT axis pinned to 0 (we never vary it),
 * so Fraunces ships at ~68KB instead of ~350KB.
 *
 * NOTE: Fraunces' default instance is wght 900 / opsz 9 / WONK 1. Any axis not
 * given a value in font-variation-settings falls back to that default, not to
 * something neutral — so wght and WONK are stated explicitly wherever
 * font-variation-settings is used.
 */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-italic-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('assets/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('assets/fonts/inter-italic-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f8f5ef;
  --panel: #fbfaf6;
  --ink: #151714;
  --muted: #4f514c;
  --green: #07553b;
  --green-2: #0a6648;
  --line: #ddd8cf;
  --soft: #f1f1e9;
  --shadow: 0 12px 26px rgba(22, 37, 28, .075);

  color-scheme: light;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'InterVar', Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
a { color: inherit; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.page-shell {
  width: min(1536px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 44px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.site-header { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img {
  display: block;
  height: clamp(46px, 4.1vw, 64px);
  width: auto;
}
.brand:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  min-height: 770px;
  padding: 14px 0 30px;
}
.hero-copy { max-width: 760px; }
h1 {
  /* -0.09em cancels most of the empty space that sits above the cap height on
     the first line (Fraunces ascender 0.978em vs cap 0.700em, line-height .99).
     In em so it tracks the clamp()ed font-size. */
  margin: -0.09em 0 28px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 5.1vw, 6.15rem);
  line-height: .99;
  letter-spacing: -.045em;
  font-weight: 400;
  text-wrap: balance;
  /* opsz 144 = display cut; WONK 1 = the eccentric letterforms */
  font-variation-settings: 'opsz' 144, 'wght' 400, 'WONK' 1;
}
h1 em { font-weight: 400; font-style: italic; }
/* Block at EVERY width, so the three spans break exactly where they are written:
   Interviews / with candidates / who aren't looking.
   Previously inline above 720px and block below, which meant the spans were inert
   on desktop and the headline wrapped wherever the text happened to run out of
   room — the markup said one thing and the page did another. Shortening the copy
   on 2026-08-29 exposed that: the same three spans started rendering as two lines
   at 900-1440px. Forcing the break makes the markup load-bearing at all widths.
   (text-wrap: balance above is now inert for this element — block children are
   balanced individually, and each is a single line — but it is left in place
   because it still applies to any h1 without .hl-line spans.) */
h1 .hl-line { display: block; }
.lede {
  max-width: 705px;
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.34rem);
  line-height: 1.6;
  color: #32342f;
}
.promise {
  margin: 25px 0 24px;
  color: var(--green);
  font-size: clamp(1.13rem, 1.38vw, 1.42rem);
  font-weight: 800;
}
.lead-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, auto);
  gap: 14px;
  max-width: 710px;
}
.lead-form input {
  min-width: 0;
  padding: 0 22px;
  height: 66px;
  border-radius: 10px;
  border: 1px solid #d5d1c8;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-size: 1.1rem;
  outline: none;
}
.lead-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(7,85,59,.09); }
.lead-form button {
  height: 66px;
  padding: 0 30px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  white-space: nowrap;
  min-width: 150px;
  box-shadow: 0 8px 18px rgba(7,85,59,.13);
}
.lead-form button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.trust-row {
  display: flex;
  align-items: stretch;
  margin-top: 30px;
  gap: 0;
  flex-wrap: nowrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  font-size: .95rem;
  line-height: 1.3;
}
.trust-item:first-child { padding-left: 0; border-left: 0; }
.trust-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--green);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.funnel-wrap { position: relative; min-height: 660px; display: grid; place-items: center; }
.rings {
  position: absolute;
  width: min(650px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .47;
  background-image: repeating-radial-gradient(circle at center, transparent 0 11px, rgba(7,85,59,.105) 12px 13px, transparent 14px 25px);
  mask-image: radial-gradient(circle, black 0 67%, transparent 76%);
}
.funnel { position: relative; z-index: 1; display: grid; justify-items: center; }
.metric-card {
  width: min(340px, 84vw);
  min-height: 104px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(210,207,198,.68);
  border-radius: 16px;
  background: rgba(255,255,255,.93);
  box-shadow: var(--shadow);
}
.metric-card strong { display: block; margin-bottom: 4px; color: var(--green); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metric-card span { font-size: 1rem; color: #1e201d; }
.metric-icon {
  width: 50px;
  height: 50px;
  color: var(--green);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.connector { width: 2px; height: 34px; background: var(--green); position: relative; }
.connector::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: var(--green);
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  color: #5c5e58;
  font-size: .94rem;
}
.site-footer a { color: var(--green); text-decoration: none; }
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  background: #14271f;
  color: white;
  padding: 12px 18px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Honeypot: off-screen rather than display:none, because some bots skip fields
   that are display:none but still fill ones that are merely positioned away. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-fineprint {
  /* Spans the input AND the button, so the sentence fits on one line on desktop.
     It needs ~523px at this size; the form is 710px at full width and stays wide
     enough down to about 1100px, below which it wraps to two lines on its own. */
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: .72rem;   /* ~11.5px */
  line-height: 1.45;
  color: #6c6e68;
  text-wrap: pretty;
}
.form-fineprint a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
}
.form-fineprint a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--green);
}
/* Only takes up room once it actually says something, so the gap above the
   trust row is not permanently padded by an empty status line. */
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #9a2c1c; }
.funnel-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: .8rem;
  color: #6c6e68;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Trust row: stacked below 1240px ----------
 * Above this the items size to their own content and the row fits the copy
 * column comfortably. Below it the row runs out of width: at 1101px the
 * content-sized row needs 556px against a 523px column, and by 800px an
 * icon-beside-label item leaves only ~70px for text while "Human-reviewed"
 * needs ~98px — which is what forced labels onto three lines.
 *
 * Stacking the icon above the label hands each label its full third, and the
 * fluid size keeps the longest one inside that third all the way to 721px.
 */
@media (max-width: 1240px) {
  .trust-row { width: 100%; flex-wrap: nowrap; margin-top: 24px; }
  .trust-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 2px 10px;
    gap: 8px;
    font-size: clamp(.68rem, 1.3vw, .92rem);
    line-height: 1.3;
    min-height: 62px;
  }
  .trust-item:first-child { padding-left: 10px; border-left: 0; }
  .trust-icon { width: 30px; height: 30px; flex-basis: 30px; }
}

@media (max-width: 1100px) {
  .page-shell { padding: 26px 36px 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(310px, .76fr); gap: 28px; min-height: 650px; }
  h1 { font-size: clamp(3.1rem, 5.8vw, 4.75rem); }
  .lede { font-size: 1rem; line-height: 1.55; }
  .lead-form {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-width: 100%;
  }
  .lead-form input, .lead-form button { height: 54px; }
  .lead-form button {
    min-width: 0;
    padding-left: 22px;
    padding-right: 22px;
    font-size: .98rem;
  }
  .metric-card { width: 292px; min-height: 88px; grid-template-columns: 46px 1fr; padding: 12px 15px; }
  .metric-icon { width: 40px; height: 40px; }
  .metric-card strong { font-size: 1.4rem; }
  .metric-card span { font-size: .84rem; }
  .connector { height: 25px; }
  .funnel-wrap { min-height: 525px; }
  .site-footer { font-size: .8rem; }
  .funnel-note { font-size: .78rem; margin-top: 18px; }
}


@media (max-width: 900px) and (min-width: 721px) {
  .brand img { height: 46px; }
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 20px;
  }
  .lead-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .lead-form input {
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1rem; /* keep >= 16px or iOS zooms the page on focus */
  }
  .lead-form button {
    padding-left: 16px;
    padding-right: 16px;
    font-size: .9rem;
  }
}

@media (max-width: 720px) {
  body { background: #f6f2eb; }
  .page-shell {
    width: min(100%, 540px);
    margin: 0 auto;
    min-height: auto;
    padding: 20px 20px 18px;
    border-radius: 0;
  }
  .brand img { height: 40px; }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    min-height: 0;
    padding: 16px 0 24px;
  }
  h1 { font-size: clamp(2.55rem, 11.7vw, 3.45rem); line-height: .99; margin-bottom: 20px; }
  /* The h1 .hl-line { display: block } that used to live here is GONE, not moved
     by accident: it is now the unconditional rule at the top of this file, so
     repeating it here would be a no-op that reads like a phone-only decision.
     The measurement it carried still holds — against Fraunces at this size the
     longest of the three lines is ~285px at a 390px viewport (350px of content),
     so there is room to spare down to 360px-wide devices. */
  .lede { font-size: .92rem; line-height: 1.52; }
  .promise { font-size: .98rem; margin: 17px 0; }
  .lead-form { grid-template-columns: 1fr; gap: 8px; }
  .lead-form input, .lead-form button { width: 100%; height: 47px; }
  .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; }
  .trust-item {
    min-height: 62px;
    padding: 4px 4px;
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
    /* Fluid so "Human-reviewed" (the longest label) always fits its third of the
       row: it needs ~8.2px of width per 1px of font-size, and the column is
       (100vw - 40px)/3 minus padding. Verified from 360px up. */
    font-size: clamp(.64rem, 3.2vw, .82rem);
    line-height: 1.25;
  }
  .trust-item:first-child { padding-left: 4px; border-left: 0; }
  .trust-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .funnel-wrap { min-height: 500px; margin: 0; }
  .rings { width: 440px; max-width: 128vw; opacity: .55; }
  .funnel { width: 100%; }
  .metric-card {
    width: min(100%, 320px);
    min-height: 60px;
    grid-template-columns: 28px 54px 1fr;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 10px;
  }
  .metric-card > div { display: contents; }
  .metric-icon { width: 27px; height: 27px; }
  .metric-card strong { font-size: 1.2rem; margin: 0; align-self: center; }
  .metric-card span { font-size: .72rem; align-self: center; }
  .connector { height: 19px; }
  .connector::before { width: 6px; height: 6px; }
  /* Honeypot: off-screen rather than display:none, because some bots skip fields
   that are display:none but still fill ones that are merely positioned away. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-fineprint { font-size: .7rem; margin-top: -2px; }
  .site-footer { gap: 6px 10px; font-size: .78rem; line-height: 1.5; padding-top: 17px; }
  .funnel-note { font-size: .76rem; margin-top: 44px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .metric-card { transition: transform .18s ease, box-shadow .18s ease; }
  .metric-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(22,37,28,.11); }
}

.notfound.thanks .thanks-mark {
  width: 54px;
  height: 54px;
  color: var(--green);
  display: block;
  margin-bottom: 22px;
}
.notfound.thanks h1 { max-width: 18ch; }
.notfound.thanks .lede { max-width: 46ch; }
.notfound.thanks .lede a { color: var(--green); }

@media (max-width: 720px) {
  .notfound.thanks .thanks-mark { width: 44px; height: 44px; margin-bottom: 16px; }
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal { max-width: 720px; padding: 40px 0 56px; }
.legal h1 {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-variation-settings: 'opsz' 96, 'wght' 400, 'WONK' 0;
  margin-bottom: 8px;
  letter-spacing: -.035em;
}
.legal .updated { margin: 0 0 34px; color: #6c6e68; font-size: .92rem; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  font-variation-settings: 'opsz' 40, 'wght' 400, 'WONK' 0;
  letter-spacing: -.02em;
  margin: 34px 0 10px;
}
.legal h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .01em;
  color: var(--green);
  margin: 26px 0 8px;
}
.legal p, .legal li { color: #32342f; line-height: 1.68; font-size: 1.02rem; }
.legal ul { padding-left: 20px; margin: 10px 0 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--green); }
.legal strong { font-weight: 600; color: var(--ink); }

/* The candidate summary. This is the block a cold-contacted candidate opens the
   page to find, so it is lifted out of the running text rather than buried. */
.legal .callout {
  margin: 30px 0 38px;
  padding: 26px 30px 22px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 10px;
}
.legal .callout-title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 400, 'WONK' 0;
  font-size: 1.4rem;
  margin: 0 0 10px;
}
.legal .callout p:last-child {
  margin-bottom: 0;
  font-size: .94rem;
  color: #5c5e58;
}

/* Anything still bracketed must not reach production unnoticed. */
mark.todo {
  background: #fff2b8;
  color: #6b4a00;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .legal { padding: 26px 0 40px; }
  .legal p, .legal li { font-size: .95rem; }
  .legal h2 { font-size: 1.18rem; margin-top: 26px; }
  .legal h3 { font-size: .9rem; margin-top: 20px; }
  .legal .callout { padding: 20px 20px 16px; margin: 24px 0 30px; }
  .legal .callout-title { font-size: 1.2rem; }
}


/* ---------- 404 ---------- */
.notfound {
  max-width: 640px;
  padding: 80px 0 120px;
}
.notfound .nf-code {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 400, 'WONK' 1;
  font-size: 4.6rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--green);
  opacity: .28;
  margin: 0 0 6px;
}
.notfound h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  margin: 0 0 16px;
  font-variation-settings: 'opsz' 96, 'wght' 400, 'WONK' 1;
}
.notfound .lede { max-width: 44ch; margin-bottom: 30px; }
.notfound .nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.notfound .nf-primary {
  display: inline-block;
  background: var(--green);
  color: #fbfaf6;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 500;
}
.notfound .nf-primary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.notfound .nf-or { color: #6c6e68; font-size: .95rem; }
.notfound .nf-or a { color: var(--green); }

@media (max-width: 720px) {
  .notfound { padding: 44px 0 72px; }
  .notfound .nf-code { font-size: 3.4rem; }
  .notfound .nf-actions { gap: 12px; }
}

/* ---------- Thank-you page: next step ---------- */
.notfound.thanks .next-step {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 400, 'WONK' 0;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 32ch;
}
.notfound.thanks .lede { margin-bottom: 14px; }
.notfound.thanks .lede.muted { color: #6c6e68; font-size: .96rem; }
.notfound.thanks .nf-actions { margin-bottom: 22px; }

/* ---------- Hiring brief ---------- */
.brief { max-width: 760px; padding: 30px 0 56px; }
.brief h1 {
  font-size: clamp(2.2rem, 3.2vw, 2.9rem);
  font-variation-settings: 'opsz' 96, 'wght' 400, 'WONK' 0;
  margin-bottom: 10px;
}
/* The intro is short enough (~454px) to hold one line in the 760px column on its
   own; nowrap would force it to overflow on phones instead of wrapping. */
/* Useful, not important — the field labels already say which are required. */
.brief .lede { max-width: none; margin-bottom: 30px; font-size: .96rem; color: #6c6e68; }

.brief-form .field { margin-bottom: 22px; }
.brief-form label {
  display: block;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.brief-form .req { color: var(--green); margin-left: 1px; }
.brief-form .opt {
  font-weight: 400;
  font-size: .82rem;
  color: #8a8c85;
  margin-left: 6px;
}
.brief-form input[type="text"],
.brief-form input[type="email"],
.brief-form input[type="url"],
.brief-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d5d1c8;
  border-radius: 9px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;   /* >= 16px, or iOS zooms the page on focus */
  line-height: 1.5;
}
.brief-form textarea { resize: vertical; min-height: 150px; }
.brief-form input::placeholder,
.brief-form textarea::placeholder { color: #a9a79e; }
.brief-form input:focus-visible,
.brief-form textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
.brief-form .hint { margin: 9px 0 0; font-size: .84rem; color: #6c6e68; }

/* Toggle. A real checkbox with role="switch" underneath, so it is keyboard
   operable and announced correctly; the track and thumb are decoration. */
.brief-form .toggle-field { margin-bottom: 24px; }
.brief-form .switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 400;
}
.brief-form .switch input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.brief-form .switch-track {
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #d9d5cc;
  position: relative;
  transition: background .18s ease;
}
.brief-form .switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 37, 28, .28);
  transition: transform .18s ease;
}
.brief-form .switch input:checked + .switch-track { background: var(--green); }
.brief-form .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.brief-form .switch input:focus-visible + .switch-track {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.brief-form .switch-label { font-size: .98rem; color: var(--ink); }

/* File input: the native control is unstylable and looks foreign, so it is
   hidden behind a label that triggers it. */
.brief-form .file-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brief-form input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.brief-form .file-btn {
  display: inline-block;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
}
.brief-form input[type="file"]:focus-visible + .file-name,
.brief-form input[type="file"]:focus-visible ~ .file-btn { outline: 2px solid var(--green); }
.brief-form .file-name { font-size: .9rem; color: #8a8c85; }
.brief-form .file-name[data-has-file] { color: var(--ink); }

.brief-form .submit-row { margin-top: 30px; margin-bottom: 14px; }
.brief-form button[type="submit"] {
  padding: 16px 36px;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: #faf9f6;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.brief-form button[type="submit"]:disabled { opacity: .6; cursor: default; }
.brief-form button[type="submit"]:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.brief-form .form-status { margin: 12px 0 0; }
.brief-form .form-fineprint { grid-column: auto; margin: 0; }

@media (max-width: 720px) {
  .brief { padding: 26px 0 44px; }
  .brief .lede { margin-bottom: 26px; }
  .brief-form button[type="submit"] { width: 100%; }
  .notfound.thanks .next-step { font-size: 1.18rem; }
}


/* Two short fields per row on wider screens: the brief is a single screen of work,
   and four stacked one-line inputs push the submit button below the fold. */
.brief-form .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.brief-form .file-hint { font-size: .82rem; color: #6c6e68; }

@media (max-width: 620px) {
  .brief-form .pair { grid-template-columns: 1fr; gap: 0; }
}


/* ---------- Utility pages on large screens ----------
 * The homepage fills the 1536px shell with a two-column hero, so it reads as
 * centred. The brief and the confirmation pages are a single narrow column, and
 * left-aligning that inside a 1536px shell leaves a void to the right — on a
 * 2560px display the content sits well left of centre.
 *
 * These pages get their own narrower shell instead, so the logo, the content and
 * the footer all sit in one centred column rather than the content drifting away
 * from a header pinned to the far left.
 */
.page-shell--narrow { width: min(880px, 100%); }
.page-shell--narrow .brief,
.page-shell--narrow .notfound,
.page-shell--narrow .legal { max-width: 100%; }

/* Content stays top-aligned; the FOOTER is what moves. The narrow shells are flex
   columns at least 100vh tall with the main growing, so the footer sits at the
   bottom of short pages instead of floating halfway up with dead space beneath it.
   Vertically centring the content instead makes a short page look dragged to the
   middle.

   Scoped to --narrow deliberately. The homepage hero has its own min-height and
   `align-items: center`; letting its main grow to fill the viewport makes the hero
   centre itself in that taller box and opens large gaps above and below. */
.page-shell--narrow { display: flex; flex-direction: column; }
.page-shell--narrow > main { flex: 1 0 auto; }
.page-shell--narrow > .site-footer { margin-top: auto; }


/* ---------- Thank-you page hierarchy ----------
 * The confirmation is not the message; the next step is. "Thanks — we've got it"
 * drops to an eyebrow above the headline, and the brief becomes the H1.
 */
.notfound.thanks .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--green);
}
.notfound.thanks .thanks-tick { width: 26px; height: 26px; flex: 0 0 26px; color: var(--green); }
.notfound.thanks h1 { max-width: 20ch; margin-bottom: 26px; }
.notfound.thanks .nf-actions { margin-bottom: 26px; }
.notfound.thanks .lede { max-width: none; color: #4a4f4b; margin-bottom: 12px; }
/* The sentence that says what happens next matters more than the housekeeping
   note about the emailed link, so it leads and carries more weight. */
/* Two lines, same order, closer in size — the hierarchy is carried by colour and
   weight rather than a big jump in scale. No max-width, so neither wraps before
   it has used the column. */
.notfound.thanks .lede--strong {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
  margin-bottom: 12px;
}
.notfound.thanks .lede.muted {
  font-size: 1.02rem;
  color: #6c6e68;
  max-width: none;
  margin-bottom: 0;
}
.notfound.thanks .nf-actions { margin-bottom: 34px; }

/* Matches the homepage CTA, including its hover lift. */
.nf-primary--lg {
  padding: 23px 46px;
  font-size: 1.26rem;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(20, 80, 58, .18);
}



/* ---------- Brief received ---------- */
.notfound.confirm .thanks-mark { width: 50px; height: 50px; color: var(--green); display: block; margin-bottom: 24px; }
.notfound.confirm h1 { max-width: 22ch; margin-bottom: 20px; }
.notfound.confirm .lede {
  max-width: none;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
}
.notfound.confirm .lede.muted {
  max-width: none;
  font-size: 1.02rem;
  color: #6c6e68;
  margin-bottom: 30px;
}
.notfound.confirm .lede a { color: var(--green); }


/* ---------- Every solid green button behaves the same ----------
 * One definition rather than four near-identical ones, so a change to the CTA
 * cannot silently leave the other buttons behind. Scoped to `hover: hover`
 * because a lift on a touch device sticks after the tap.
 */
.lead-form button,
.brief-form button[type="submit"],
.notfound .nf-primary {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .lead-form button:hover,
  .brief-form button[type="submit"]:hover,
  .notfound .nf-primary:hover {
    filter: brightness(.98);
    transform: translateY(-1px);
  }
  .brief-form .file-btn:hover { background: rgba(20, 80, 58, .06); }
}
/* Pressed state, on touch as well as pointer. */
.lead-form button:active,
.brief-form button[type="submit"]:active,
.notfound .nf-primary:active {
  transform: translateY(0);
  filter: brightness(.96);
}
@media (prefers-reduced-motion: reduce) {
  .lead-form button,
  .brief-form button[type="submit"],
  .notfound .nf-primary { transition: none; }
  .lead-form button:hover,
  .brief-form button[type="submit"]:hover,
  .notfound .nf-primary:hover { transform: none; }
}