/* Inland NW AI brand tokens and shared primitives.
   Values come from the inwai-brand standard — don't substitute. */

:root {
  --rust:     #C85A17;
  --rust-dk:  #A34712;
  --rust-lt:  #fdf0e8;
  --brown:    #6B4423;
  --teal:     #2C8C8C;
  --teal-lt:  #3aadad;
  --teal-dk:  #1f6666;
  --teal-bg:  #e0f3f3;
  --cream:    #F5F1EB;
  --cream-dk: #EDE7DC;
  --dark:     #1a1410;
  --muted:    #7a6a5a;
  --border:   #e2d9ce;
  --white:    #ffffff;

  --ok:    #2f7d4f;
  --warn:  #b8860b;
  --alert: #b3261e;

  --radius:    16px;
  --radius-sm: 10px;
  --shell:     1040px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: var(--dark);
  background-color: var(--cream);
  /* Brand dot grid. */
  background-image: radial-gradient(circle, rgba(44,140,140,.1) 1px, transparent 1px);
  background-size: 36px 36px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.1rem; }

/* --- Site header ---------------------------------------------------------- */
.site-head {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
}
.site-head .shell {
  display: flex; align-items: center; gap: .7rem;
  min-height: 60px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--dark); }
.brand img { width: 32px; height: 32px; display: block; }
.brand b { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.brand span { display: block; font-size: .7rem; color: var(--muted); font-weight: 500; line-height: 1.3; }
.head-spacer { flex: 1 1 auto; }

/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--rust); margin-bottom: .7rem;
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--rust); flex: none; }

/* --- Type ----------------------------------------------------------------- */
h1 { font-weight: 900; letter-spacing: -.04em; line-height: 1.08; font-size: clamp(1.85rem, 6.2vw, 3.1rem); }
h2 { font-weight: 900; letter-spacing: -.025em; line-height: 1.15; font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-weight: 700; letter-spacing: -.015em; font-size: 1.02rem; }
p  { color: var(--muted); font-weight: 400; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem;
  border-top: 3px solid var(--teal);
}
.card.accent { border-top-color: var(--rust); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.9rem; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, transform .15s;
}
.btn-primary { background: var(--rust); color: var(--white); }
.btn-primary:hover { background: var(--rust-dk); }
.btn-secondary { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); font-weight: 600; padding: calc(.9rem - 1.5px) calc(1.75rem - 1.5px); }
.btn-secondary:hover { background: var(--teal); color: var(--white); }
.btn:disabled { opacity: .55; cursor: progress; }

/* --- Forms ---------------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }
.field > label, .legend {
  display: block; font-size: .83rem; font-weight: 700;
  color: var(--dark); margin-bottom: .4rem; letter-spacing: -.005em;
}
.hint { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }
.req { color: var(--rust); font-weight: 800; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select {
  width: 100%; padding: .72rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--dark);
  font-family: inherit;
  /* 16px minimum keeps iOS Safari from zooming on focus. */
  font-size: 16px; line-height: 1.45;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
textarea { min-height: 84px; resize: vertical; }

/* Radio cards — big tap targets, which is most of what this form needs. */
fieldset { border: none; }
.choice {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem .9rem; margin-bottom: .55rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); cursor: pointer;
}
.choice:hover { border-color: var(--teal-lt); }
.choice input { margin-top: .28rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--rust); }
.choice-body { font-size: .92rem; font-weight: 500; }
.choice-body .sub { display: block; font-size: .79rem; color: var(--muted); font-weight: 400; }
.choice:has(input:checked) { border-color: var(--rust); background: var(--rust-lt); }
.choice:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 1px; }

/* Segmented to/home/both */
.segmented { display: flex; gap: .45rem; flex-wrap: wrap; }
.segmented label {
  flex: 1 1 5.5rem; text-align: center; cursor: pointer;
  padding: .62rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); font-size: .9rem; font-weight: 600;
}
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label:has(input:checked) { background: var(--teal); color: var(--white); border-color: var(--teal); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 1px; }

/* --- Messages ------------------------------------------------------------- */
.msg { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; }
.msg-error { background: #fdecea; color: #8c1d16; border: 1px solid #f3c7c3; }
.msg-ok    { background: var(--teal-bg); color: var(--teal-dk); border: 1px solid #b9e0e0; }
.hidden { display: none !important; }

/* --- Footer --------------------------------------------------------------- */
.site-foot {
  background: var(--dark); color: var(--cream);
  margin-top: 3.5rem; padding: 2.2rem 0;
  font-size: .87rem;
}
.site-foot a { color: var(--teal-lt); }

/* The only Inland NW AI branding on the public page, deliberately at the very
   bottom: whoever is curious enough to scroll this far will find it. */
.foot-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.7rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(245,241,235,.14);
  color: #9b8b7b; font-size: .84rem; text-decoration: none;
}
.foot-brand img { width: 26px; height: 26px; display: block; opacity: .9; }
.foot-brand b { font-weight: 800; color: var(--cream); }
.foot-brand:hover { color: var(--cream); }
.foot-brand:hover img { opacity: 1; }

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