/* ==========================================================================
   The Advocate Path: base stylesheet (human-made redesign 2026-10-13: oxblood, parchment, Caslon, ribbons)
   Loaded after bootstrap.min.css (kept for its grid, utilities and the behaviour of its components) and tokens.css.
   Restyles the site's existing markup: type, links, buttons, forms, cards, notes, lists, accordions, tabs, tables,
   page heads, and switches off the old motifs. Owned by the frame/base package: page packages override in their own
   pages-*.css under a page-scoped selector, never here.
   ========================================================================== */

/* ---- fonts: self-hosted Google Fonts (OFL), latin subset ---- */
@font-face { font-family: "Courier Prime"; src: url("../../fonts/redesign/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../../fonts/redesign/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../../fonts/redesign/libre-caslon-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../../fonts/redesign/libre-caslon-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../../fonts/redesign/libre-caslon-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Bootstrap's variables, set to this design ---- */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-body);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-bg);
  --bs-emphasis-color: var(--color-ink);
  --bs-secondary-color: var(--color-muted);
  --bs-tertiary-color: var(--color-muted);
  --bs-secondary-bg: var(--color-surface);
  --bs-tertiary-bg: var(--color-surface);
  --bs-heading-color: var(--color-ink);
  --bs-link-color: var(--color-accent-text);
  --bs-link-color-rgb: 94, 26, 42;
  --bs-link-hover-color: var(--color-ink);
  --bs-link-hover-color-rgb: 30, 36, 48;
  --bs-link-decoration: underline;
  --bs-border-width: 1px;
  --bs-border-color: var(--color-line);
  --bs-border-color-translucent: var(--color-line-soft);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--color-ink);
  --bs-form-invalid-color: var(--color-ink);
  --bs-form-invalid-border-color: var(--color-ink);
  --bs-form-valid-color: var(--color-ink);
  --bs-form-valid-border-color: var(--color-line);
  --bs-highlight-bg: var(--color-surface);
  --bs-code-color: var(--color-ink);
  --bs-gutter-x: var(--gutter);
}

