/* District Agent Services - one stylesheet, no build step.
   Palette: cool limestone page, slate ink, brass reserved for the nameplate and the mark. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/publicsans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --stone-50: #F3F1EC;
  --stone-100: #EAE7DF;
  --stone-200: #D9D4C7;
  --stone-300: #C4BEAF;
  --stone-500: #7E796D;
  --ink: #1C2330;
  --ink-70: #3B4452;
  --slate: #2F4A63;
  --slate-deep: #24394D;
  --brass: #8C6D2F;
  --brass-light: #B8955A;
  --paper: #FFFFFF;
  --focus: #2F4A63;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stone-50: #171B22;
    --stone-100: #1F242D;
    --stone-200: #303744;
    --stone-300: #3D4656;
    --stone-500: #9A9CA3;
    --ink: #E8E4DA;
    --ink-70: #C9C5BB;
    --slate: #8FB0CC;
    --slate-deep: #A9C4DA;
    --brass: #C9A464;
    --brass-light: #B8955A;
    --paper: #12161C;
    --focus: #8FB0CC;
  }
  img { filter: brightness(.88); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--stone-50);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); max-width: 30ch; }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--slate); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--slate-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.fine { font-size: 0.875rem; color: var(--stone-500); }
.fine a { color: inherit; }

.skip {
  position: absolute; left: 8px; top: -60px; padding: 8px 12px;
  background: var(--slate); color: #fff; z-index: 10;
}
.skip:focus { top: 8px; }

/* Header */
.site-head { border-bottom: 1px solid var(--stone-200); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; font-variation-settings: "opsz" 24; }
.mark { flex: none; display: block; }
.nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 0.9375rem; }
.nav a { color: var(--ink-70); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav-cta { color: var(--slate) !important; font-weight: 600; }

/* Hero: full-bleed motion band with the nameplate over it */
.hero { padding: 0 0 72px; }
.motion { position: relative; overflow: hidden; background: var(--stone-200); }
.motion-poster img, .motion-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-film { opacity: 0; transition: opacity .8s ease; }
.motion.is-playing .motion-film { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .motion-film { transition: none; } }
.motion-hero { min-height: clamp(420px, 56vw, 720px); }
.motion-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,26,36,.28) 0%, rgba(20,26,36,.10) 45%, rgba(20,26,36,0) 70%); pointer-events: none; }
.motion-overlay { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: clamp(420px, 56vw, 720px); padding-top: 48px; padding-bottom: 48px; }
.motion-band { height: clamp(200px, 34vw, 460px); border-top: 1px solid var(--stone-200); }
.hero-below { padding-top: 40px; }
@media (max-width: 759px) {
  /* Phones: the poster flows at its own ratio and the nameplate tucks under it, so the Capitol stays visible. */
  .motion-hero { min-height: 0; overflow: visible; background: none; }
  .motion-hero::after { display: none; }
  .motion-hero .motion-poster img { position: static; width: 100%; height: auto; aspect-ratio: 21 / 9; }
  .motion-hero .motion-film { display: none; }
  .motion-overlay { position: static; min-height: 0; padding: 0 16px; margin-top: -36px; }
  .motion-hero .plaque { max-width: none; padding: 32px 24px 28px; }
}
.plaque {
  background: var(--stone-100);
  border: 2px solid var(--brass-light);
  box-shadow: inset 0 0 0 6px var(--stone-100), inset 0 0 0 7px var(--brass-light), 0 18px 48px rgba(20,26,36,.22);
  padding: 44px 40px 36px;
  max-width: 560px;
}
.plaque h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.05; }
.plaque-sub { font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 1.25rem; color: var(--ink-70); margin: 18px 0 0; line-height: 1.35; }
.plaque-addr { font-size: 0.9375rem; color: var(--stone-500); margin: 18px 0 0; line-height: 1.45; }
.lede { font-size: 1.1875rem; margin: 0; max-width: 56ch; }
.actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.text-link { font-size: 0.9375rem; }

