/*
  Jacobsen Capital public site: every style, including print.
  Mobile first. Breakpoints: 380, 480, 560, 760, 900, 960.
  No inline styles anywhere; visibility changes use classes and the hidden attribute.
*/

:root {
  color-scheme: light;
  --jc-bg: #FBF8F3;
  --jc-surface: #F3EDE3;
  --jc-text: #1D1B18;
  --jc-muted: #6B6358;
  --jc-accent: #B8082C;
  --jc-accent-strong: #8E0622;
  --jc-navy: #001C58;
  --jc-on-accent: #FBF8F3;
  --jc-hairline: #E2DACD;
  --jc-hairline-strong: #C9BFAF;
  --jc-input-bg: #FFFFFF;
  --jc-input-border: #857A6B;
  --jc-error: #9B1C1C;
  --jc-error-fill: #FBEDEA;
  --jc-success: #1F6B3A;
  --jc-success-fill: #EAF3EC;
  --jc-focus: #001C58;
  --jc-font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Charter, Georgia, serif;
  --jc-font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--jc-bg);
}

body {
  margin: 0;
  background: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--jc-font-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--jc-text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

p { margin: 0 0 16px; max-width: 66ch; }

ul, ol { margin: 0 0 16px; }

a {
  color: var(--jc-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--jc-accent-strong);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--jc-focus);
  outline-offset: 3px;
}

main:focus { outline: none; }

strong { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .header-cta, .menu-btn, .link-btn {
    transition: color 150ms, background-color 150ms, text-decoration-thickness 150ms;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anything that needs JS stays out of the page until site.js marks html.js */
html:not(.js) .js-only { display: none !important; }

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--jc-surface);
  color: var(--jc-text);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  left: 8px;
  outline: 2px solid var(--jc-focus);
  outline-offset: 3px;
}

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

.container {
  width: 100%;
  max-width: 1168px;
  margin: 0 auto;
  padding: 0 16px;
}

.section {
  border-top: 1px solid var(--jc-hairline);
  padding: 64px 0;
}

.section > .container > h2 { margin-bottom: 24px; }

.eyebrow,
.marker {
  font-family: var(--jc-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jc-muted);
}

.marker { margin: 0 0 16px; }

.lead {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 60ch;
}

.small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.intro { margin-bottom: 32px; }

.more { margin: 32px 0 0; }

/* ---------- Wordmark and lockup ---------- */

.wm {
  font-family: var(--jc-font-serif);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  color: var(--jc-text);
}

.wm-a {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wm-b {
  font-style: italic;
  font-weight: 400;
  color: var(--jc-accent);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--jc-text);
  text-decoration: none;
}

.lockup:hover { color: var(--jc-text); }

.mark {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  min-height: 48px;
  border: 1.5px solid var(--jc-accent);
  border-radius: 2px;
  font-family: var(--jc-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  background: var(--jc-accent);
  color: var(--jc-on-accent);
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--jc-accent-strong);
  border-color: var(--jc-accent-strong);
  color: var(--jc-on-accent);
}

.btn-primary:disabled {
  cursor: progress;
  background: var(--jc-accent-strong);
  border-color: var(--jc-accent-strong);
}

/* Stand-alone text links get a 44px tap target */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jc-accent);
  font-family: var(--jc-font-sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--jc-accent-strong);
  text-decoration-thickness: 2px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--jc-bg);
  border-bottom: 1px solid var(--jc-hairline);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  min-height: 64px;
}

.header-inner .lockup { margin-right: auto; }

.nav {
  order: 3;
  flex-basis: 100%;
}

html.js .nav { display: none; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jc-text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

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

.nav-list a[aria-current="page"],
.menu-panel a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--jc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--jc-accent);
  border-radius: 2px;
  background: var(--jc-accent);
  color: var(--jc-on-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* Extends the 40px button to a 44px tap target without changing its look */
.header-cta::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  bottom: -3px;
  left: 0;
}

.header-cta:hover,
.header-cta:active {
  background: var(--jc-accent-strong);
  border-color: var(--jc-accent-strong);
  color: var(--jc-on-accent);
}

.cta-short { display: none; }

.menu-btn { display: none; }

html.js .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