/* ---- document ---- */
html { background: var(--color-bg); color: var(--color-ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--weight-body) var(--text-body) / var(--leading-body) var(--font-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; border-radius: var(--radius-image); }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---- type ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--color-ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--text-page-title); line-height: var(--leading-h1); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); }
h5, h6 { font-size: var(--text-body); }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
li { max-width: var(--measure); }
strong, b { font-weight: var(--weight-bold); }
small, .small { font-size: var(--text-small); line-height: var(--leading-small); }
.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--color-ink); max-width: 34em; }
.mute, .text-muted { color: var(--color-muted) !important; }
hr { border: 0; border-top: 1px solid var(--color-line-soft); opacity: 1; margin: var(--sp-6) 0; }
code, kbd, samp { font-family: var(--font-label); font-size: 0.94em; color: var(--color-ink); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
figcaption { font-size: var(--text-small); color: var(--color-muted); }
blockquote { margin: 0 0 var(--sp-5); }
/* the typed face for labels, numbers and metadata */
.typed, .label { font-family: var(--font-label); font-weight: var(--weight-label); font-size: var(--text-caption); line-height: var(--leading-label); letter-spacing: 0; }
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ---- links ---- */
a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* (16 Oct) no site-wide a:visited colour: it outranked the button and header link colours, so a visited "Describe your
   situation" or "Get matched" button showed oxblood text on its oxblood fill. Plain links already get --color-accent-text
   from the a rule above in both states, so visited links now look exactly like unvisited ones. */
a:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
/* the second action on a screen: a Caslon italic text link with a brass underline and an arrow, never an outlined
   button */
.link-arrow {
  display: inline;
  padding-block: 12px; /* a 44 px tap height without changing the line */
  font: italic 400 var(--text-body) / 1.3 var(--font-body);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.link-arrow:visited { color: var(--color-ink); }
.link-arrow:hover { color: var(--ox); text-decoration-color: var(--ox); text-decoration-thickness: 1px; }
.link-arrow svg { display: inline-block; vertical-align: -1px; margin-left: 0.45em; color: var(--ox); transition: transform 0.18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow svg, .btn svg { width: 20px; height: 12px; flex: none; stroke-width: 1.5; }
.link-arrow svg path, .btn svg path { stroke-linecap: square; stroke-linejoin: miter; }
.link-arrow.light { color: var(--color-ink); }

/* ---- layout: the 1320 px frame, Bootstrap's 12 columns with 24 px gutters, and a CSS grid for new blocks ---- */
.container, .container-lg, .container-xl, .container-xxl {
  --bs-gutter-x: var(--gutter);
  max-width: calc(var(--container) + 2 * var(--margin));
  padding-inline: var(--margin);
}
@media (max-width: 991.98px) { .g-5, .gx-5 { --bs-gutter-x: var(--sp-5); } }
.grid-12 { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
.grid-12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 761px) {
  .grid-12 > .span-3 { grid-column: span 3; }
  .grid-12 > .span-4 { grid-column: span 4; }
  .grid-12 > .span-5 { grid-column: span 5; }
  .grid-12 > .span-6 { grid-column: span 6; }
  .grid-12 > .span-7 { grid-column: span 7; }
  .grid-12 > .span-8 { grid-column: span 8; }
  .grid-12 > .span-9 { grid-column: span 9; }
}
main section { padding-block: clamp(40px, 28px + 3vw, 72px); }
.section-tight { padding-block: clamp(32px, 24px + 2vw, 48px) !important; }
.sticky-aside { align-self: flex-start; }
@media (min-width: 992px) { .sticky-aside { position: sticky; top: var(--sp-5); } }

/* ---- the tab: a typed label in a 1 px ink outline with its top-left corner cut. Inactive tabs sit on the
   surface; a joined tab (.is-joined: section openers) takes the page colour and covers the rule under it, so it joins
   the page below; the current or open tab (.active, .show, .is-current, aria-current) also carries the accent band.
   Drawn with two layers because clip-path would cut a real border: ::before = the outline, ::after = the fill. ---- */
.tab, .nav-tabs .nav-link {
  --tab-fill: var(--color-surface);
  --tab-top: var(--tab-fill);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tab-height);
  padding: 0 var(--sp-4) 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: var(--weight-label) var(--text-small) / 1.2 var(--font-label);
  text-decoration: none;
  white-space: nowrap;
}
.tab::before, .tab::after,
.nav-tabs .nav-link::before, .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.tab::before, .nav-tabs .nav-link::before { inset: 0; background: var(--color-ink); clip-path: var(--cut-sm); }
.tab::after, .nav-tabs .nav-link::after {
  inset: 1px 1px 1px 1px;
  background: linear-gradient(var(--tab-top) 0 3px, var(--tab-fill) 3px);
  clip-path: var(--cut-sm-in);
}
.tab:hover, .nav-tabs .nav-link:hover { --tab-fill: var(--color-bg); color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tab.is-joined,
.tab.is-current, .tab.active, .tab.show, .tab[aria-current="page"], .nav-tabs .nav-link.active { --tab-fill: var(--color-bg); }
.tab.is-current, .tab.active, .tab.show, .tab[aria-current="page"], .nav-tabs .nav-link.active { --tab-top: var(--color-accent); font-weight: 700; }
.tab.is-joined::after,
.tab.is-current::after, .tab.active::after, .tab.show::after, .tab[aria-current="page"]::after, .nav-tabs .nav-link.active::after { bottom: 0; }
.tab:focus-visible, .nav-tabs .nav-link:focus-visible { outline: 3px solid var(--color-ink); outline-offset: -6px; box-shadow: none; }
.nav-link:focus, .nav-link:focus-visible { box-shadow: none; }
.tab .tab-key { color: var(--color-accent-text); font-weight: 700; }

/* Bootstrap tabs (about, FAQ, practice areas): a row of index tabs standing on the rule of the panel below */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-radius: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-ink);
  padding-top: var(--sp-1);
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex: none; max-width: none; }
.nav-tabs .nav-link { margin-bottom: -1px; }
.nav-tabs .nav-link.active { color: var(--color-ink); background: transparent; }
.tab-content { padding-top: var(--sp-6); }

/* ---- section opener: a full-width ink rule with a tab rising from it, stepped across the width section by section
   (markup: <div class="tabdiv" style="--step:2"><span class="tab is-joined"><span class="tab-key">3</span> Label</span></div>) ---- */
.tabdiv {
  --step: 0;
  --steps: 6;
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--color-ink);
  margin-bottom: var(--sp-6);
  padding-left: calc((100% - 220px) * var(--step) / var(--steps));
}
.tabdiv .tab { margin-bottom: -1px; }
@media (max-width: 760px) { .tabdiv { padding-left: calc((100% - 180px) * var(--step) / var(--steps)); } }

