:root {
  color-scheme: light;
  --navy: #1c3a5e;
  --navy-dark: #142c49;
  --blue: #2b6cb0;
  --ink: #24313f;
  --muted: #5a6a7a;
  --bg: #fafbfc;
  --band: #eef3f8;
  --card: #ffffff;
  --line: #d7dfe8;
  --focus: #2b6cb0;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  line-height: 1.6;
}

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

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wraps rather than crushes: with four links plus the phone number, the menu
     needs a second line on a narrow phone. */
  flex-wrap: wrap;
  gap: 10px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  /* flex: none, or a long nav squashes the mark on a narrow phone. */
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.brand-name {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.header-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.header-link {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-link:hover,
.header-link:focus {
  text-decoration: underline;
}

.header-phone {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus {
  text-decoration: underline;
}

/* ---------- Hero ---------- */

.hero {
  width: min(100%, 780px);
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) 20px 40px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.hero-lede {
  margin: 0 auto 28px;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hero-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
}

.button {
  display: inline-block;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button.primary {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #ffffff;
}

.button.primary:hover,
.button.primary:focus {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}

.button.secondary {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}

.button.secondary:hover,
.button.secondary:focus {
  background: var(--band);
}

.pay-button {
  font-size: 1.15rem;
  padding: 16px 34px;
}

.step-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 14px auto 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
}

.step-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.9rem;
}

.pay-help {
  text-align: center;
  padding-bottom: 72px;
}

.pay-help-copy {
  margin: 0 auto;
  max-width: 560px;
  color: var(--muted);
  font-size: 1.05rem;
}

.pay-help-copy a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.pay-help-copy a:hover,
.pay-help-copy a:focus {
  text-decoration: underline;
}

/* ---------- Intro / What we do ---------- */

.intro {
  background: var(--band);
  padding: 56px 20px;
}

.intro h2,
.contact h2 {
  margin: 0 0 28px;
  color: var(--navy);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 700;
  text-align: center;
}

.intro-grid {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.intro-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px;
}

.intro-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
}

.intro-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}

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

.contact {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 56px 20px 64px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 36px;
  align-items: start;
}

.contact-info h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.info-block {
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 1rem;
}

.info-block a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.info-block a:hover,
.info-block a:focus {
  text-decoration: underline;
}

.info-block.espanol {
  color: var(--muted);
  font-style: italic;
}

/* ---------- Form ---------- */

.site-form {
  display: grid;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(20px, 4vw, 30px);
}

.site-form label {
  display: grid;
  gap: 6px;
}

.site-form span,
.captcha-field span {
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}

.site-form input,
.site-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.site-form textarea {
  min-height: 132px;
  resize: vertical;
}

.site-form input:focus,
.site-form textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha-field {
  display: grid;
  gap: 8px;
}

.captcha {
  width: 150px;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.captcha-field input {
  width: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
}

.captcha-field input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
  outline: none;
}

.site-form button {
  min-height: 50px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0 24px;
  transition: background 160ms ease;
}

.site-form button:hover,
.site-form button:focus {
  background: var(--navy-dark);
}

