/*
  Amicus Strategies components and layout.
  Reads only the custom properties in tokens.css.
  Breakpoints: 40rem (640px), 60rem (960px), 80rem (1280px).
*/

/* ================= Base ================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  scrollbar-color: var(--green-800) var(--color-recess);
  background: var(--color-ground);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--green-900);
  -webkit-tap-highlight-color: rgb(58 90 64 / 0.12);
}

a, button, input, textarea, label { touch-action: manipulation; }

::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
.site-footer ::selection { background: var(--accent-400); color: var(--green-950); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}
.site-footer :focus-visible { outline-color: var(--color-focus-on-footer); }

strong { font-weight: var(--weight-body-strong); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--green-900);
  color: var(--on-green);
  font-weight: var(--weight-body-medium);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ================= Type roles ================= */

.display {
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display-tight);
}
.title { font-size: var(--step-4); line-height: 1.06; letter-spacing: var(--tracking-display-tight); }
.title--sm { font-size: var(--step-3); line-height: 1.12; letter-spacing: var(--tracking-display); }
.subtitle { font-size: var(--step-2); line-height: var(--leading-snug); }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 40ch;
  color: var(--color-text);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.muted { color: var(--color-text-muted); }
.page-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-top: var(--space-2); font-weight: var(--weight-body-medium); }
.page-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Signwriter capitals: the board's lettering, used for references and small headings. */
.caps {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.3;
}

.num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.fine { font-size: var(--step--2); line-height: 1.5; color: var(--color-text-muted); }

/* ================= Buttons and links ================= */

.button {
  --btn-bg: var(--green-900);
  --btn-fg: var(--on-green);
  --btn-border: var(--green-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0 var(--space-5);
  border: var(--rule-hair) solid var(--btn-border);
  border-radius: var(--radius-1);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
/* States by inversion, never a new colour. */
.button:hover { --btn-bg: transparent; --btn-fg: var(--green-900); }
.button:active { --btn-bg: var(--green-950); --btn-fg: var(--on-green); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button[disabled]:hover { --btn-bg: var(--green-900); --btn-fg: var(--on-green); }

.button--ghost { --btn-bg: transparent; --btn-fg: var(--green-900); }
.button--ghost:hover { --btn-bg: var(--green-900); --btn-fg: var(--on-green); }

/* On a green board the button is stone, and inverts to an outline. */
/* Panels are light now, so the on-board button is the standard primary button. */

.button--sm { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--step--1); }

.button .icon, .link-arrow .icon { width: 1em; height: 1em; flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: var(--weight-body-medium);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.55rem) / 100% 1px no-repeat;
}
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* ================= Header ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-950);
  color: var(--on-green);
}
.site-header :focus-visible { outline-color: var(--color-focus-on-footer); }
.site-header ::selection { background: var(--accent-400); color: var(--green-950); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--green-900);
  line-height: 1;
  padding-block: var(--space-2);
}
.site-header .wordmark { color: var(--on-green); }
.site-header .wordmark__name { font-size: 1.75rem; }
.site-header .wordmark__sub { font-size: 0.8125rem; letter-spacing: 0.46em; color: var(--on-green-muted); }
.site-header .site-nav__list a { color: var(--on-green); }
.site-header .header-cta { --btn-bg: var(--on-green); --btn-fg: var(--green-950); --btn-border: var(--on-green); }
.site-header .header-cta:hover { --btn-bg: transparent; --btn-fg: var(--on-green); }
.site-header .header-cta:active { --btn-bg: var(--stone-200); --btn-fg: var(--green-950); }
.site-header .nav-toggle { color: var(--on-green); }
.wordmark__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  font-size: 1.3125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-right: -0.2em;
}
.wordmark__sub {
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: 0.625rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__list { display: flex; gap: var(--space-6); list-style: none; }
.site-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-body-medium);
  text-decoration: none;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__list a:hover::after { transform: scaleX(1); }