/* ---- the cut corner for boxes with a real fill and border (buttons, cards, notes): the top-left corner is painted
   over with the colour behind the box (--cut-bg; a card sets it for what it holds) and the border continues along the
   cut as a 1 px diagonal. The box keeps its real background, border and focus ring. ---- */
:root { --cut-bg: var(--color-bg); }

/* ---- buttons: Courier 700, 48 px, accent fill, top-left corner cut. One filled button per screen; the second action
   is a .link-arrow ---- */
.btn {
  --bs-btn-padding-x: 22px;
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: var(--font-button);
  --bs-btn-font-size: var(--text-body);
  --bs-btn-font-weight: var(--weight-button);
  --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: 0;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 0.7;
  --btn-fill: transparent;
  --btn-edge: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-height);
  border: 1px solid var(--btn-edge);
  border-radius: 0;
  background-color: var(--btn-fill);
  box-shadow: none;
  text-decoration: none;
  transition: none;
}
.btn::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--chamfer);
  height: var(--chamfer);
  background: linear-gradient(135deg, var(--cut-bg) calc(50% - 0.5px), var(--btn-edge) calc(50% - 0.5px), var(--btn-edge) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}
.btn:hover, .btn:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn:active, .btn.active, .btn:first-child:active { transform: none; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; box-shadow: none; }
/* THE button ("inset rule"): an oxblood rectangle, square, 54 px, Caslon 700 in parchment, with a 1 px brass hairline
   4 px inside its edge (two inset shadows: 4 px of the fill, then 1 px of brass). Hover: deeper fill, lighter rule.
   Never two of them side by side. */
