:root {
  color-scheme: light;
  --color-primary: #1d3156;
  --color-primary-muted: #496894;
  --color-primary-soft: #b0cbe6;
  --color-border-brand: #a4b5d1;
  --color-accent: #fed6ce;
  --color-accent-text: #1d3156;
  --color-canvas: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-subtle: #eef3f8;
  --color-text: #1d293d;
  --color-text-muted: #3f4d63;
  --color-border: #d6dee9;
  --color-focus: #496894;

  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --text-display: clamp(2.25rem, 5vw, 3.75rem);
  --leading-tight: 1.2;
  --leading-normal: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(29 49 86 / 0.06), 0 6px 18px rgb(29 49 86 / 0.05);
  --shadow-md: 0 16px 40px rgb(29 49 86 / 0.10);

  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-canvas);
  font-size: 16px;
  line-height: var(--leading-normal);
}

* { box-sizing: border-box; }
html { min-width: 20rem; }
body { margin: 0; min-height: 100vh; }
a { color: var(--color-primary-muted); text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
h1, h2, h3, p { margin-top: 0; }
h1 { color: var(--color-primary); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: -0.025em; margin-bottom: var(--space-3); }
h2 { color: var(--color-primary); font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.015em; margin-bottom: var(--space-2); }
h3 { color: var(--color-primary); font-size: var(--text-lg); margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-4); }

.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 20; transform: translateY(-160%); background: var(--color-primary); color: white; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }
.app-header { min-height: 4.5rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 max(var(--space-6), calc((100vw - 72rem) / 2)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; color: var(--color-primary); font-size: var(--text-lg); font-weight: 750; text-decoration: none; letter-spacing: -0.01em; }
.app-nav { display: flex; gap: var(--space-5); align-items: center; font-size: var(--text-sm); }
.app-nav a { color: var(--color-primary); font-weight: 650; text-decoration: none; }
.app-main { width: min(100% - 3rem, 72rem); margin: var(--space-10) auto var(--space-16); }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.page-header__copy > :last-child { margin-bottom: 0; }
.content-stack { display: grid; gap: var(--space-6); }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.app-footer { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }

.public-shell { background: linear-gradient(145deg, #ffffff 0%, #f7f9fc 58%, rgb(254 214 206 / 0.28) 100%); }
.public-header { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: var(--space-6) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.public-main { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: var(--space-12) 0 var(--space-20); }
.public-main .hero { max-width: 48rem; padding: clamp(2rem, 7vw, 5rem); background: rgb(255 255 255 / 0.84); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.public-main .hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.5rem; background: var(--color-accent); }
.public-main h1 { max-width: 12ch; font-size: var(--text-display); }
.public-main .lede { max-width: 40rem; color: var(--color-text-muted); font-size: var(--text-lg); }
.public-footer { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: var(--space-8) 0; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.public-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); }
.public-nav a { color: var(--color-primary); font-weight: 650; text-decoration: none; }
.public-stack { display: grid; gap: var(--space-16); }
.public-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr); align-items: start; gap: var(--space-8); }
.public-section { scroll-margin-top: var(--space-6); }
.public-section__intro { max-width: 42rem; margin-bottom: var(--space-6); }
.contact-options { display: grid; gap: var(--space-4); }
.privacy-notice { padding: var(--space-4); color: var(--color-accent-text); background: var(--color-accent); border: 1px solid var(--color-border-brand); border-radius: var(--radius-md); }
.privacy-notice strong { display: block; margin-bottom: var(--space-1); }
.privacy-notice p { margin: 0; }
.turnstile-field { min-height: 4.1rem; margin-top: var(--space-5); }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.status-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.request-message { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-5); background: var(--color-surface-subtle); border-radius: var(--radius-md); }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.card--compact { padding: var(--space-5); }
.card > :last-child { margin-bottom: 0; }
.card__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.card__header > :last-child { margin-bottom: 0; }
.muted { color: var(--color-text-muted); }
.eyebrow { color: var(--color-primary-muted); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); }