/* The current page is the entry in play: sage underline. */
.site-nav__list a[aria-current]::after { transform: scaleX(1); height: 2px; background: var(--accent-400); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--green-900);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--weight-body-medium);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 1.125rem; height: 0.625rem; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: calc(100% - 1.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

@media (max-width: 59.99rem) {
  .site-header__inner { gap: var(--space-3); }
  .site-header .header-cta { order: 2; }
  .nav-toggle { order: 3; }
  .js .nav-toggle { display: inline-flex; }
  .site-nav { order: 4; }
  /* Without JS the links simply wrap under the wordmark. */
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .site-nav { width: 100%; padding-bottom: var(--space-3); }
  html:not(.js) .site-nav__list { gap: var(--space-5); flex-wrap: wrap; }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: block;
    background: var(--green-950);
    border-bottom: var(--rule-hair) solid var(--green-700);
    padding: var(--space-2) var(--gutter) var(--space-6);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
  }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__list li { border-bottom: var(--rule-hair) solid var(--green-700); }
  .js .site-nav__list a {
    display: flex;
    min-height: 3.5rem;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--step-3);
    letter-spacing: var(--tracking-display);
  }
  .js .site-nav__list a::after { bottom: 0.9rem; right: auto; width: 2.5rem; }
}
@media (max-width: 23.5rem) {
  .header-cta { padding: 0 var(--space-3); }
}

/* ================= Sections ================= */

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-sm); }
.section:not([class*="band"]) + .section:not([class*="band"]) { padding-top: 0; }

.band--board {
  background: var(--color-board);
  color: var(--color-board-text);
}
.band--recess { background: var(--color-recess); }
.band--board .muted { color: var(--color-board-muted); }
.band--board .fine { color: var(--color-board-muted); }

.section-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .section-head--split > :first-child { grid-column: 1 / span 7; }
  .section-head--split > :last-child { grid-column: 8 / span 5; }
}

/* ================= Hero ================= */