.btn-brass, .btn-ink, .btn-primary {
  --btn-fill: var(--ox);
  --btn-edge: var(--ox);
  --btn-rule: var(--brass);
  --bs-btn-padding-x: 28px;
  --bs-btn-font-size: 18px;
  --bs-btn-color: var(--parchment);
  --bs-btn-bg: var(--ox);
  --bs-btn-border-color: var(--ox);
  --bs-btn-hover-color: var(--parchment);
  --bs-btn-hover-bg: var(--ox-deep);
  --bs-btn-hover-border-color: var(--ox-deep);
  --bs-btn-active-color: var(--parchment);
  --bs-btn-active-bg: var(--ox-deep);
  --bs-btn-active-border-color: var(--ox-deep);
  --bs-btn-disabled-color: var(--parchment);
  --bs-btn-disabled-bg: var(--ox);
  --bs-btn-disabled-border-color: var(--ox);
  min-height: var(--button-height);
  color: var(--parchment);
  letter-spacing: 0.005em;
  box-shadow: inset 0 0 0 4px var(--btn-fill), inset 0 0 0 5px var(--btn-rule);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-brass:hover, .btn-ink:hover, .btn-primary:hover,
.btn-brass:focus-visible, .btn-ink:focus-visible, .btn-primary:focus-visible,
.btn-brass:active, .btn-ink:active, .btn-primary:active {
  --btn-fill: var(--ox-deep);
  --btn-rule: var(--brass-light);
  color: var(--parchment);
  text-decoration: none;
  box-shadow: inset 0 0 0 4px var(--btn-fill), inset 0 0 0 5px var(--btn-rule);
}
.btn-brass:disabled, .btn-ink:disabled, .btn-primary:disabled { box-shadow: inset 0 0 0 4px var(--btn-fill), inset 0 0 0 5px var(--btn-rule); }
.btn-brass svg, .btn-ink svg, .btn-primary svg { color: var(--brass-light); transition: transform 0.18s ease; }
.btn-brass:hover svg, .btn-ink:hover svg, .btn-primary:hover svg { transform: translateX(3px); }
/* the outlined button: for tools (filters, share), never beside the filled one */
.btn-outline-ink, .btn-outline-secondary {
  --btn-fill: var(--color-bg);
  --btn-edge: var(--color-line);
  --bs-btn-color: var(--color-ink);
  --bs-btn-bg: var(--color-bg);
  --bs-btn-border-color: var(--color-line);
  --bs-btn-hover-color: var(--color-ink);
  --bs-btn-hover-bg: var(--color-surface);
  --bs-btn-hover-border-color: var(--color-ink);
  --bs-btn-active-color: var(--color-ink);
  --bs-btn-active-bg: var(--color-surface);
  --bs-btn-active-border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-outline-ink:hover, .btn-outline-ink.active { --btn-fill: var(--color-surface); --btn-edge: var(--color-ink); }
.btn-lg { --bs-btn-padding-x: 30px; --bs-btn-font-size: 18px; min-height: var(--button-height); }
.btn-sm { --bs-btn-padding-x: 16px; --bs-btn-font-size: var(--text-small); min-height: 44px; }
.btn .spinner-border { width: 16px; height: 16px; border-width: 2px; }
.btn-close {
  --bs-btn-close-color: var(--color-ink);
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' stroke='%231e2430' stroke-width='1.6' stroke-linecap='square'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  --bs-btn-close-focus-opacity: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  background-size: 16px 16px;
  border: 1px solid var(--color-line);
  border-radius: 0;
}
.btn-close:hover { border-color: var(--color-ink); background-color: var(--color-surface); }
.btn-close:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; box-shadow: none; }

/* ---- cards and notes. A card is an index card: 1 px edge, the top-left corner cut, and a second sheet 6 px behind
   it (the layered-paper depth). A note is the same card without the sheet. Text stays ink on both. ---- */
.card-sheet, .form-card, .side-card {
  --sheet-fill: var(--color-surface);
  position: relative;
  background: var(--sheet-fill);
  border: var(--border-card);
  border-radius: 0;
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
.note-card, .alert-note, .callout, .form-aside .note {
  --sheet-fill: var(--color-surface);
  position: relative;
  background: var(--sheet-fill);
  border: var(--border-card);
  border-radius: 0;
  padding: var(--sp-4) var(--sp-5);
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.card-sheet::before, .form-card::before, .side-card::before,
.note-card::before, .alert-note::before, .callout::before, .form-aside .note::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--chamfer);
  height: var(--chamfer);
  background: linear-gradient(135deg, var(--cut-bg) calc(50% - 0.5px), var(--color-line) calc(50% - 0.5px), var(--color-line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}
/* what a card holds sits on the card's fill */
.card-sheet > *, .form-card > *, .side-card > *, .note-card > *, .alert-note > *, .callout > *, .form-aside .note > * { --cut-bg: var(--sheet-fill); }
/* the dialog sits on a dark backdrop, so its cut is clipped instead: two layers (edge, fill), the sheet behind */
.modal-content {
  --sheet-fill: var(--color-bg);
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-card);
}
.modal-content::before, .modal-content::after { content: ""; position: absolute; pointer-events: none; }
.modal-content::before { inset: 0; z-index: -2; background: var(--color-line); clip-path: var(--cut); }
.modal-content::after { inset: 1px; z-index: -1; background: var(--sheet-fill); clip-path: var(--cut-in); }
.alert { --bs-alert-bg: transparent; --bs-alert-border-color: transparent; --bs-alert-border-radius: 0; --bs-alert-color: var(--color-ink); --bs-alert-padding-x: var(--sp-5); --bs-alert-padding-y: var(--sp-4); }
.alert-note, .callout { margin-block: var(--sp-5); }
.callout p, .alert-note p { margin: 0; color: var(--color-ink); }
.side-card { margin-bottom: var(--sp-6); }
.side-card h3, .side-card h4 { font-size: var(--text-h4); margin-bottom: var(--sp-3); }
.side-card h4 { font-family: var(--font-label); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-ink); }
.side-card.cta { --sheet-fill: var(--color-surface); color: var(--color-ink); }
.side-card.cta h3, .side-card.cta p { color: var(--color-ink); }

/* ---- forms: label above the field (Caslon 700, 15 px), 52 px fields, 1 px line border, square; focus = 3 px ink
   outline; an error is a sentence under the field starting with "Error:" with a 3 px oxblood rule ---- */
.form-card { --sheet-fill: var(--color-surface); padding: clamp(20px, 3vw, 32px); }
.form-card h3 { font-size: var(--text-h3); margin-bottom: var(--sp-5); }
.form-label, label.form-label {
  display: block;
  margin-bottom: 6px;
  font: var(--weight-button) var(--text-small) / 1.3 var(--font-button);
  color: var(--color-ink);
}
.form-text { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: var(--text-caption); color: var(--color-muted); }
.form-control, .form-select {
  min-height: var(--control-height);
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-input);
  background-color: var(--white);
  color: var(--color-ink);
  font: 400 var(--text-body) / 1.4 var(--font-body);
  box-shadow: none;
}
.form-card .form-control, .form-card .form-select, .card-sheet .form-control, .card-sheet .form-select { background-color: var(--color-surface); }
.form-control::placeholder { color: var(--color-muted); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M2 2l10 10M12 2L2 12' stroke='%231e2430' stroke-width='1.6' stroke-linecap='square'/%3e%3c/svg%3e") center / 14px 14px no-repeat;
}
.form-control:hover, .form-select:hover { border-color: var(--color-ink); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-ink);
  background-color: var(--color-bg);
  color: var(--color-ink);
  box-shadow: none;
  outline: 3px solid var(--color-ink);
  outline-offset: 0;
}
.form-control[readonly] { background-color: var(--color-surface); }
textarea.form-control { min-height: 132px; resize: vertical; }
.form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath d='M1 1.5h10L6 7z' fill='%231e2430'/%3e%3c/svg%3e");
  background-position: right 14px center;
  background-size: 11px 8px;
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--color-ink);
  border-width: 2px;
  background-image: none;
  padding-right: 12px;
}
.form-select.is-invalid { padding-right: 40px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath d='M1 1.5h10L6 7z' fill='%231e2430'/%3e%3c/svg%3e"); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: none; }
.invalid-feedback {
  margin-top: var(--sp-2);
  padding: 2px 0 2px var(--sp-3);
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink);
  font: 400 var(--text-small) / 1.4 var(--font-body);
}
.invalid-feedback::before { content: "Error: "; font-weight: 700; }
.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--color-ink);
  border-radius: 0;
  background-color: var(--color-bg);
}
.form-check-input[type="checkbox"] { border-radius: 0; }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-check-input:focus { box-shadow: none; border-color: var(--color-ink); }
.form-check-input:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
/* consent: the checkbox and the full text from the admin, readable at 15 px */
.consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--color-line-soft);
  font: 400 var(--text-small) / var(--leading-small) var(--font-body);
  color: var(--color-ink);
  cursor: pointer;
}
.consent > span { max-width: 38em; }
.consent.is-invalid { border-bottom-color: var(--color-ink); box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--sp-3); }
.consent strong { color: var(--color-ink); }
.consent a { color: var(--color-accent-text); }
[data-consent-error] { display: none; }
[data-consent-error].show { display: block; margin: 0 0 var(--sp-3); }
.form-foot { margin: var(--sp-3) 0 0; font: italic 400 var(--text-small) / 1.45 var(--font-body); color: var(--color-muted); }
.success { display: none; padding: var(--sp-2) 0; }
.success svg { display: none; }
.success h3 { font-size: var(--text-h3); }
.form-card.done form { display: none; }
.form-card.done .success { display: block; }
.input-group > .form-control { border-right: 0; }
.input-group-text { border: 1px solid var(--color-line); border-left: 0; border-radius: 0; background: var(--color-bg); color: var(--color-muted); font-family: var(--font-label); }
.form-card hr { border-top-color: var(--color-line-soft) !important; opacity: 1 !important; }

