/* Vickery Law PLLC
   Palette: navy #1F2A4D, steel #4A6FA5, tint #EEF2F8. No gold, yellow or amber.
   Type: Newsreader (display), IBM Plex Sans (text). */

:root {
  --ink: #1F2A4D;
  --ink-deep: #141C33;
  --steel: #4A6FA5;
  --steel-dark: #3A5885;
  --tint: #EEF2F8;
  --tint-deep: #DFE7F2;
  --rule: #CFDAE9;
  --paper: #FFFFFF;
  --muted: #5A6784;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --measure: 34rem;
  --wide: 72rem;
  --gutter: 1.5rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure { max-width: var(--measure); }

section { padding: 4.5rem 0; }
section.tinted { background: var(--tint); }
section.deep { background: var(--ink); color: #fff; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.2vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.3; }
h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.4em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
.lede { font-size: 1.22rem; line-height: 1.55; color: var(--ink); max-width: 38rem; }
.note { font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }

section.deep h1, section.deep h2, section.deep h3 { color: #fff; }
section.deep p { color: #C9D4E6; }
section.deep .note { color: #9FB0CB; }

a { color: var(--steel-dark); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
section.deep a { color: #A9C2E6; }

strong { font-weight: 600; }

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

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

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
  padding: 0.75rem 0;
}
.wordmark span {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

nav.primary ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0 0 0.75rem;
}
nav.primary a {
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
nav.primary a:hover { border-bottom-color: var(--rule); }
nav.primary a[aria-current="page"] { border-bottom-color: var(--ink); }

/* The Check-Up is the free entry point, not a peer of the audience pages,
   so it sits beside the nav as a button rather than inside it. */
.nav-cta {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--steel);
  border-radius: 3px;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 0.75rem;
  transition: background-color 0.14s ease;
}
.nav-cta:hover { background: var(--tint); color: var(--ink); }

@media (min-width: 60rem) {
  nav.primary ul { padding-bottom: 0; }
  .nav-cta { margin-bottom: 0; }
}

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9688rem;
  font-weight: 500;
  padding: 0.8rem 1.4rem;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color 0.14s ease, color 0.14s ease;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--ink-deep); color: #fff; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--tint); color: var(--ink); }

section.deep .btn-solid { background: #fff; color: var(--ink); border-color: #fff; }
section.deep .btn-solid:hover { background: var(--tint); color: var(--ink); }
section.deep .btn-line { color: #fff; border-color: #7E97BF; }
section.deep .btn-line:hover { background: rgba(255,255,255,0.09); color: #fff; }

/* ---------- On-this-page bar ----------
   A sticky strip under the hero. Scrolls horizontally on narrow screens,
   sits on one line on wide ones. No JavaScript, and it leaves the
   full-bleed section backgrounds intact. */

.pagenav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pagenav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.pagenav li { flex: 0 0 auto; }
.pagenav a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 2px solid transparent;
}
.pagenav a:hover { border-bottom-color: var(--steel); color: var(--steel-dark); }

/* Clearance so an anchored heading is not hidden under the sticky bar */
main [id] { scroll-margin-top: 4.25rem; }

/* A section that continues on its own page */
.continues {
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.continues a {
  font-family: var(--sans);
  font-size: 0.9688rem;
  font-weight: 500;
}

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

.hero { padding: 5.5rem 0 4rem; }
.hero .kicker {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--steel-dark);
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 3px solid var(--steel);
}
.hero h1 { max-width: 20ch; }

/* ---------- Content blocks ---------- */

.stack > * + * { margin-top: 2.75rem; }

.block {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.block h3 { margin-bottom: 0.35em; }
.block p:last-child { margin-bottom: 0; }

.cols {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cols p { max-width: none; }

/* Stage list: a real sequence, so it carries markers */
ol.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
ol.stages li {
  counter-increment: stage;
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 0 3.25rem;
  margin-top: 1.5rem;
  position: relative;
}
ol.stages li::before {
  content: counter(stage);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--steel);
  line-height: 1;
}
ol.stages h3 { margin-bottom: 0.3em; }
ol.stages p:last-child { margin-bottom: 0; }

/* Plain list, no false sequence */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0 0;
  margin-top: 1.25rem;
}
ul.plain li p:last-child { margin-bottom: 0; }

ul.ticks { padding-left: 1.15rem; margin: 0 0 1.15em; max-width: var(--measure); }
ul.ticks li { margin-bottom: 0.55rem; }

/* ---------- The signature element: the two regimes ---------- */

.regimes {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-top: 2.5rem;
}
.regime { padding: 2rem 1.75rem; }
.regime + .regime { border-top: 3px solid var(--ink); }

@media (min-width: 50rem) {
  .regimes { grid-template-columns: 1fr 1fr; }
  .regime + .regime { border-top: 0; border-left: 3px solid var(--ink); }
}

.regime .when {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.regime h3 { margin-bottom: 1.25rem; }

.regime dl { margin: 0; }
.regime dt {
  font-size: 0.875rem;
  color: var(--muted);
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}
.regime dd {
  margin: 0.1rem 0 0.85rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.2;
}

.tiers { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.35rem 0 0.85rem; }
.tier { }
.tier b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
}
.tier span { font-size: 0.8125rem; color: var(--muted); }

.regime-divider {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  max-width: 24ch;
}

/* ---------- Pull quote ---------- */

blockquote {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--steel);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.45;
  max-width: 34rem;
}
blockquote p { max-width: none; }
blockquote p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin: 2rem 0 0; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}
th, td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
  font-size: 0.875rem;
}

/* ---------- Details / FAQ ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.35;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1.15rem;
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--steel);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 1.5rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Disclaimer ---------- */

.disclaimer {
  background: var(--tint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 2rem 0;
}
.disclaimer p { font-size: 0.875rem; line-height: 1.65; color: var(--muted); max-width: 48rem; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer b { color: var(--ink); }

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

footer.site {
  background: var(--ink);
  color: #C9D4E6;
  padding: 3.5rem 0 2.5rem;
  font-size: 0.9375rem;
}
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }

.foot-top {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid #33406A;
}
@media (min-width: 48rem) {
  .foot-top { grid-template-columns: 1fr 1fr; }
}

.foot-name { font-family: var(--serif); font-size: 1.3rem; color: #fff; margin: 0 0 0.35rem; }

footer.site nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem 1.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.foot-bottom { padding-top: 1.75rem; }
.foot-bottom p { max-width: 44rem; font-size: 0.875rem; line-height: 1.7; color: #9FB0CB; margin: 0 0 0.6rem; }
.foot-bottom p:last-child { margin-bottom: 0; }

/* ---------- Motion ---------- */

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

/* =====================================================================
   v2 additions, 23 September 2026
   Self-hosted fonts, compact phone header, forms, About, Contact,
   and resets so the two browser tools do not inherit page styles.
   ===================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Header: one row on every screen ----------
   Phones get the wordmark, the Check-Up button and a Menu control.
   The menu is an HTML <details> element, so it needs no JavaScript. */

.masthead { position: relative; z-index: 30; }
.masthead .wrap { flex-wrap: nowrap; min-height: 4rem; gap: 0.75rem; }
.wordmark { flex: 0 1 auto; min-width: 0; }
nav.primary { display: none; }
.nav-cta { margin-bottom: 0; padding: 0.45rem 0.75rem; font-size: 0.875rem; margin-left: auto; }

details.menu { flex: 0 0 auto; }
details.menu > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.45rem 0.75rem;
  user-select: none;
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menu-close { display: none; }
details.menu[open] .menu-open { display: none; }
details.menu[open] .menu-close { display: inline; }
details.menu[open] > summary { background: var(--tint); }
details.menu > nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px rgba(20, 28, 51, 0.10);
  padding: 0.5rem var(--gutter) 1.25rem;
}
details.menu ul { list-style: none; margin: 0; padding: 0; }
details.menu li a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.0625rem;
}
details.menu li a[aria-current="page"] { font-weight: 600; }
.menu-contact { margin: 1rem 0 0; font-size: 0.9375rem; }

@media (max-width: 30rem) {
  .wordmark { font-size: 1.12rem; white-space: nowrap; }
  .wordmark span { display: none; }
}

@media (min-width: 60rem) {
  .masthead .wrap { min-height: 5rem; gap: 1.5rem; }
  nav.primary { display: block; margin-left: auto; }
  nav.primary ul { padding: 0; gap: 0.25rem 1.4rem; flex-wrap: nowrap; }
  .nav-cta { margin-left: 0; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
  details.menu { display: none; }
}

/* Phone rhythm: less vertical padding so content starts on the first screen */
@media (max-width: 40rem) {
  section { padding: 3rem 0; }
  .hero { padding: 2.5rem 0 2.25rem; }
  .hero .kicker { margin-bottom: 0.9rem; }
  .lede { font-size: 1.1rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { text-align: center; }
  .pagenav a { padding: 0.7rem 0; }
  main [id] { scroll-margin-top: 3.5rem; }
  footer.site nav ul { grid-template-columns: 1fr 1fr; }
}

.hero-tight { padding-bottom: 2.5rem; }
.foot-tag { margin: 0 0 1rem; }
.foot-addr { margin: 0 0 0.75rem; }

/* ---------- About ---------- */
.bio { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; max-width: 15rem; height: auto; border: 1px solid var(--rule); }
@media (min-width: 48rem) { .bio { grid-template-columns: 15rem 1fr; gap: 3rem; } }
dl.facts { margin: 3rem 0 0; display: grid; gap: 0; }
dl.facts > div { border-top: 1px solid var(--rule); padding: 1rem 0; display: grid; gap: 0.25rem; }
@media (min-width: 48rem) { dl.facts > div { grid-template-columns: 12rem 1fr; gap: 2rem; } }
dl.facts dt { font-size: 0.875rem; color: var(--muted); }
dl.facts dd { margin: 0; }

/* ---------- Contact and forms ---------- */
.contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; } }
.contact-side { border-top: 3px solid var(--ink); padding-top: 1.5rem; }
@media (min-width: 56rem) { .contact-side { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 2.5rem; } }
.contact-side ul.plain li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.contact-side h3 { margin-bottom: 0.25rem; }
.contact-side p { margin-bottom: 0.4rem; }

.form { margin-top: 1.5rem; max-width: 34rem; }
.form .field { margin: 0 0 1.25rem; border: 0; padding: 0; }
.form label, .form legend { display: block; font-size: 0.9375rem; font-weight: 500; margin: 0 0 0.35rem; padding: 0; }
.form .opt { font-weight: 400; color: var(--muted); font-size: 0.8125rem; margin-left: 0.25rem; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #AFC0D8;
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
}
.form textarea { resize: vertical; min-height: 5.5rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--steel); outline-offset: 1px; border-color: var(--steel); }
.form label.inline { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; margin-right: 1.5rem; }
.form label.check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400; line-height: 1.5; margin: 0; }
.form label.check input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem; }
.form .warn-line { font-size: 0.875rem; color: var(--muted); margin: 0.5rem 0 0; }
.form button { cursor: pointer; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Insights list, policy page ---------- */
.entries li h3 { margin: 0.1rem 0 0.4rem; }
.entries li h3 a { text-decoration: none; color: var(--ink); }
.entries li h3 a:hover { text-decoration: underline; }
.entries .note { margin: 0; }
section.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; }
section.prose h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.callout { background: var(--tint); border-left: 3px solid var(--steel); padding: 1.1rem 1.25rem; max-width: 40rem; }
.callout p { margin: 0; }
.privacy-box { background: var(--tint); border-left: 3px solid var(--steel); padding: 0.9rem 1.1rem; font-size: 0.9375rem; max-width: 40rem; margin-top: 1.5rem; }

/* ---------- The two browser tools ----------
   Their own stylesheets are scoped to .checkup-tool and .qsbs-tool.
   These resets stop the page styles above from leaking in. */
.checkup-tool section, .qsbs-tool section { padding: 0; }
.checkup-tool p, .qsbs-tool p, .checkup-tool h1, .checkup-tool h2, .checkup-tool h3,
.qsbs-tool h1, .qsbs-tool h2, .qsbs-tool h3 { max-width: none; }
.checkup-tool table, .qsbs-tool table { min-width: 0; }
.checkup-tool { padding: 1.5rem 0 3rem; }
.checkup-tool #toolHero, .checkup-tool #privacyBanner { display: none !important; }


/* =====================================================================
   V4, 23 September 2026: Brand Style Guide palette and type
   Slate and sage, Fraunces / Inter / IBM Plex Mono, pill buttons,
   mono kickers, a short sage rule under section headings.
   ===================================================================== */
:root {
  --ink: #2B3453;          /* slate: primary navy */
  --ink-deep: #232B45;     /* slate deep */
  --slate-mid: #3D4765;
  --headline: #1F2540;     /* ink */
  --steel: #7C8B5F;        /* sage: accents */
  --steel-dark: #5F6E47;   /* sage deep */
  --sage-light: #B4BF97;
  --tint: #F5F6F3;         /* paper */
  --tint-deep: #ECEEE8;    /* paper 2 */
  --rule: #DBDFD9;         /* line */
  --muted: #6A7480;
  --text: #4B5560;         /* body */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
body { color: var(--text); }
h1, h2, h3, h4 { color: var(--headline); letter-spacing: -0.015em; }
.lede { color: var(--slate-mid); }
strong, b { color: var(--headline); }
a { color: var(--ink); text-decoration-color: var(--steel); }
a:hover { color: var(--steel-dark); }

/* Kickers: mono, uppercase, letter-spaced, sage deep */
.hero .kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-dark);
  border-left: 0;
  padding-left: 0;
}
/* Short sage rule under section headings */
main section > .wrap > h2::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  background: var(--steel);
  margin-top: 0.7rem;
}
section.deep > .wrap > h2::after { background: var(--sage-light); }