.button {
  display: inline-block; background: var(--slate); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1rem; padding: 14px 22px; border: 0; cursor: pointer;
  font-family: var(--sans); line-height: 1.2;
}
.button:hover { background: var(--slate-deep); color: #fff; }
@media (prefers-color-scheme: dark) {
  .button { color: #12161C; }
  .button:hover { color: #12161C; }
}


/* Public notice */
.notice { padding: 0 0 72px; }
.notice-box {
  border-left: 4px solid var(--brass-light);
  background: var(--paper);
  padding: 32px 36px 24px;
  border-top: 1px solid var(--stone-200);
  border-right: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.notice-box h2 { margin-bottom: 14px; }
.providers { list-style: none; margin: 8px 0 20px; padding: 0; columns: 2; column-gap: 40px; max-width: 640px; }
.providers li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--stone-200); font-size: 1.0625rem; }
.providers a { color: var(--slate); }
@media (max-width: 560px) { .providers { columns: 1; } }

/* Sections */
section.providers-section, section.process, section.requirements, section.inquiry { padding: 72px 0; border-top: 1px solid var(--stone-200); }
.section-lede { font-size: 1.125rem; margin-top: 18px; color: var(--ink-70); }

.needs { margin: 40px 0 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.need { display: grid; grid-template-columns: 1fr; gap: 6px 40px; padding: 26px 0; border-top: 1px solid var(--stone-200); }
.need:last-child { border-bottom: 1px solid var(--stone-200); }
@media (min-width: 760px) { .need { grid-template-columns: 260px 1fr; } }
.need dt { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; font-variation-settings: "opsz" 36; line-height: 1.2; }
.need dd { margin: 0; max-width: var(--measure); color: var(--ink-70); }


/* Steps */
.steps { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 0 48px; } }
.steps li { counter-increment: step; position: relative; padding: 24px 0 24px 64px; border-top: 1px solid var(--stone-200); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 22px;
  font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--brass);
  font-variation-settings: "opsz" 72;
  width: 44px;
}
.steps h3 { margin-bottom: 8px; font-size: 1.375rem; }
.steps p { margin: 0; color: var(--ink-70); }

/* Requirements table */
.req-table { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 0.9875rem; }
.req-table th { text-align: left; font-weight: 600; font-size: 0.875rem; color: var(--stone-500); padding: 0 16px 12px 0; border-bottom: 1px solid var(--stone-300); }
.req-table td { vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--stone-200); color: var(--ink-70); }
.req-table td:first-child { color: var(--ink); }
.req-table td:nth-child(2) { white-space: nowrap; font-family: var(--serif); font-size: 1.0625rem; }
.req-table + .fine { margin-top: 18px; }
@media (max-width: 700px) {
  .req-table thead { display: none; }
  .req-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--stone-200); }
  .req-table td { display: block; border: 0; padding: 4px 0; }
  .req-table td:nth-child(2) { white-space: normal; }
  .req-table td:nth-child(3)::before { content: "At this office: "; font-weight: 600; color: var(--ink); }
}

/* Inquiry form */
.inquiry-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .inquiry-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }
.inquiry-form { background: var(--paper); border: 1px solid var(--stone-200); padding: 32px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--stone-500); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--stone-50);
  border: 1px solid var(--stone-300); padding: 11px 12px; border-radius: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--slate); outline: 3px solid var(--focus); outline-offset: 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #9B2C2C; }
textarea { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form-status { margin: 0; font-size: 0.9375rem; color: var(--ink-70); }
.form-status.error { color: #9B2C2C; }
.form-done { border: 1px solid var(--stone-200); background: var(--paper); padding: 32px; }
.form-done h3 { margin-bottom: 10px; }
@media (prefers-color-scheme: dark) { .form-status.error, input[aria-invalid="true"] { color: #E39A9A; border-color: #E39A9A; } }

/* Footer */
.site-foot { border-top: 1px solid var(--stone-200); background: var(--stone-100); padding: 48px 0 56px; font-size: 0.9375rem; color: var(--ink-70); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr 2fr; gap: 48px; } }
.foot-brand { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--ink); margin-bottom: 8px; }
.foot-legal p { max-width: 70ch; }
.foot-legal a { color: inherit; }

/* Secondary pages */
.page { padding: 56px 0 96px; }
.page h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-bottom: 20px; }
.page h2 { font-size: 1.5rem; margin: 32px 0 10px; }