.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: stretch;
}
.hero__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); }
.hero__copy .display { max-width: 13ch; }
.hero__copy .lead { max-width: 36ch; }
.hero__photo { aspect-ratio: 4 / 5; max-height: 44rem; }
@media (max-width: 59.99rem) {
  .hero__photo { aspect-ratio: 4 / 3; }
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ================= Two doors: firms and candidates ================= */

.doors__grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 60rem) { .doors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.door {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.door__title { font-size: var(--step-4); line-height: 1.04; letter-spacing: var(--tracking-display-tight); }
.door p:not(.fine) { font-size: var(--step-1); line-height: 1.55; max-width: 34ch; }
.door .actions { margin-top: var(--space-4); }
.door--firm {
  background: var(--color-board);
  color: var(--color-board-text);
  border-top: var(--rule-strong) solid var(--green-900);
}
.door--firm p { color: var(--color-board-muted); }
.door--candidate { background: var(--color-paper); border-top: var(--rule-strong) solid var(--green-900); }

/* ================= Statement ================= */

.statement__text { font-size: var(--step-4); line-height: 1.08; letter-spacing: var(--tracking-display-tight); max-width: 17ch; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.approach { display: grid; }
@media (min-width: 60rem) {
  .approach { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .approach .statement__text { grid-column: 1 / span 5; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + var(--space-7)); }
  .approach .steps { grid-column: 7 / span 6; grid-template-columns: 1fr; border-bottom: 0; }
  .approach .step { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2); padding: var(--space-6) 0; border-left: 0 !important; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .approach .step__num { grid-row: 1 / span 2; font-size: clamp(3rem, 2rem + 2.4vw, 4.5rem); }
}
.statement__text s {
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-700);
  color: var(--color-text-muted);
}

/* ================= Method: three steps ================= */

.steps { list-style: none; display: grid; counter-reset: step; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.step {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding-block: var(--space-6) var(--space-7);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.step__num { font-size: var(--step-num); color: var(--green-900); }
.step__title { font-size: var(--step-2); }
.step__text { color: var(--color-text-muted); max-width: 38ch; }
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .step { padding: var(--space-6) var(--grid-gap) var(--space-7); border-bottom: 0; }
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
  .step + .step { border-left: var(--rule-hair) solid var(--color-rule); }
}

/* ================= Photography ================= */

.photo { margin: 0; position: relative; }
.photo picture { display: block; height: 100%; background: var(--color-recess); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
@media (min-width: 60rem) {
  .photo--wide { aspect-ratio: 21 / 9; }
}
.photo figcaption {
  margin-top: var(--space-3);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-500);
  text-align: right;
}
.photo figcaption a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.photo--wide { margin-bottom: var(--space-section-sm); }
.band--board .photo figcaption { color: var(--color-board-muted); }

/* ================= Figures strip ================= */

.figures { list-style: none; display: grid; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.figure {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.figure .num { font-size: var(--step-num); color: var(--green-900); }
.figure .num sup, .figure .num small { font-size: 0.42em; vertical-align: 0.95em; letter-spacing: 0; margin-left: 0.04em; }
.figure__label { font-size: var(--step-0); line-height: 1.45; max-width: 24ch; }
@media (min-width: 60rem) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .figure { border-bottom: 0; padding: var(--space-6) var(--grid-gap) var(--space-5); }
  .figure:first-child { padding-left: 0; }
  .figure:last-child { padding-right: 0; }
  .figure + .figure { border-left: var(--rule-hair) solid var(--color-rule); }
}
.num.is-placeholder { color: var(--ink-500); text-decoration: underline dashed 1px; text-decoration-color: var(--ink-500); text-underline-offset: 0.12em; }
.figures-note { margin-top: var(--space-5); }

/* ================= Closing call to action ================= */

.closing { padding-block: var(--space-section); }
.closing__grid { display: grid; gap: var(--space-7); }
.closing__title { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: var(--tracking-display-tight); max-width: 14ch; }
.closing__body { display: grid; gap: var(--space-6); align-content: end; }
.closing__body p { color: var(--color-text-muted); max-width: 36ch; font-size: var(--step-1); }
.band--board .closing__body p { color: var(--color-board-muted); }
@media (min-width: 60rem) {
  .closing__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .closing__title { grid-column: 1 / span 8; }
  .closing__body { grid-column: 9 / span 4; }
}

/* ================= Footer ================= */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--step--1);
}
.site-footer .wordmark { color: var(--on-green); }
.site-footer .wordmark__sub { color: var(--color-footer-muted); }
.site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: var(--space-7);
  border-bottom: var(--rule-hair) solid var(--color-footer-rule);
}
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-4); align-content: start; }
.site-footer__brand p { color: var(--color-footer-muted); max-width: 30ch; }
.site-footer h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-footer-muted);
}
.site-footer ul { list-style: none; display: grid; gap: var(--space-1); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 2rem; text-decoration: none; }
.site-footer ul a:hover { text-decoration: underline; text-decoration-color: var(--accent-400); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  color: var(--color-footer-muted);
  font-size: var(--step--2);
}
.site-footer__base a { color: var(--on-green); }
@media (min-width: 60rem) {
  .site-footer__grid { grid-template-columns: 4fr 2fr 2fr 2fr 2fr; }
  .site-footer__brand { grid-column: auto; }
}

/* ================= Page heads (inner pages) ================= */

.page-head { padding-block: clamp(3rem, 1.5rem + 6vw, 7.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.page-head__grid { display: grid; gap: var(--space-6); }
.page-head .display { max-width: 14ch; }
@media (min-width: 60rem) {
  .page-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .page-head__grid > :first-child { grid-column: 1 / span 7; }
  .page-head__grid > :last-child { grid-column: 8 / span 5; }
}

.breadcrumb { margin-bottom: var(--space-6); font-size: var(--step--1); color: var(--color-text-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--stone-300); }
.band--board .breadcrumb { color: var(--color-board-muted); }
.band--board .breadcrumb li + li::before { color: var(--color-board-rule); }

/* ================= About ================= */

.placements { display: grid; gap: var(--grid-gap); }
@media (min-width: 60rem) { .placements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.placement {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background: var(--color-paper);
  border-top: var(--rule-strong) solid var(--green-900);
}
.placement__head { display: grid; gap: var(--space-3); }
.placement__mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  aspect-ratio: 4 / 5;
  background: var(--color-board);
  color: var(--green-900);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}
.placement__name { font-size: var(--step-4); line-height: 1; letter-spacing: var(--tracking-display-tight); }
.placeholder-note {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border: var(--rule-hair) dashed var(--ink-500);
  font-size: var(--step--2);
  color: var(--color-text-muted);
}
.band--board .placeholder-note { border-color: var(--color-board-muted); color: var(--color-board-muted); }

.fraud { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) {
  .fraud { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .fraud__head { grid-column: 1 / span 5; }
  .fraud__body { grid-column: 7 / span 6; }
}
.fraud__head { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 60rem) { .fraud__head { position: sticky; top: calc(var(--header-h) + var(--space-7)); align-self: start; } }
.fraud__body { display: grid; gap: var(--space-8); }
.fraud__block { display: grid; gap: var(--space-4); }
.fraud__block h3 { font-size: var(--step-2); }
.never { list-style: none; border-top: var(--rule-hair) solid var(--color-board-rule); }
.never li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-bottom: var(--rule-hair) solid var(--color-board-rule); }
.never .icon { width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--green-900); }
.never--do .icon { color: var(--ink-500); }
.fraud__report { padding: var(--space-5); border: var(--rule-hair) solid var(--color-board-rule); }

/* ================= Roles board ================= */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); }
.filters__label { margin-right: var(--space-2); font-size: var(--step--1); color: var(--color-text-muted); }
.chip {
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: var(--rule-hair) solid var(--ink-500);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-body-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--green-900); }
.chip[aria-pressed="true"] { background: var(--green-900); border-color: var(--green-900); color: var(--on-green); }
.filters__count { margin-left: auto; font-size: var(--step--1); color: var(--color-text-muted); }
html:not(.js) .filters { display: none; }