/* Buttons: pill-shaped; slate with white text; hover to sage with slate-deep text */
.btn, .nav-cta, details.menu > summary { border-radius: 999px; }
.btn-solid:hover { background: var(--steel); border-color: var(--steel); color: var(--ink-deep); }
.btn-line { border-color: var(--ink); }
.btn-line:hover { background: var(--tint-deep); }
.nav-cta { border-color: var(--steel); }
.nav-cta:hover { background: var(--steel); color: var(--ink-deep); }
nav.primary a[aria-current="page"] { border-bottom-color: var(--steel); }

/* Dark bands and footer */
section.deep { background: var(--ink); }
section.deep p { color: #D3D7DE; }
section.deep .note { color: #AEB6C6; }
section.deep a { color: var(--sage-light); }
section.deep .btn-solid:hover { background: var(--sage-light); border-color: var(--sage-light); color: var(--ink-deep); }
section.deep .btn-line { border-color: var(--sage-light); }
footer.site { background: var(--ink-deep); color: #C8CDD6; border-top: 3px solid var(--steel); }
footer.site a { color: #fff; }
.foot-top { border-bottom-color: var(--slate-mid); }
.foot-bottom p { color: #AEB6C6; }

/* Sections, forms, cards */
section.tinted { background: var(--tint); }
.disclaimer { background: var(--tint); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { border-color: #C9CEC6; border-radius: 8px; }
.callout, .privacy-box { border-left-color: var(--steel); }
.regime + .regime { border-color: var(--ink); }
ol.stages li::before { color: var(--steel); }

/* Inter's tabular-figure feature also widens hyphens; keep it only where figures line up */
body { font-variant-numeric: normal; }
table, .regime dd, .tier b { font-variant-numeric: tabular-nums; }

/* =====================================================================
   V6, 23 September 2026: moderate sage
   Pale sage bands, filled sage step numbers, sage FAQ markers,
   a sage rule under the page heading, sage footer tagline.
   ===================================================================== */
:root { --sage-band: #EEF1E6; --sage-band-line: #DCE2CD; }
section.tinted {
  background: var(--sage-band);
  border-top: 1px solid var(--sage-band-line);
  border-bottom: 1px solid var(--sage-band-line);
}
section.tinted .callout, section.tinted .privacy-box { background: #fff; }
section.tinted > .wrap > h2::after { background: var(--steel-dark); }
section.tinted ol.stages li { border-top-color: var(--sage-band-line); }

/* Page heading: short sage rule under the h1 */
.hero h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--steel);
  margin-top: 1.1rem;
  border-radius: 2px;
}

/* Steps: filled sage circles with white numerals */
ol.stages li { padding-left: 3.5rem; }
ol.stages li::before {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--steel-dark);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1.35rem;
}

/* FAQ: sage markers and a sage edge on the open question */
.faq summary::after { color: var(--steel-dark); font-weight: 600; }
.faq summary:hover { color: var(--steel-dark); }
.faq details[open] { border-left: 3px solid var(--steel); padding-left: 1rem; }

/* Footer: sage tagline */
footer.site .foot-tag { color: var(--sage-light); font-style: italic; }

/* V7: the regimes card is white inside a dark band. Its figures were
   inheriting the band's white text colour and disappeared. */
.regimes { background: #fff; color: var(--text); }
.regime dd { color: var(--headline); }
.regime .tier b { color: var(--steel-dark); }
.regime .tier span, .regime dt, .regime .when { color: var(--muted); }
section.deep .regime .note { color: var(--muted); }

/* =====================================================================
   V9, 24 September 2026
   1. Phone header: the wordmark never shrinks, wraps or sits under a
      button. Below 480px the header Check-Up button is hidden (the hero
      button and the highlighted menu item replace it).
   2. Home hero photo: a Washington State harbor. Desktop: full-bleed
      photo under a navy gradient, text over the sky, the harbor left
      clear in a band below the buttons. Tablet and phone: the photo is
      a band under the header and the text sits on solid navy.
   ===================================================================== */

/* ---------- 1. Header, every page ---------- */
.masthead .wrap { gap: 0.75rem; }
.wordmark {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0;
}
details.menu > summary,
.nav-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}
details.menu > summary { min-width: 44px; padding: 0 1rem; }
/* The Check-Up is the highlighted item in the phone menu */
details.menu li:last-child a {
  font-weight: 600;
  color: var(--steel-dark);
  border-bottom: 0;
}
details.menu li:last-child a::after { content: " \2192"; }

@media (max-width: 29.99rem) {           /* below 480px */
  .nav-cta { display: none; }
  details.menu { margin-left: auto; }
}
@media (min-width: 30rem) and (max-width: 39.99rem) {   /* 480 to 639px */
  .wordmark span { display: none; }      /* the jurisdictions line returns at 640px */
  .nav-cta { font-size: 0.8125rem; padding: 0 0.8rem; }
}
@media (min-width: 30rem) and (max-width: 59.99rem) {   /* 480 to 959px */
  .nav-cta { margin-left: auto; }
}

/* ---------- 2. Home hero photo ---------- */
.hero-photo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.hero-photo .hero-media { display: block; }
.hero-photo .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 45% 70%;
}
.hero-photo h1 { color: #fff; }
.hero-photo h1::after { background: var(--sage-light); }
.hero-photo .kicker { color: #C9D2AE; }
.hero-photo .lede { color: #E6E9EF; }
.hero-photo .btn-solid { background: #fff; color: var(--ink); border-color: #fff; }
.hero-photo .btn-solid:hover { background: var(--sage-light); border-color: var(--sage-light); color: var(--ink-deep); }
.hero-photo .btn-line { background: transparent; color: #fff; border-color: #fff; }
.hero-photo .btn-line:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero-photo .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Tablet and phone: the photo is a band cropped to the harbor */
@media (max-width: 63.99rem) {
  .hero-photo { padding-top: 0; }
  .hero-photo .hero-media {
    position: relative;
    height: clamp(220px, 36vw, 280px);
    overflow: hidden;
    margin-bottom: 2.25rem;
  }
  /* Zoom 1.35x about the harbor so it fills the band. The image already
     covers the band, so scaling up can never expose an edge. */
  .hero-photo .hero-media img { transform: scale(1.35); transform-origin: 45% 68%; }
}

/* Desktop: full-bleed photo, gradient behind the text, harbor band clear */
@media (min-width: 64rem) {
  .hero-photo {
    --band: max(189px, calc(9.2vw + 24px));   /* 16% of the photo's height, plus 24px of trees */
    padding: 5rem 0 0;
  }
  /* The photo is sized by width (never narrower than 1800px, so the
     harbor is large enough to read) and pinned so that the harbor sits
     in the bottom band, whatever the height of the text above it. */
  .hero-photo .hero-media {
    position: absolute;
    left: 45%;
    bottom: 24px;
    width: max(100%, 1800px);
    aspect-ratio: 1920 / 1104;
    transform: translate(-45%, 25%);
    z-index: 0;
  }
  .hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(43, 52, 83, 0.80) 0%,
      rgba(43, 52, 83, 0.78) calc(max(0px, (100% - 72rem) / 2) + 1.5rem + 50rem),
      rgba(43, 52, 83, 0.42) 100%);
    /* Lighter over the harbor band so the marina and firs show through */
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--band)), rgba(0, 0, 0, 0.4) calc(100% - var(--band) + 56px), rgba(0, 0, 0, 0.4) 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--band)), rgba(0, 0, 0, 0.4) calc(100% - var(--band) + 56px), rgba(0, 0, 0, 0.4) 100%);
  }
  .hero-photo .wrap {
    position: relative;
    z-index: 2;
    padding-bottom: calc(var(--band) + 1.5rem);
  }
}

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

/* =====================================================================
   V11: For Families hero photo (a lane to the Chesapeake, Neavitt, MD).
   A panorama, so it is art-directed: phones get a 2.58:1 crop of the
   lane and the two walkers' shadows; desktop gets the whole scene as a
   full-width strip under the header, with the text below on navy.
   ===================================================================== */
@media (max-width: 63.99rem) {
  .hero-photo--families .hero-media img { object-position: 12% 100%; transform: scale(1.12); transform-origin: 14% 92%; }
}
@media (min-width: 64rem) {
  .hero-photo--families { padding-top: 0; }
  .hero-photo--families::before { display: none; }
  .hero-photo--families .hero-media {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; aspect-ratio: auto; max-height: 560px; overflow: hidden;
    margin-bottom: 3.5rem;
  }
  .hero-photo--families .hero-media img { height: auto; max-height: 560px; object-position: 20% 85%; }
  .hero-photo--families .wrap { padding-bottom: 4.5rem; }
}

/* =====================================================================
   V12: plain navy hero (no photo) on For Founders and For Advisers, so
   the four main pages share the same opening. Same colours as the photo
   heroes; photos stay on Home and For Families.
   ===================================================================== */
.hero-navy { background: var(--ink); color: #fff; }
.hero-navy h1 { color: #fff; }
.hero-navy h1::after { background: var(--sage-light); }
.hero-navy .kicker { color: #C9D2AE; }
.hero-navy .lede { color: #E6E9EF; }
.hero-navy .note { color: #C3C9D4; }
.hero-navy .btn-solid { background: #fff; color: var(--ink); border-color: #fff; }
.hero-navy .btn-solid:hover { background: var(--sage-light); border-color: var(--sage-light); color: var(--ink-deep); }
.hero-navy .btn-line { background: transparent; color: #fff; border-color: #fff; }
.hero-navy .btn-line:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero-navy .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-navy + hr.rule { display: none; }
@media (min-width: 40rem) { .hero-navy { padding-bottom: 4.5rem; } }
/* V13: navy hero also on Insights, About and Contact (and the monthly
   legislation pages); links and bold text inside it stay light */
.hero-navy a:not(.btn) { color: #fff; text-decoration-color: var(--sage-light); }
.hero-navy a:not(.btn):hover { color: var(--sage-light); }
.hero-navy strong, .hero-navy b { color: #fff; }

/* V14: byline and review date under the H1 on the founder pages and the Illustrator */
.byline { margin: 0.9rem 0 1.4rem; font-size: 0.9375rem; }
.qsbs-tool .byline { color: var(--muted); }