.button { min-height: 2.75rem; font: inherit; font-weight: 700; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.625rem var(--space-5); text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--color-primary); color: white; }
.button--primary:hover { background: var(--color-primary-muted); color: white; }
.button--secondary { background: var(--color-surface); border-color: var(--color-border-brand); color: var(--color-primary); }
.button--secondary:hover { background: var(--color-surface-subtle); color: var(--color-primary); border-color: var(--color-primary-muted); }
.button--ghost { background: transparent; color: var(--color-primary); }
.button--ghost:hover { background: var(--color-surface-subtle); color: var(--color-primary); }

.field { display: grid; gap: var(--space-2); }
.field + .field, .field + .button, .form-actions { margin-top: var(--space-5); }
.field label { color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; }
.field__hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
input, select, textarea { width: 100%; min-height: 2.75rem; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-brand); border-radius: var(--radius-sm); padding: 0.625rem var(--space-3); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--color-primary-muted); }
textarea { min-height: 10rem; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.form-grid .field + .field { margin-top: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.list-row { min-height: 4.5rem; padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); border-bottom: 1px solid var(--color-border); }
.list-row:last-child { border-bottom: 0; }
.list-row__primary { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.list-row__secondary { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.list-row__meta { color: var(--color-text-muted); font-size: var(--text-sm); text-align: right; }

.badge { display: inline-flex; align-items: center; min-height: 1.75rem; width: fit-content; padding: 0.2rem var(--space-3); border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--color-primary); font-size: var(--text-xs); font-weight: 750; letter-spacing: 0.02em; }
.badge--new { background: var(--color-primary-soft); border-color: var(--color-border-brand); }
.badge--follow-up { background: var(--color-accent); border-color: var(--color-border-brand); color: var(--color-accent-text); }
.badge--inactive { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); }
.badge--role { background: var(--color-surface-subtle); border-color: var(--color-border); text-transform: capitalize; }
.badge--responded { background: var(--color-accent); border-color: var(--color-border-brand); color: var(--color-accent-text); }
.badge--resolved { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); }
.badge--pending { background: var(--color-accent); border-color: var(--color-border-brand); color: var(--color-accent-text); }
.badge--contacted { background: var(--color-primary-soft); border-color: var(--color-border-brand); }
.badge--completed { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); }

.definition-list { display: grid; grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr); gap: var(--space-3) var(--space-6); margin: 0; }
.definition-list dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.definition-list dd { margin: 0; overflow-wrap: anywhere; }
.note-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.note-item { overflow-wrap: anywhere; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
details { margin-top: var(--space-4); }
summary { cursor: pointer; font-weight: 700; padding: var(--space-2) 0; }
summary:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 3px; }
details[open] > form, details[open] > ul { margin-top: var(--space-4); }
fieldset { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
legend { font-weight: 700; padding: 0 var(--space-2); }
.note-item:first-child { padding-top: 0; }
.note { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-2) 0 0; }
.empty-state { padding: var(--space-8); text-align: center; background: var(--color-surface-subtle); border: 1px dashed var(--color-border-brand); border-radius: var(--radius-md); }
.empty-state > :last-child { margin-bottom: 0; }

@media (max-width: 44rem) {
  .app-header, .public-header { align-items: flex-start; flex-direction: column; padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .app-nav { width: 100%; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .app-main { width: min(100% - 2rem, 72rem); margin-top: var(--space-8); }
  .public-main { width: min(100% - 2rem, 72rem); padding-top: var(--space-6); }
  .public-header, .public-footer, .app-footer { width: min(100% - 2rem, 72rem); }
  .page-header, .card__header { align-items: stretch; flex-direction: column; }
  .page-header > .button { align-self: flex-start; }
  .content-grid, .form-grid, .public-grid { grid-template-columns: 1fr; }
  .form-grid .field + .field { margin-top: 0; }
  .list-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .list-row__meta { text-align: left; }
  .definition-list { grid-template-columns: 1fr; gap: var(--space-1); }
  .definition-list dd { margin-bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) { .button { transition: none; } }