.role-board {
  list-style: none;
  padding: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  background: var(--color-paper);
  color: var(--color-text);
  border-top: var(--rule-strong) solid var(--green-900);
}
.role-board > li + li { border-top: var(--rule-hair) solid var(--color-board-rule); }
.role-board > li[hidden] { display: none; }
.role-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-5);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
  margin-inline: calc(clamp(0.5rem, 0.2rem + 1vw, 1.25rem) * -1);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.role-entry__ref { grid-column: 1; color: var(--accent-700); }
.role-entry__title { grid-column: 1; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-3); line-height: 1.1; letter-spacing: var(--tracking-display); }
.role-entry__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--step--1); font-weight: var(--weight-body-medium); }
.role-entry__meta span + span::before { content: ""; display: inline-block; width: 1px; height: 0.8em; margin-right: var(--space-4); background: var(--color-board-rule); vertical-align: -0.05em; }
.role-entry__hook { grid-column: 1; color: var(--color-board-muted); max-width: 60ch; }
.role-entry__go { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: var(--rule-hair) solid var(--color-board-rule); border-radius: 50%; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard); }
.role-entry__go .icon { width: 1.1rem; height: 1.1rem; }
/* Inversion on hover: the entry in play turns to stone. */
.role-entry:hover, .role-entry:focus-visible { background: var(--color-board); color: var(--ink-900); outline-offset: -2px; }
.role-entry:hover .role-entry__ref, .role-entry:focus-visible .role-entry__ref { color: var(--accent-700); }
.role-entry:hover .role-entry__hook, .role-entry:focus-visible .role-entry__hook { color: var(--ink-600); }
.role-entry:hover .role-entry__go { border-color: var(--green-900); transform: translateX(4px); }
@media (min-width: 60rem) {
  .role-entry { grid-template-columns: 8rem minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--grid-gap); }
  .role-entry__ref { grid-column: 1; grid-row: 1 / span 2; padding-top: 0.55rem; }
  .role-entry__title { grid-column: 2; grid-row: 1; }
  .role-entry__meta { grid-column: 2; grid-row: 2; }
  .role-entry__hook { grid-column: 3; grid-row: 1 / span 2; padding-top: 0.35rem; }
  .role-entry__go { grid-column: 4; grid-row: 1 / span 2; }
}
.roles-empty { padding: var(--space-6) 0 0; color: var(--color-text-muted); }

.unlisted { display: grid; gap: var(--space-5); padding-top: var(--space-8); }
@media (min-width: 60rem) {
  .unlisted { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .unlisted > :first-child { grid-column: 1 / span 7; }
  .unlisted > :last-child { grid-column: 9 / span 4; justify-self: start; }
}

/* ================= Role detail ================= */

.role-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.role-head h1 { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: var(--tracking-display-tight); max-width: 16ch; }
.role-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-top: var(--rule-hair) solid var(--color-board-rule);
}
.role-facts > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--rule-hair) solid var(--color-board-rule); }
.role-facts dt { font-size: 0.75rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-board-muted); font-family: var(--font-body); font-weight: var(--weight-body-medium); }
.role-facts dd { margin-top: var(--space-1); font-size: var(--step-1); }
@media (min-width: 60rem) {
  .role-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .role-facts > div + div { padding-left: var(--space-5); border-left: var(--rule-hair) solid var(--color-board-rule); }
}