html.js .menu-btn:hover { color: var(--jc-accent); }

.menu-panel {
  display: none;
  background: var(--jc-surface);
  border-top: 1px solid var(--jc-hairline);
}

html.js .menu-panel.is-open { display: block; }

.menu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-panel li + li { border-top: 1px solid var(--jc-hairline); }

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--jc-text);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.menu-panel a:hover { color: var(--jc-accent); }

@media (max-width: 479.98px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* Below 360px (320px phones, zoomed text) the row is tightened so the lockup,
   Inquire and Menu stay on one line. The lockup stays above its 150px minimum. */
@media (max-width: 359.98px) {
  .header-inner { column-gap: 6px; }
  .header-inner .lockup { gap: 6px; }
  .header-inner .wm { font-size: 18px; }
  .header-cta { padding: 0 8px; }
}

/* ---------- Hero (home) ---------- */

.hero { padding: 48px 0 64px; }

.hero .eyebrow { margin: 0 0 20px; }

.hero h1 {
  font-size: clamp(2.5rem, 4.2vw + 1rem, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 24px;
}

.hero .lead { margin-bottom: 32px; }

.hero-card { margin-top: 48px; }

/* ---------- Term-sheet card and leader statements ---------- */

.term-card,
.stmt-card {
  background: var(--jc-surface);
  border: 1px solid var(--jc-hairline);
  border-radius: 2px;
  padding: 20px;
}

.card-title {
  margin: 0 0 16px;
  max-width: none;
  font-family: var(--jc-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.leaders { margin: 0; }

.leaders .row {
  display: flex;
  align-items: baseline;
  padding: 10px 0;
}

.leaders dt {
  display: flex;
  align-items: baseline;
  flex: 1 0 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--jc-muted);
}

/* The leader is a CSS border only, never literal dots */
.leaders .leader {
  flex: 1 1 auto;
  min-width: 16px;
  margin: 0 8px 0.35em;
  border-bottom: 1px dotted var(--jc-hairline-strong);
}

.leaders dd {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  color: var(--jc-text);
  font-variant-numeric: tabular-nums;
}

/* Worked statement and estimator: long labels wrap, figures never do */
.stmt .row dt { flex: 1 1 auto; }

.stmt .row dd {
  flex: 0 0 auto;
  font-weight: 500;
  white-space: nowrap;
}

.stmt .row.total {
  margin-top: 4px;
  border-top: 1px solid var(--jc-text);
}

.stmt .row.total dt { color: var(--jc-text); font-weight: 600; }

.stmt .row.total dd { font-weight: 600; }

.card-foot {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jc-muted);
}

@media (max-width: 379.98px) {
  .leaders .row { flex-wrap: wrap; }
  .leaders .leader { display: none; }
  .leaders dt,
  .stmt .row dt { flex: 0 0 100%; }
  .leaders dd,
  .stmt .row dd { flex: 0 0 100%; white-space: normal; }
}

/* ---------- Full term sheet ---------- */

.terms {
  margin: 0;
  border-top: 1px dotted var(--jc-hairline-strong);
  font-variant-numeric: tabular-nums;
}

.terms .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--jc-hairline-strong);
}

.terms dt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--jc-muted);
}

.terms dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--jc-text);
}