/* ---- lists ---- */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--color-ink);
  --bs-list-group-border-color: var(--color-line-soft);
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-radius: 0;
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-item-padding-y: var(--sp-3);
  --bs-list-group-action-hover-bg: transparent;
  --bs-list-group-action-hover-color: var(--color-ink);
  --bs-list-group-active-bg: transparent;
  --bs-list-group-active-color: var(--color-ink);
  --bs-list-group-active-border-color: var(--color-line-soft);
}
.list-group-item { border-left: 0; border-right: 0; }
.list-group-item.active { font-weight: 700; box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--sp-3); }
.list-group-numbered { counter-reset: section; }
.list-group-numbered > .list-group-item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; }
.list-group-numbered > .list-group-item::before {
  content: counter(section, decimal-leading-zero);
  counter-increment: section;
  font: 700 var(--text-small) / 1 var(--font-label);
  color: var(--color-ink);
}
.checklist { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.checklist > li { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-line-soft); }
.checklist > li:first-child { border-top: 1px solid var(--color-line-soft); }
.checklist .tick { display: none; }
.checklist strong { display: block; font-family: var(--font-heading); font-size: var(--text-body); }
.check-grid { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.check-grid li { position: relative; padding: var(--sp-2) 0 var(--sp-2) 1.6em; border-bottom: 1px solid var(--color-line-soft); }
.check-grid li::before { content: "\2013"; position: absolute; left: 0; font-family: var(--font-label); color: var(--color-muted); }
.check-grid svg { display: none; }
.badge { --bs-badge-padding-x: 6px; --bs-badge-padding-y: 2px; --bs-badge-font-size: var(--text-caption); --bs-badge-font-weight: 400; --bs-badge-color: var(--color-ink); --bs-badge-border-radius: 0; font-family: var(--font-label); background: var(--color-surface) !important; color: var(--color-ink) !important; border: 1px solid var(--color-line-soft); }

/* ---- questions and answers: ruled rows, typed questions, + / - in the margin ---- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--color-ink);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: var(--sp-4);
  --bs-accordion-btn-color: var(--color-ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-color: var(--color-ink);
  --bs-accordion-active-bg: transparent;
  border-top: 1px solid var(--color-ink);
}
.accordion-item { border: 0; border-bottom: 1px solid var(--color-line-soft); background: transparent; }
.accordion-header { margin: 0; }
.accordion-button {
  gap: var(--sp-4);
  font: 700 var(--text-h4) / 1.3 var(--font-subhead);
  color: var(--color-ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.accordion-button:not(.collapsed) { color: var(--color-ink); background: transparent; box-shadow: none; }
.accordion-button::after {
  content: "+";
  flex: none;
  width: 1.2em;
  height: auto;
  margin-left: auto;
  background: none;
  transform: none;
  transition: none;
  font: 400 24px / 1 var(--font-label);
  text-align: center;
  color: var(--color-ink);
}
.accordion-button:not(.collapsed)::after { content: "\2013"; background: none; transform: none; }
.accordion-button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.accordion-body { padding-bottom: var(--sp-5); max-width: var(--measure); }
.accordion-body p:last-child { margin-bottom: 0; }

/* ---- tables: header in the typed face over a 2 px ink rule, 1 px rows, numbers right; wide tables scroll ---- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; margin: 0 0 var(--sp-5); }
th, td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--color-line-soft); text-align: left; vertical-align: top; }
thead th { font: 700 var(--text-small) / 1.3 var(--font-label); border-bottom: 2px solid var(--color-ink); }
td.num, th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ---- breadcrumb, pagination, tooltip, modal ---- */
.breadcrumb {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-divider-color: var(--color-muted);
  --bs-breadcrumb-item-padding-x: var(--sp-2);
  --bs-breadcrumb-item-active-color: var(--color-ink);
  --bs-breadcrumb-margin-bottom: var(--sp-4);
  font: 400 var(--text-caption) / 1.4 var(--font-label);
}
.breadcrumb a { color: var(--color-muted); text-decoration: underline; text-decoration-thickness: 1px; }
.breadcrumb a:hover { color: var(--color-ink); }
.pagination {
  --bs-pagination-color: var(--color-ink);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: var(--color-line);
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--color-ink);
  --bs-pagination-hover-bg: var(--color-surface);
  --bs-pagination-hover-border-color: var(--color-ink);
  --bs-pagination-focus-color: var(--color-ink);
  --bs-pagination-focus-bg: var(--color-surface);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--color-ink);
  --bs-pagination-active-bg: var(--color-bg);
  --bs-pagination-active-border-color: var(--color-ink);
  --bs-pagination-disabled-color: var(--color-muted);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--color-line-soft);
  gap: var(--sp-1);
  font-family: var(--font-label);
}
.page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.page-item.active .page-link { font-weight: 700; box-shadow: inset 0 -3px 0 var(--color-accent); }
.page-link:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.tooltip {
  --bs-tooltip-bg: var(--color-ink);
  --bs-tooltip-color: var(--color-bg);
  --bs-tooltip-border-radius: 0;
  --bs-tooltip-font-size: var(--text-caption);
  --bs-tooltip-opacity: 1;
  font-family: var(--font-label);
}
.term { border-bottom: 1px dotted var(--color-ink); cursor: help; text-decoration: none; }
.modal {
  --bs-modal-bg: transparent;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0;
  --bs-modal-inner-border-radius: 0;
  --bs-modal-box-shadow: none;
  --bs-modal-padding: var(--sp-5);
  --bs-modal-header-padding: var(--sp-5);
  --bs-modal-header-border-color: var(--color-line-soft);
}
.modal-backdrop { --bs-backdrop-bg: var(--color-ink); --bs-backdrop-opacity: 0.55; }
.offcanvas-backdrop { background-color: var(--color-ink); }
.offcanvas-backdrop.show { opacity: 0.55; }
.modal-content { --sheet-fill: var(--color-bg); padding: 0; }
.modal-header { align-items: flex-start; gap: var(--sp-4); }
.modal-title { font: 700 var(--text-h3) / 1.2 var(--font-heading); }
/* the close button sits in the top-right corner (Bootstrap pushes it there with an auto margin), and the numbered rows
   of a dialog run to its edge like the header rule and the note under them */