.role-body { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) {
  .role-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .role-body__main { grid-column: 1 / span 7; }
  .role-body__aside { grid-column: 9 / span 4; }
}
.role-body__main { display: grid; gap: var(--space-8); }
.role-section { display: grid; gap: var(--space-4); }
.role-section h2 { font-size: var(--step-3); }
.role-section p, .role-section li { max-width: var(--measure); }
.role-section ul { list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.role-section ul li { padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: var(--rule-hair) solid var(--color-rule); position: relative; }
.role-section ul li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-4) + 0.72em); width: 0.875rem; height: 1px; background: var(--ink-500); }
.role-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-paper);
  border-top: var(--rule-strong) solid var(--green-900);
}
.role-aside dl { display: grid; gap: var(--space-3); font-size: var(--step--1); }
.role-aside dl div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--rule-hair) solid var(--color-rule); }
.role-aside dt { color: var(--color-text-muted); }
.role-aside dd { font-weight: var(--weight-body-medium); text-align: right; }
.role-aside__lead { font-size: var(--step--1); color: var(--color-text-muted); }
.consultant__name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-3); line-height: 1.1; letter-spacing: var(--tracking-display); margin-top: calc(var(--space-3) * -1); }
.role-aside dl.consultant__contact { gap: var(--space-2); }
.role-aside .consultant__contact div { display: grid; gap: 2px; }
.role-aside .consultant__contact dd { text-align: left; overflow-wrap: anywhere; }

.role-close { padding-block: var(--space-section-sm); }
.role-close__grid { display: grid; gap: var(--space-6); }
.role-close h2 { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: var(--tracking-display-tight); max-width: 13ch; }
.role-close p { color: var(--color-board-muted); max-width: 44ch; font-size: var(--step-1); }
@media (min-width: 60rem) {
  .role-close__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .role-close__grid > :first-child { grid-column: 1 / span 7; }
  .role-close__grid > :last-child { grid-column: 9 / span 4; display: grid; gap: var(--space-6); }
}

/* ================= Locations ================= */

.loc-index { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.loc-index a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none;
}
.loc-index a span:first-child { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.loc-index a:hover span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 60rem) { .loc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } .loc-index li + li a { padding-left: var(--space-5); border-left: var(--rule-hair) solid var(--color-rule); } }

.location { padding-block: var(--space-section-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.location__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.location__name { font-size: clamp(3.5rem, 2rem + 7vw, 6rem); line-height: 0.95; letter-spacing: var(--tracking-display-tight); }
.location__body { display: grid; gap: var(--space-6); align-content: center; }
.location__body > p { font-size: var(--step-1); line-height: 1.55; max-width: 40ch; }
.location__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); padding-block: var(--space-5); border-block: var(--rule-hair) solid var(--color-rule); font-size: var(--step--1); }
.location__facts dt { color: var(--color-text-muted); }
.location__facts dd { font-weight: var(--weight-body-medium); }
.location__opps { list-style: none; display: grid; gap: var(--space-1); }
.location__opps a { display: inline-flex; align-items: center; min-height: 2.5rem; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); letter-spacing: var(--tracking-display); }
@media (min-width: 60rem) {
  .location__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .location__photo { grid-column: 1 / span 5; }
  .location__body { grid-column: 7 / span 6; }
  .location:nth-of-type(even) .location__photo { grid-column: 8 / span 5; grid-row: 1; }
  .location:nth-of-type(even) .location__body { grid-column: 1 / span 6; grid-row: 1; }
}

/* ================= Contact ================= */