.caption {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

@media (min-width: 560px) {
  .terms .row {
    grid-template-columns: 38% minmax(0, 1fr);
    column-gap: 16px;
  }
}

/* ---------- Math aside ---------- */

.math-aside {
  max-width: 420px;
  margin-top: 48px;
  padding-left: 24px;
  border-left: 3px solid var(--jc-accent);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  break-inside: avoid;
}

.math-aside .aside-title { margin: 0 0 12px; }

.math-aside p { margin: 0 0 12px; }

.total-group { break-inside: avoid; }

.math-aside .total-line {
  margin: 0;
  font-weight: 600;
}

.math-aside .example-label {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

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

.fit {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.fit h3 { margin-bottom: 12px; }

.fit ul,
.plain-list,
.checklist {
  margin: 0;
  padding-left: 1.25em;
}

.fit li,
.plain-list li,
.checklist li { margin-bottom: 8px; max-width: 60ch; }

.fit li::marker,
.plain-list li::marker,
.checklist li::marker { color: var(--jc-muted); }

.checklist li { break-inside: avoid; }

/* ---------- Home: process summary and principles ---------- */

.mini-steps {
  display: grid;
  gap: 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.mini-steps .step-no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--jc-font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--jc-accent);
  font-variant-numeric: tabular-nums;
}

.mini-steps h3,
.principles h3 { margin-bottom: 8px; }

.mini-steps p,
.principles p { margin: 0; }

.principles {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

/* ---------- Inquiry band ---------- */

.band {
  background: var(--jc-surface);
  border-top: 1px solid var(--jc-hairline);
  padding: 48px 0;
}

.band h2 { margin-bottom: 16px; }

.band p { max-width: 56ch; margin-bottom: 24px; }

.band .small { margin: 12px 0 0; }

/* ---------- Interior page header ---------- */

.page-head { padding: 48px 0 56px; }

.page-head .eyebrow { margin: 0 0 16px; }

.page-head h1 { margin-bottom: 20px; }

.page-head .lead { margin-bottom: 0; }

/* ---------- Lending ---------- */

.print-row { margin: 16px 0 0; }

.stmt-card {
  max-width: 640px;
  margin-top: 32px;
}

.stmt-label {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.estimator {
  max-width: 640px;
  margin-top: 48px;
  padding: 20px;
  background: var(--jc-surface);
  border: 1px solid var(--jc-hairline);
  border-radius: 2px;
}

.est-grid {
  display: grid;
  gap: 20px;
  margin: 20px 0 24px;
}

.est-out { font-variant-numeric: tabular-nums; }

.est-invalid {
  margin: 0;
  padding: 10px 0;
  font-size: 16px;
  color: var(--jc-muted);
}

.est-label {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

@media (min-width: 560px) {
  .est-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Process timeline ---------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 56px;
}

.steps > li:last-child { padding-bottom: 0; }

/* Connecting rule, centred in the 48px marker column, from below one marker to the next */
.steps > li::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 8px;
  left: 23.25px;
  width: 1.5px;
  background: var(--jc-hairline-strong);
}

.steps > li:last-child::before { display: none; }

.step-marker {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

.step-marker svg {
  display: block;
  width: 32px;
  height: 32px;
}

.step-marker .step-num {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--jc-accent);
  font-variant-numeric: tabular-nums;
}

.step-body { padding-top: 2px; min-width: 0; }

.step-body h3 { margin-bottom: 8px; }

.step-body .step-lead { margin-bottom: 0; }

.exchange {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
}

.exchange > div {
  padding-top: 12px;
  border-top: 1px solid var(--jc-hairline);
}

.exchange dt { margin-bottom: 4px; }

.exchange dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* What slows a deal down */
.slow {
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.slow li {
  max-width: 66ch;
  padding: 16px 0;
  border-top: 1px solid var(--jc-hairline);
}

.slow li:last-child { border-bottom: 1px solid var(--jc-hairline); }

.subhead { margin-bottom: 16px; }

/* FAQ, a plain definition list, no accordion */
.faq {
  max-width: 66ch;
  margin: 0;
}

.faq dt {
  padding-top: 20px;
  border-top: 1px solid var(--jc-hairline);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.faq dd { margin: 4px 0 24px; }

/* ---------- About ---------- */

.pairs {
  max-width: 66ch;
  margin: 32px 0 0;
}

.pairs dt {
  font-family: var(--jc-font-serif);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.pairs dd { margin: 4px 0 24px; }

.pull-block {
  padding: 56px 0;
  border-top: 1px solid var(--jc-hairline);
  text-align: center;
}

.pull {
  max-width: 28ch;
  margin: 0 auto;
  font-family: var(--jc-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

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

.contact-layout {
  display: grid;
  gap: 48px;
}

.form-col,
.side-col { min-width: 0; }

.form fieldset {
  min-width: 0;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}

.form legend {
  margin-bottom: 20px;
  padding: 0;
  font-family: var(--jc-font-serif);
  font-optical-sizing: auto;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

.fields {
  display: grid;
  gap: 24px;
}

.field { min-width: 0; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.req {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--jc-muted);
}

.hint {
  margin: -2px 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  background: var(--jc-input-bg);
  border: 1px solid var(--jc-input-border);
  border-radius: 2px;
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: 17px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

select.input { padding: 0 10px; }

textarea.input {
  height: auto;
  min-height: 140px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.input::placeholder { color: var(--jc-muted); opacity: 1; }

.input:focus-visible,
.input:focus {
  outline: 2px solid var(--jc-focus);
  outline-offset: 3px;
}

/* 2px error border: a 1px inset shadow inside the 1px border, so nothing shifts */
.input[aria-invalid="true"] {
  border-color: var(--jc-error);
  box-shadow: inset 0 0 0 1px var(--jc-error);
}

.affix {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.affix .input { flex: 1 1 auto; }

.affix-text {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 12px;
  background: var(--jc-surface);
  border: 1px solid var(--jc-input-border);
  color: var(--jc-muted);
  font-size: 17px;
}

.affix-pre {
  border-right: 0;
  border-radius: 2px 0 0 2px;
}

.affix-pre + .input { border-radius: 0 2px 2px 0; }

.affix-suf {
  border-left: 0;
  border-radius: 0 2px 2px 0;
}

.affix .input:not(:last-child) { border-radius: 2px 0 0 2px; }

.estimator .affix-text { background: var(--jc-bg); }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--jc-error);
}

.icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.icon-lg {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

/* Honeypot: off-screen by class, never visible */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  max-width: 66ch;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
}

.alert {
  margin: 0 0 32px;
  padding: 20px 20px 20px 24px;
  background: var(--jc-error-fill);
  border-left: 3px solid var(--jc-error);
  color: var(--jc-text);
}

.alert:focus { outline: 2px solid var(--jc-focus); outline-offset: 3px; }

.alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  max-width: none;
  font-family: var(--jc-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--jc-error);
}

.alert ul { margin: 0; padding-left: 1.25em; }

.alert li { margin-bottom: 4px; }

.alert a { color: var(--jc-error); }

.alert-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--jc-error);
}

.alert-row p { margin: 0; color: var(--jc-text); }

.success {
  padding: 24px;
  background: var(--jc-success-fill);
  border-left: 3px solid var(--jc-success);
}

.success-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  max-width: none;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--jc-text);
}

.success-head .icon-lg { color: var(--jc-success); }

.success-head:focus { outline: 2px solid var(--jc-focus); outline-offset: 3px; }

.success p { margin: 0 0 12px; }

.privacy-note {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.side-col h2 {
  margin-bottom: 16px;
  font-size: 1.625rem;
}

.next-list {
  margin: 0 0 24px;
  padding-left: 1.25em;
}

.next-list li { margin-bottom: 8px; }

.next-list li::marker {
  color: var(--jc-accent);
  font-weight: 600;
}

.side-col p { font-size: 16px; }

/* ---------- Privacy ---------- */

.legal { padding: 48px 0 64px; }

.legal h1 { margin-bottom: 12px; }

.legal .date { margin-bottom: 40px; }

.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.625rem;
}

/* ---------- 404 ---------- */

.nf {
  padding: 64px 0 80px;
  text-align: center;
}

.stack-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stack-lockup .mark {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.stack-lockup .wm {
  font-size: 40px;
  white-space: normal;
}

.stack-lockup .eyebrow { margin: 12px 0 0; }

.nf h1 { margin: 48px auto 16px; }

.nf p { margin-left: auto; margin-right: auto; }

.nf-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

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

.site-footer {
  padding: 48px 0 32px;
  background: var(--jc-surface);
  border-top: 1px solid var(--jc-hairline);
}

.footer-top {
  display: grid;
  gap: 32px;
}

.site-footer .lockup { gap: 10px; }

.site-footer .mark { width: 28px; height: 28px; }

.site-footer .wm { font-size: 22px; }

.footer-brand p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.footer-nav ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jc-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--jc-accent);
  text-decoration-line: underline;
}

.disclaimer {
  max-width: 90ch;
  margin: 32px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--jc-hairline);
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

.copyright {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jc-muted);
}

/* ---------- 760px and up ---------- */

@media (min-width: 760px) {
  body { font-size: 18px; }

  .container { padding: 0 24px; }

  .section { padding: 112px 0; }

  .lead { font-size: 1.25rem; }

  .btn-primary { width: auto; }

  .header-inner {
    flex-wrap: nowrap;
    column-gap: 32px;
    min-height: 80px;
  }

  .header-inner .lockup { gap: 10px; }

  .header-inner .mark { width: 28px; height: 28px; }

  .header-inner .wm { font-size: 22px; }

  .nav,
  html.js .nav {
    display: block;
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }

  .nav-list {
    flex-wrap: nowrap;
    column-gap: 32px;
    padding: 0;
  }

  .header-cta {
    min-height: 44px;
    padding: 10px 18px;
    background: transparent;
    color: var(--jc-accent);
  }

  .header-cta::after { display: none; }

  .header-cta:hover,
  .header-cta:active {
    background: var(--jc-accent);
    border-color: var(--jc-accent);
    color: var(--jc-on-accent);
  }

  html.js .menu-btn,
  html.js .menu-panel,
  html.js .menu-panel.is-open { display: none; }

  .hero { padding: 88px 0 112px; }

  .term-card,
  .stmt-card,
  .estimator { padding: 28px; }

  .fit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .mini-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px 24px;
  }

  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .checklist {
    columns: 2;
    column-gap: 48px;
  }

  .band { padding: 72px 0; }

  .page-head { padding: 88px 0 96px; }

  .exchange {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--jc-hairline);
  }

  .exchange > div {
    padding-top: 0;
    border-top: 0;
  }

  .pull-block { padding: 72px 0; }

  .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .field-wide { grid-column: 1 / -1; }

  .legal { padding: 88px 0 112px; }

  .nf { padding: 96px 0 112px; }

  .nf-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }

  .site-footer { padding: 72px 0 40px; }

  .footer-top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }

  .footer-brand { grid-column: 1 / span 5; }

  .footer-nav { grid-column: 7 / span 6; }

  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
  }
}