.form-disclaimer {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.form-alert {
  margin: 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.form-alert p {
  margin: 0;
}

.form-alert ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.form-alert.success {
  background: #e7f4ec;
  border: 1px solid #bfe0cc;
  color: #205b38;
}

.form-alert.error {
  background: #fbeaea;
  border: 1px solid #eccaca;
  color: #7c2f2f;
}

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

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 26px 20px;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer p {
  margin: 4px 0;
}

/* The menu sits on its own line, clear of the address, so the two are not read
   as one run-on string. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
}

.footer-address {
  margin-top: 0 !important;
}

.site-footer .footer-disclaimer {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 480px) {
  .brand-name {
    display: none;
  }

  .header-nav {
    gap: 12px;
  }

  .header-link,
  .header-phone {
    font-size: 0.85rem;
  }

  .header-inner {
    justify-content: center;
  }

  .header-nav {
    justify-content: center;
    gap: 6px 14px;
  }

  .hero-actions .button {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- News section (/news/) ----------
   Everything below is scoped to the section pages. The article body is styled
   through .article-body only: markdown emits p, ul, ol, a, h2, h3, blockquote,
   table and code, and this stylesheet deliberately has almost no bare element
   selectors (img, html, body, h1 and nothing else). A bare rule here would
   leak into the contact form and the footer on the two live pages. */

.section-hero {
  padding-bottom: 12px;
}

/* The section name is long. At full hero scale it wraps to three lines and
   shouts louder than the firm's own headline on the home page. */
.section-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
}

.post-list {
  width: min(100%, 780px);
  margin: 0 auto;
  padding: 24px 20px 56px;
}

.post-list-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.post-card:hover,
.post-card:focus-within {
  border-color: var(--blue);
  box-shadow: 0 2px 10px rgba(28, 58, 94, 0.08);
}

/* Date first: this is a feed, and the date is what a reader scans for. */
.post-card-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-card-source {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--band);
  color: var(--navy);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.post-card h2 {
  margin: 0 0 8px;
  font-size: 1.18rem;
  line-height: 1.3;
}

.post-card h2 a {
  color: var(--navy);
  text-decoration: none;
}

.post-card h2 a:hover,
.post-card h2 a:focus-visible {
  text-decoration: underline;
}

.post-card-summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

/* ---------- Where the notice came from ---------- */

.source-line {
  margin: -12px 0 24px;
  color: var(--muted);
  font-size: 0.88rem;
}

.source-line a {
  color: var(--blue);
  font-weight: 600;
}

.source-box {
  margin: 32px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--band);
}

.source-box p {
  margin: 0;
}

.source-box-label {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

.source-box a {
  color: var(--blue);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.source-box-note {
  margin-top: 8px !important;
  color: var(--muted);
  font-size: 0.85rem;
}

.post-empty {
  color: var(--muted);
  text-align: center;
}

.section-cta {
  background: var(--band);
  padding: 48px 20px;
}

.section-cta-inner {
  width: min(100%, 780px);
  margin: 0 auto;
  text-align: center;
}

.section-cta-inner h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.3rem;
}

.section-cta-inner p {
  margin: 0;
  color: var(--ink);
}

/* ---------- Article page ---------- */

.article {
  padding: 0 20px 64px;
}

.article-inner {
  width: min(100%, 680px);
  margin: 0 auto;
  padding-top: clamp(32px, 6vh, 56px);
}

.article .eyebrow a {
  color: var(--muted);
  text-decoration: none;
}

.article .eyebrow a:hover,
.article .eyebrow a:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

/* Overrides the 3.8rem hero h1. An article headline is read, not announced. */
.article-title {
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 10px;
}

.article-date {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.article-disclaimer {
  background: var(--band);
  border-left: 3px solid var(--navy);
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 0 0 32px;
}

.article-disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.article-disclaimer p + p {
  margin-top: 10px;
}

.article-body {
  font-size: 1.02rem;
  line-height: 1.75;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body table {
  margin: 0 0 20px;
}

.article-body h2 {
  margin: 36px 0 10px;
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.article-body h3 {
  margin: 26px 0 8px;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.35;
}

.article-body a {
  color: var(--blue);
}

.article-body ul,
.article-body ol {
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body blockquote {
  border-left: 3px solid var(--line);
  padding-left: 16px;
  color: var(--muted);
}

/* A picture is shown at its own size, never wider than the column. Some are
   meant to be small and some large. Marking one "full" makes it fill the
   column, which is how several pictures of the same kind of thing are made to
   match when they were captured at different sizes. The width and height
   attributes stay on the tag either way, which is what stops the page jumping
   as images load. */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.article-body img.fill {
  width: 100%;
}

.article-body code {
  background: var(--band);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

.article-body pre {
  background: var(--band);
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
}

.article-body pre code {
  background: none;
  padding: 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.article-body th {
  background: var(--band);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

.article-back {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

/* An error message should not be set at the same size as the firm's headline. */
.notfound h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
}

.notfound-help {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Wide content must scroll inside itself, never the page. */
@media (max-width: 560px) {
  .article-body table,
  .article-body pre {
    display: block;
    overflow-x: auto;
  }
}