.contact { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 60rem) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .contact__intro { grid-column: 1 / span 5; }
  .contact__form { grid-column: 7 / span 6; }
}
.contact__intro { display: grid; gap: var(--space-6); align-content: start; }
.contact__details { display: grid; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-6); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__details h2 { font-size: var(--step-2); }
.office-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); font-size: var(--step--1); }
.office-list a { display: inline-flex; align-items: center; min-height: 2.5rem; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); text-decoration: none; }
.office-list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.form {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  background: var(--color-paper);
  border-top: var(--rule-strong) solid var(--green-900);
}
.form__title { font-size: var(--step-3); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: var(--weight-body-medium); font-size: 0.9375rem; }
.field__hint { font-size: var(--step--1); color: var(--color-text-muted); }
.field input, .field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border: var(--rule-hair) solid var(--ink-500);
  border-radius: var(--radius-1);
  background: var(--stone-50);
  color: var(--color-text);
  font: inherit;
  font-size: max(16px, var(--step-0));
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-900); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--green-900); outline-offset: 1px; border-color: var(--green-900); border-radius: var(--radius-1); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-600); opacity: 1; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); outline: 1px solid var(--error); outline-offset: 0; }
.field__error { display: none; align-items: center; gap: var(--space-2); font-size: var(--step--1); font-weight: var(--weight-body-medium); color: var(--error); }
.field.is-invalid .field__error { display: flex; }
.field__error .icon { width: 1rem; height: 1rem; flex: none; }
.form__foot { display: grid; gap: var(--space-4); }
.form__status { font-size: var(--step--1); min-height: 1.5em; }
.form__status[data-state="success"] { color: var(--green-900); font-weight: var(--weight-body-medium); }
.form__status[data-state="error"] { color: var(--error); font-weight: var(--weight-body-medium); }
.form .button[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= Legal shells ================= */

.legal { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) {
  .legal { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .legal__toc { grid-column: 1 / span 3; }
  .legal__body { grid-column: 5 / span 7; }
}
.legal__toc nav { position: sticky; top: calc(var(--header-h) + var(--space-5)); max-height: calc(100vh - var(--header-h) - var(--space-7)); overflow-y: auto; overscroll-behavior: contain; }
.legal__toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; cursor: pointer; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc summary::after { content: "+"; font-size: var(--step-1); color: var(--color-text-muted); }
.legal__toc details[open] summary::after { content: "\2212"; }
.legal__toc h2 { font-family: var(--font-body); font-weight: var(--weight-body-medium); font-size: 0.75rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.legal__toc ol { list-style: none; border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--step--1); }
.legal__toc a { display: block; padding-block: var(--space-2); border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; line-height: 1.4; }
.legal__toc a:hover { color: var(--green-900); text-decoration: underline; }
@media (min-width: 60rem) {
  .legal__toc summary { pointer-events: none; }
  .legal__toc summary::after { content: none; }
}
.legal__body { display: grid; gap: 0; min-width: 0; }
.legal__intro { padding-bottom: var(--space-7); }
.legal__section { padding-block: var(--space-6) var(--space-7); border-top: var(--rule-hair) solid var(--color-rule); }
.legal__section h2 { font-size: var(--step-3); margin-bottom: var(--space-5); }
.legal__prose { font-size: var(--step-0); overflow-wrap: anywhere; }
.legal__prose h3 { font-family: var(--font-body); font-weight: var(--weight-body-strong); font-size: var(--step-0); letter-spacing: 0; margin-top: 1.6em; }
.legal__prose ul, .legal__prose ol { padding-left: 1.4em; }
.legal__prose ul { list-style: disc; }
.legal__prose ol { list-style: lower-roman; }
.legal__prose ul ul { list-style: circle; margin-top: 0.5em; }
.legal__prose li + li { margin-top: 0.6em; }
.legal__prose li > ol, .legal__prose li > ul { margin-top: 0.6em; }
.legal__prose li::marker { color: var(--ink-500); }
.legal__prose a { overflow-wrap: anywhere; }

/* ================= 404 ================= */

.notfound { min-height: 60svh; display: grid; align-content: center; gap: var(--space-6); }

/* ================= Reveal: subtle fade and rise, visible by default ================= */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ================= Print ================= */

@media print {
  .site-header, .site-footer, .filters, .skip-link, .nav-toggle { display: none !important; }
  .band--board, .door--firm, .role-board { background: none !important; color: #000 !important; }
  body { background: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}