/* ---------- 900px and up: contact form beside the side column ---------- */

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  .form-col { grid-column: 1 / span 8; }

  .side-col { grid-column: 9 / span 4; }
}

/* ---------- 960px and up: hero and terms side by side ---------- */

@media (min-width: 960px) {
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  .hero-copy { grid-column: 1 / span 7; }

  .hero-card {
    grid-column: 8 / span 5;
    margin-top: 0;
  }

  .terms-main { grid-column: 1 / span 7; }

  .math-aside {
    grid-column: 8 / span 5;
    justify-self: end;
    width: 100%;
    margin-top: 0;
  }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 14mm 14mm 12mm; }

  html,
  body {
    background: #FFFFFF;
    color: #000000;
  }

  body { font-size: 10.5pt; line-height: 1.4; }

  *,
  *::before,
  *::after { box-shadow: none !important; }

  .skip,
  .nav,
  .header-cta,
  .menu-btn,
  .menu-panel,
  .band,
  .estimator,
  .print-row,
  .footer-nav,
  .btn,
  .text-link,
  .more,
  .no-print { display: none !important; }

  a,
  a:hover {
    color: #000000;
    text-decoration: none;
  }

  .site-header { border-bottom: 1px solid #000000; }

  .header-inner { min-height: 0; padding: 0 0 8px; }

  .wm-b { color: #000000; }

  .container { max-width: none; padding: 0; }

  .section,
  .page-head,
  .hero { padding: 14pt 0 0; border-top: 0; }

  h1 { font-size: 22pt; }

  h2 { font-size: 15pt; max-width: none; }

  .section > .container > h2 { margin-bottom: 6pt; }

  .page-head h1 { margin-bottom: 6pt; }

  .lead { font-size: 11pt; }

  .marker { margin-bottom: 4pt; }

  .eyebrow,
  .marker,
  .small,
  .caption,
  .card-foot,
  .stmt-label,
  .example-label,
  .disclaimer,
  .copyright,
  .terms dt,
  .leaders dt { color: #000000; }

  .terms .row { padding: 5pt 0; break-inside: avoid; }

  .terms dt,
  .terms dd { font-size: 10.5pt; }

  .term-card,
  .stmt-card {
    background: #FFFFFF;
    border: 1px solid #000000;
    padding: 10pt;
    break-inside: avoid;
  }

  .stmt-card { margin-top: 10pt; }

  .leaders .row { padding: 3pt 0; }

  .leaders .leader { border-bottom-color: #000000; }

  .math-aside { border-left-color: #000000; break-inside: avoid; }

  .site-footer {
    background: #FFFFFF;
    border-top: 1px solid #000000;
    padding: 10pt 0 0;
  }

  .footer-brand p { color: #000000; }

  .disclaimer {
    margin-top: 6pt;
    padding-bottom: 6pt;
    font-size: 8.5pt;
    border-bottom-color: #000000;
  }

  .copyright { margin-top: 6pt; font-size: 8.5pt; }
}

/* Lending page: keep the full term sheet at a readable width */
.terms-wrap { max-width: 760px; }

.legal-body { max-width: 66ch; }

.legal-body h2 { max-width: none; }

/* Print, compact pass: lending.html prints as a one-page term sheet */
@media print {
  @page { margin: 12mm 14mm 10mm; }

  .page-head .eyebrow,
  .page-head .lead { display: none !important; }

  .section,
  .page-head,
  .hero { padding-top: 10pt; }

  .page-head h1 { font-size: 20pt; margin-bottom: 0; }

  h2,
  .section > .container > h2 { font-size: 13pt; margin-bottom: 4pt; }

  .marker { font-size: 7.5pt; margin-bottom: 2pt; }

  p { margin-bottom: 6pt; }

  .terms .row { padding: 3pt 0; }

  .terms dt,
  .terms dd { font-size: 9.5pt; line-height: 1.3; }

  .caption,
  .card-foot,
  .stmt-label,
  .example-label { margin-top: 4pt; font-size: 8.5pt; }

  .stmt-card { margin-top: 6pt; padding: 6pt 10pt; }

  .card-title { font-size: 11pt; margin-bottom: 2pt; }

  .leaders .row { padding: 2pt 0; }

  .leaders dt,
  .leaders dd { font-size: 9.5pt; }

  .site-footer { margin-top: 12pt; padding-top: 8pt; }

  .site-footer .mark { width: 20px; height: 20px; }

  .site-footer .wm { font-size: 15px; }

  .footer-brand p { margin-top: 2pt; font-size: 8.5pt; }

  .footer-top { gap: 0; }

  .site-header { background: #FFFFFF; }

  .site-footer .lockup { display: none; }

  .footer-brand p { margin-top: 0; }

  .disclaimer { max-width: none; }

  .section .container > p:not([class]) { font-size: 9.5pt; }
}

/* ---------- Brand crest (tools/make_brand.py) ---------- */

h1, h2, h3 { color: var(--jc-navy); }

.lockup-img {
  display: block;
  flex: none;
  width: auto;
  height: 44px;
}

.site-footer .lockup-img { height: 56px; }

.stack-img {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 auto 16px;
}

@media (min-width: 720px) {
  .header-inner .lockup-img { height: 48px; }
}

@media print {
  h1, h2, h3 { color: #000000; }
}

/* ---------- Family office: hero door, inquiry topic, contact side column ---------- */

.hero-door {
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--jc-hairline);
  max-width: 46ch;
  font-size: 16px;
  color: var(--jc-muted);
}

.hero-door strong {
  color: var(--jc-text);
  font-weight: 600;
}

/* Topic choice: stacked on phones, a wrapped row from 560px. The labels sit
   outside .field, so the block label rule never reaches them. */
.form .topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px 24px;
}

.topic-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--jc-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.topic-option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--jc-accent);
  cursor: pointer;
}

@media (min-width: 560px) {
  .form .topic {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

html.js .nojs-only { display: none; }

/* Notes sit between the loan fieldset and "You", so they keep the fieldset spacing */
.form > .fields { margin: 0 0 40px; }

/* A button row under an interior page lead (acquisitions.html) */
.page-head .cta-row { margin-top: 32px; }

.side-col h3 {
  margin: 24px 0 8px;
  font-size: 1.125rem;
}

@media print {
  .hero-door { display: none !important; }
}