.modal-header .btn-close { margin: 0 0 0 auto; padding: 0; flex: none; }
.modal-body .list-group-item { max-width: none; }

/* ---- inner page heads: crumbs, h1 and lede on the page; no photo, gradient or split ---- */
.page-head, .article-head { padding: var(--sp-7) 0 var(--sp-6); background: none; border: 0; color: var(--color-ink); }
.page-head h1, .article-head h1 { font-size: var(--text-page-title); max-width: 28ch; margin-bottom: var(--sp-4); }
.page-head .lede { margin-bottom: 0; }
.has-bg { background-image: none !important; background-color: transparent !important; color: var(--color-ink) !important; }
.has-bg::before, .has-bg::after { content: none !important; }
.has-bg h1, .has-bg .lede, .has-bg .meta, .has-bg .breadcrumb-item.active { color: var(--color-ink) !important; }
.has-bg .breadcrumb a, .has-bg .breadcrumb-item::before { color: var(--color-muted) !important; }
.page-head.split { padding-bottom: var(--sp-6); overflow: visible; }

/* ---- the old look, switched off until each page package rebuilds its markup ---- */
.eyebrow { display: block; margin: 0 0 var(--sp-2); font: 400 var(--text-small) / 1.4 var(--font-label); letter-spacing: 0; text-transform: none; color: var(--color-muted); }
.eyebrow::before { content: none; }
.hl { background: none; white-space: normal; }
.hl::after { content: none; }
.rv, .rv.in { opacity: 1; transform: none; transition: none; }
.bg-paper2, .bg-forest, .cta-band { background: transparent; color: var(--color-ink); }
.bg-forest h2, .bg-forest h3, .cta-band h2, .cta-band p { color: var(--color-ink); }
.quote-card, .honest { transform: none; box-shadow: none; border-radius: 0; background: transparent; }
.pa-kicker, .badge-cat { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 var(--text-small) / 1.4 var(--font-label); color: var(--color-muted); text-transform: none; letter-spacing: 0; }
/* photography is not part of this design (article figures, .art-fig, are content and stay) */
.page-head .photo, img.photo, img.photo-frame, img.rounded-4, .photo-strip, .collage, .hero-photos, .hero-art,
.area-img, .pa-img, .post-card .thumb, .post-feature > img, .article-lead, .recent img { display: none !important; }
/* generic line icons in tiles are not part of it either; marks are typed */
.ic, .pa-facts .fact > svg, .pa-list svg, .trust-row svg, .stamp, .badge-card { display: none !important; }

/* ---- motion and print ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  html, body { background: #fff; }
  .site-header .navbar-nav, .navbar-toggler, .offcanvas, .modal { display: none !important; }
  a { color: inherit; }
}

/* keep a short phrase on one line */
.nw { white-space: nowrap; }