/* Kingston Ross Pasnak LLP reference site.
   Whole design system in this one file. Monochrome + logo gold.
   Display type: Source Serif 4, weight 400 only, never uppercase.
   UI/body type: Inter. Motion rides one easing curve (--ease). */

:root {
  --ink: #101112;
  --paper: #ffffff;
  --wash: #f6f5f2;
  --gold: #978030;
  --gold-soft: #cbb26a;
  --muted: #5f5b54;
  --rule: rgba(16, 17, 18, 0.18);
  --rule-dark: rgba(255, 255, 255, 0.22);
  --ease: cubic-bezier(0.39, 0.57, 0.56, 1);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.0625rem;
  padding-top: 80px; /* clears the fixed header */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
}
/* Display serif sets tighter at size: confident, not loose. */
h1, h2 { letter-spacing: -0.015em; }

/* Two-tone device: a <strong> inside a display heading turns gold, never bold. */
h1 strong, h2 strong { color: var(--gold); font-weight: inherit; }

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

/* Header: fixed, hides on scroll down, returns on scroll up (main.js). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: transform 0.3s var(--ease);
}
.site-header.hide { transform: translateY(-105%); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
}
.brand img { height: 44px; width: auto; }
.nav-toggle {
  display: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--ink);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
nav#nav { display: flex; gap: 0.8rem; flex-wrap: nowrap; }
nav#nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
nav#nav a:hover, nav#nav a[aria-current="page"] { color: var(--gold); }

/* Split hero: text left, image bleeding to the right viewport edge,
   vertical gold accent strip between them. */
.hero-split { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; }
.hero-split .wrap { width: 100%; }
.hero-text { width: min(44rem, 48%); padding: 5rem 0; position: relative; z-index: 2; }
.hero-text h1 { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.06; letter-spacing: -0.022em; }
.hero-text .lede { margin-top: 1.4rem; font-size: 1.2rem; color: var(--muted); max-width: 46ch; }
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(16, 17, 18, 0.12), rgba(16, 17, 18, 0.28));
  pointer-events: none;
}
.hero-accent { position: absolute; top: 0; bottom: 0; right: 46%; width: 3.5rem; background: var(--gold); }

/* Cover hero (homepage): full-bleed photo under a transparent header,
   editorial block bottom-left: eyebrow, name, short gold rule, strap.
   Mirrors the SOC 2 deck cover. */
.home { padding-top: 0; }
.hero-cover { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--ink); color: #fff; overflow: hidden; }
.hero-cover .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); }
.hero-cover .hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  /* Heavy on the left where the text sits, easing to the right; plus a
     lift from the bottom. Same recipe as krpbtc.com. */
  background:
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.7) 55%, rgba(10,10,10,.42) 100%),
    linear-gradient(0deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 35%);
}
.hero-cover .wrap { position: relative; z-index: 2; width: 100%; padding-top: 7rem; padding-bottom: 5rem; }
.hero-cover .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.1rem; text-shadow: 0 0 8px rgba(16,17,18,.7); }
.hero-cover h1, .hero-cover .lede { text-shadow: 0 1px 12px rgba(16,17,18,.35); }
.hero-cover h1 { color: #fff; font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: 1.06; letter-spacing: -0.01em; }
.hero-cover .hero-rule { display: block; width: 3.5rem; height: 2px; background: var(--gold); margin: 1.5rem 0 1.2rem; }
.hero-cover .hero-strap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.hero-cover .lede { margin: 0; font-size: 1.15rem; color: rgba(255,255,255,.8); max-width: 46ch; }
.hero-cover .btn { margin-top: 0; background: #fff; color: var(--ink); }
.hero-cover .btn:hover { background: var(--gold); color: #fff; }

/* Header over the cover: transparent and white until the page scrolls (main.js
   toggles .scrolled). Logo is inline SVG on the homepage so its text paths
   can flip to white while the gold mark stays gold. */
.brand svg { height: 44px; width: auto; display: block; }
.site-header { transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.home .site-header:not(.scrolled) { background: transparent; border-bottom-color: transparent; }
.home .site-header:not(.scrolled) nav#nav a, .home .site-header:not(.scrolled) .nav-toggle { color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.6); }
.home .site-header:not(.scrolled) nav#nav a:hover, .home .site-header:not(.scrolled) nav#nav a[aria-current="page"] { color: #fff; }
.home .site-header:not(.scrolled) .brand path:not([fill]) { fill: #fff; }
.home .site-header.scrolled { background: var(--paper); }

/* Page hero (interior pages, no image) */
.page-head { border-bottom: 1px solid var(--rule); background: var(--wash); }
.page-head .wrap { padding-top: 6rem; padding-bottom: 4.5rem; }
.page-head h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; max-width: 24ch; }
.page-head p.lede { max-width: 60ch; margin-top: 1.1rem; color: var(--muted); font-size: 1.15rem; }
.page-head .creds { color: var(--muted); font-size: 0.55em; }

.kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Kicker back-link on service sub-pages: arrow nudges left on hover. */
.kicker a { color: inherit; text-decoration: none; }
.kicker a .arr { display: inline-block; transition: transform 0.3s ease-out; }
.kicker a:hover .arr { transform: translateX(-4px); }

/* Sections. Backgrounds alternate paper / wash / ink; no automatic rules. */
section { padding: 6.5rem 0; }
section h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.15; margin-bottom: 1.5rem; }
section h3 { font-size: 1.35rem; margin: 2rem 0 0.5rem; }
section p { max-width: 68ch; margin-bottom: 1rem; }
section ul { max-width: 68ch; padding-left: 1.2rem; margin-bottom: 1rem; }
section li { margin-bottom: 0.4rem; }
a { color: var(--gold); }

.wash { background: var(--wash); }

/* Structural dark band */
.band-ink { background: var(--ink); color: #fff; position: relative; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; }
.band-ink h1 strong, .band-ink h2 strong { color: var(--gold-soft); }
.band-ink p { color: rgba(255, 255, 255, 0.65); }
.band-ink .kicker { color: var(--gold-soft); }
.band-ink a { color: var(--gold-soft); }
.band-ink .statement { color: #fff; }

/* Vertical gold strip on a section's left edge (use sparingly). */
.edge-gold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5rem;
  background: var(--gold);
}

/* Large serif statement (intro band on the homepage). */
.statement {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  line-height: 1.25;
  max-width: 32ch;
  color: var(--ink);
}
.statement strong { color: var(--gold); font-weight: inherit; }
.band-ink .statement strong { color: var(--gold-soft); }
.statement-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: start; }
.statement-grid .support { margin-top: 1.6rem; color: var(--muted); }

/* Manifesto (homepage): the three words stacked, each on its own gold
   hairline, like a ledger. Last word gold. Copy sits alongside. */
.manifesto-words { display: grid; margin-bottom: 0; line-height: 1; }
.manifesto-words > * { display: block; border-top: 1px solid var(--gold); padding: 0.5em 0 0.55em; font-weight: inherit; }
.manifesto-words strong { color: var(--gold); }
.manifesto-copy { padding-top: 0.35rem; }
.manifesto-copy .support { margin-top: 1.2rem; }

/* Stats row: giant serif over a thin gold top rule. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; }
.stats div { border-top: 1px solid var(--gold); padding-top: 1.2rem; }
.stats strong {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stats span { color: var(--muted); font-size: 1rem; }

/* Card grid: hairline top rule, no boxes. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.5rem; }
.card {
  border-top: 2px solid var(--rule);
  padding-top: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-top-color 0.4s var(--ease);
}
.card:hover { border-top-color: var(--gold); }
.card h3 { font-size: 1.4rem; margin: 0 0 0.6rem; }
.card p { font-size: 0.95rem; color: var(--muted); flex: 1; margin-bottom: 1.2rem; }

/* Service hub cards: the whole card is a link. Thin-line icon + title +
   learn-more label. Same hairline-rule language as .card. */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.5rem; }
.svc-card {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--rule);
  padding-top: 1.6rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-top-color 0.4s var(--ease);
}
.svc-card:hover { border-top-color: var(--gold); }
.svc-card svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--ink);
  margin-bottom: 1.1rem;
  transition: color 0.4s var(--ease);
}
.svc-card:hover svg { color: var(--gold); }
.svc-card h3 { font-size: 1.4rem; margin: 0 0 1.2rem; flex: 1; }
.svc-card:hover .arrow { background-size: 100% 1px; }
.svc-card:hover .arrow .arr { transform: translateX(4px); }

/* Engagement pipeline (Technology): numbered gold nodes joined in sequence,
   set on a soft panel so it reads as a designed figure, not floating marks. */
.pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 1.8rem 0 0.5rem;
  padding: 2.6rem 2.6rem 2.4rem;
  background: var(--wash);
  max-width: none;
}
.pipeline li { position: relative; margin: 0; }
.pipeline .node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}
.pipeline li::before { /* connector to the next node */
  content: "";
  position: absolute;
  top: 18px;
  left: 38px;
  right: 0;
  height: 2px;
  background: var(--gold-soft);
  z-index: 0;
}
.pipeline li:last-child::before { display: none; }
.pipeline .step-t {
  display: block;
  margin-top: 1rem;
  padding-right: 1.4rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* "What we build" modules: each program is a block set off by a top rule,
   a practice eyebrow, and generous spacing, so the two read as distinct. */
.build-item { border-top: 2px solid var(--rule); padding-top: 2rem; margin-top: 3.5rem; }
.build-item:first-of-type { margin-top: 2.5rem; }
.build-item h3 { margin: 0.4rem 0 0.6rem; }
.build-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Capability grid (on-chain tooling): a set of capabilities, not a flow.
   Icon chips on a matching panel, so both figures carry equal weight. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.2rem;
  list-style: none;
  margin: 1.8rem 0 0.5rem;
  padding: 2.6rem;
  background: var(--wash);
  max-width: none;
}
.cap-grid li { display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.cap-grid .cap-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(151, 128, 48, 0.12);
}
.cap-grid svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}
.cap-grid .cap-t {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* Firm timeline (About): milestones on a vertical hairline spine. */
.timeline { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.timeline li {
  position: relative;
  padding: 0 0 2.6rem 2.5rem;
  margin: 0;
  border-left: 1px solid var(--rule);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { /* node */
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline .year {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.timeline .event { display: block; margin-top: 0.35rem; color: var(--muted); }

/* Facts as icon grid (Careers): thin-line icon over each fact. */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 2.5rem;
  max-width: none;
}
.fact-grid li { border-top: 2px solid var(--rule); padding-top: 1.4rem; margin: 0; transition: border-top-color 0.4s var(--ease); }
.fact-grid li:hover { border-top-color: var(--gold); }
.fact-grid svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--ink);
  margin-bottom: 1rem;
  transition: color 0.4s var(--ease);
}
.fact-grid li:hover svg { color: var(--gold); }
.fact-grid p { margin: 0; font-size: 0.98rem; }

/* Arrow link: the default CTA. Growing hairline underline + arrow nudge. */
.arrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease);
}
.arrow:hover { background-size: 100% 1px; }
.arrow .arr { display: inline-block; transition: transform 0.3s ease-out; }
.arrow:hover .arr { transform: translateX(4px); }
.band-ink .arrow { color: #fff; }

/* Filled button: reserved for hero and contact bands (one primary per page). */
.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.9rem 2rem;
  margin-top: 1.5rem;
  transition: background-color 0.4s var(--ease);
}
.btn:hover { background: var(--gold); }

/* Photo wrapper: keeps photos B&W and lays a quiet ink scrim over them. */
.ph { position: relative; display: block; }
.ph img { filter: grayscale(1); }
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(16, 17, 18, 0.12), rgba(16, 17, 18, 0.28));
  pointer-events: none;
}

/* Figure. The img fills the figure so the .ph scrim never outgrows the
   photo and bleeds grey beside it. */
figure.photo { margin: 2rem 0; }
figure.photo img { filter: grayscale(1); width: 100%; }
figure.photo figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.7rem; }

/* People directory */
.people-group { margin-bottom: 4rem; }
.people-group h3 { font-size: 1.4rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; margin-bottom: 1.6rem; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2rem; }
.person-card { text-decoration: none; color: var(--ink); }
.person-card .ph { aspect-ratio: 3 / 4; background: var(--wash); }
.person-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1); }
.person-card strong {
  display: table;
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.1rem;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease);
}
.person-card:hover strong { background-size: 100% 1px; }
.person-card span { color: var(--muted); font-size: 0.82rem; }

/* Person profile page */
.profile { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; align-items: start; }
.profile .headshot { width: 100%; filter: grayscale(1); background: var(--wash); }
/* Long bios: secondary sections collapse behind their headings (native
   <details>, no JS). Core paragraphs and Contact stay visible. */
.bio-more { border-top: 1px solid var(--rule); }
.bio-more:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.bio-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 0; }
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary h3 { margin: 0; font-size: 1.2rem; }
.bio-more summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.5rem; line-height: 1; color: var(--gold); transition: transform 0.3s var(--ease); }
.bio-more[open] summary::after { transform: rotate(45deg); }
.bio-more summary:hover h3 { color: var(--gold); }
.bio-more > :not(summary) { margin-bottom: 1rem; }
.bio-more > :last-child { margin-bottom: 1.4rem; }

/* Definition-style service lists: dt in display serif over a hairline. */
.svc dt {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  margin-top: 2.2rem;
}
.svc dt:first-child { margin-top: 0; }
.svc dd { margin-left: 0; margin-top: 0.4rem; color: var(--muted); max-width: 68ch; }

/* Contact block */
address { font-style: normal; line-height: 1.8; }

/* Named-contacts list: one block per person over a hairline rule. */
.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  max-width: 68rem;
}
.contact-list li { border-top: 1px solid var(--rule); padding-top: 1.1rem; margin: 0; }
.contact-list strong {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}
.contact-list strong a { color: var(--ink); text-decoration: none; }
.contact-list strong a:hover { color: var(--gold); }
.contact-list .role { display: block; color: var(--muted); font-size: 0.9rem; }
.contact-list .reach { display: inline-block; margin-top: 0.6rem; font-size: 0.95rem; }

/* Contact form. Square fields, hairline borders, gold focus. */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: start; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.contact-form .field { margin-bottom: 1.4rem; }
.contact-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.contact-form .optional { color: var(--muted); text-transform: none; letter-spacing: normal; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.3s var(--ease);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.contact-form .btn { border: 0; cursor: pointer; font-family: var(--sans); margin-top: 0.2rem; }

/* Payment page: form beside a reassurance note. */
.pay-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: start; }
.pay-grid .contact-form { max-width: 30rem; }
.field-note { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--muted); }
.amount-input { position: relative; }
.amount-prefix { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.amount-input input { padding-left: 1.8rem; }
.pay-note { color: var(--muted); font-size: 0.95rem; border-top: 2px solid var(--rule); padding-top: 1.6rem; }
.pay-note p { margin-bottom: 0.9rem; }
@media (max-width: 860px) {
  .pay-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Footer: ink band, three columns over a legal strip. */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.65); }
.site-footer .wrap { padding-top: 4.5rem; padding-bottom: 2rem; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule-dark);
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule-dark);
}
.socials { display: flex; gap: 1.1rem; }
.socials svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.footer-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}
.footer-name { color: #fff; margin-bottom: 1rem; }
.site-footer address { line-height: 1.8; }
.site-footer a {
  color: #fff;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease);
}
.site-footer a:hover { background-size: 100% 1px; }
.site-footer .footer-label a { color: inherit; background-image: none; font-size: inherit; display: inline; margin-bottom: 0; }
.site-footer .socials a { background-image: none; opacity: 0.75; transition: opacity 0.3s var(--ease); }
.site-footer .socials a:hover { opacity: 1; }
.footer-col a { display: table; margin-bottom: 0.5rem; font-size: 0.95rem; }
.footer-legal { padding-top: 1.5rem; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.footer-legal p { margin: 0; }

/* Publication cards (KRP Insights): tag pill, title, date, description,
   action link. Same hairline-rule language as .card. */
.tag-pill {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.15rem 0.65rem;
  margin-bottom: 1rem;
}
.card-date { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.8rem; flex: none; }
.card .card-date { flex: none; }

/* Filter bar: square buttons in the nav-toggle's styling language. */
.tag-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.5rem; }
.tag-filter button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tag-filter button:hover,
.tag-filter button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* Stroke icons inside plain (non-link) cards, mirroring .svc-card svg. */
.card > svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--ink);
  margin-bottom: 1.1rem;
  transition: color 0.4s var(--ease);
}
.card:hover > svg { color: var(--gold); }

/* Episode number (KRP News podcast cards): big serif numeral in gold. */
.ep-num {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.7rem;
}

/* Article pages: measured column, gold icon beside each h2. */
.article-body { max-width: 46rem; }
.article-body h2 { font-size: 1.6rem; margin: 2.8rem 0 0.8rem; display: flex; align-items: center; gap: 0.8rem; }
.article-body h2 svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.5; flex: none; }
.article-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.article-meta time { font-size: 0.9rem; color: var(--muted); }
.article-meta .tag-pill { margin-bottom: 0; }

/* Testimonials (Students): serif quotes over card-style top rules. */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; }
.quotes blockquote {
  border-top: 2px solid var(--rule);
  padding-top: 1.4rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 2rem;
  align-items: start;
}
.quotes blockquote p, .quotes cite { grid-column: 2; }
.quotes cite { display: block; font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--muted); margin-top: 1rem; }
/* Portrait: same 3:4 frame language as .person-card, spanning quote + cite. */
.quotes .quote-ph { grid-row: 1 / span 2; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--wash); }
.quotes .quote-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Scroll reveals. Hidden states are gated behind .js (added by main.js),
   so content stays visible when JS is off. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js [data-reveal].visible { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay="1"] { transition-delay: 90ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 180ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 270ms; }
.js [data-reveal][data-reveal-delay="4"] { transition-delay: 360ms; }
.js [data-reveal][data-reveal-delay="5"] { transition-delay: 450ms; }

/* h2 variant: the heading itself stays put; its inner span slides in. */
.js h2[data-reveal] { opacity: 1; transform: none; overflow: hidden; }
.js h2[data-reveal] .h-inner {
  display: block;
  opacity: 0;
  transform: translateX(-3rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js h2[data-reveal].visible .h-inner { opacity: 1; transform: none; }

/* Nav collapses early: 14 links only fit beside the logo at 1400px and up.
   Wrap padding is still 3.5rem in the 861-1399px range, hence the wider
   negative margin on the home open-menu background. */
@media (max-width: 1399px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; min-height: 80px; }
  .nav-toggle { display: block; }
  nav#nav { display: none; flex-direction: column; gap: 0.9rem; width: 100%; padding-bottom: 1.2rem; }
  nav#nav.open { display: flex; }
  .home .site-header:not(.scrolled) nav#nav.open { background: var(--ink); margin: 0 -3.5rem; padding: 0.5rem 3.5rem 1.2rem; width: auto; }
}

/* Mobile */
@media (max-width: 860px) {
  .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
  section { padding: 3.5rem 0; }
  .hero-cover { min-height: 88vh; }
  .hero-cover .wrap { padding-top: 7rem; padding-bottom: 3rem; }
  .home .site-header:not(.scrolled) nav#nav.open { margin: 0 -1.5rem; padding: 0.5rem 1.5rem 1.2rem; }
  .page-head .wrap { padding-top: 3.5rem; padding-bottom: 2.5rem; }
  .statement-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .statement-grid .support { margin-top: 0; }
  .pipeline { grid-auto-flow: row; grid-auto-columns: auto; gap: 1.3rem; padding: 1.8rem; }
  .pipeline li { display: flex; align-items: flex-start; gap: 1rem; }
  .pipeline li::before { display: none; }
  .pipeline .step-t { margin-top: 0.5rem; padding-right: 0; }
  .cap-grid { padding: 1.8rem; }
  .edge-gold::before { width: 0.75rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
  .quotes blockquote { grid-template-columns: 1fr; }
  .quotes .quote-ph { grid-row: auto; max-width: 200px; margin-bottom: 1.2rem; }
  .quotes blockquote p, .quotes cite { grid-column: 1; }
  .profile { grid-template-columns: 1fr; }
  .profile .headshot, .profile .ph { max-width: 280px; }
}

/* Reduced motion: everything visible, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .js [data-reveal], .js h2[data-reveal] .h-inner {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* People profile dashboard (people/justin-rousseau.html). All selectors
   carry the pp- prefix so the standard bio template is untouched. */
.pp-hero { padding: 0; }
.pp-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3.5rem;
  align-items: end;
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}
.pp-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; max-width: 24ch; }
.pp-hero .creds { color: rgba(255, 255, 255, 0.55); font-size: 0.55em; }
.pp-hero .lede { margin-top: 1rem; font-size: 1.15rem; }
.pp-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.8rem; }
.pp-sectors { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: none; }
.pp-sectors .tag-pill { margin: 0; color: var(--gold-soft); border-color: rgba(203, 178, 106, 0.6); }
/* Framed portrait: a gold hairline square set off behind the photo. */
.pp-frame { z-index: 1; }
.pp-frame::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold-soft); z-index: 0; }
.pp-frame img { position: relative; z-index: 1; width: 100%; background: var(--wash); }
.pp-frame::after { z-index: 2; }
/* KPI row: the stat-tile contract (label, proportional-figure value). */
.pp-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}
.pp-kpis div { border-top: 1px solid var(--gold-soft); padding-top: 1rem; }
.pp-kpis strong {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.pp-kpis span { display: block; margin-top: 0.4rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }

/* Two-column body: panel grid on the left, sticky contact on the right. */
.pp-body { padding: 3rem 0 6.5rem; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.pp-main { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
.pp-span-4 { grid-column: span 4; }
.pp-span-5 { grid-column: span 5; }
.pp-span-7 { grid-column: span 7; }
.pp-span-12 { grid-column: span 12; }
.pp-aside { position: sticky; top: 100px; }
.pp-panel {
  background: var(--wash);
  border-top: 2px solid var(--rule);
  padding: 1.8rem 2rem 2rem;
  transition: border-top-color 0.4s var(--ease);
}
.pp-panel:hover { border-top-color: var(--gold); }
.pp-panel > p:last-child, .pp-panel > ul:last-child { margin-bottom: 0; }
.pp-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
  margin: 0 0 1.2rem;
}
.pp-back { margin: 1.4rem 0 0; }

/* Service ledger: index, name + lede, action. Gold left rule grows on hover. */
.pp-ledger { list-style: none; padding: 0; margin: 0; max-width: none; }
.pp-ledger li {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.3rem 0 1.3rem 0.9rem;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.pp-ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  bottom: 1.3rem;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.pp-ledger li:hover::before { transform: scaleY(1); }
.pp-ledger .idx { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.3rem; color: var(--gold); }
.pp-ledger h3 { margin: 0; display: block; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
.pp-ledger p { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--muted); }
.pp-ledger .arrow { white-space: nowrap; }

/* Timeline: one series in gold on a hairline axis. Axis draws in, nodes pop,
   only once the panel is revealed; no-JS and reduced-motion show it static. */
.pp-tl-scroll { overflow-x: auto; }
.pp-timeline svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.pp-timeline .axis { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease); }
.pp-timeline .tick line { stroke: var(--rule); stroke-width: 1; }
.pp-timeline text { font-size: 12px; fill: var(--muted); }
.pp-timeline .lbl { font-size: 13px; font-weight: 500; fill: var(--ink); }
.pp-timeline .mid { text-anchor: middle; }
.pp-timeline .end { text-anchor: end; }
.pp-timeline .node {
  fill: var(--gold);
  stroke: var(--wash);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--ease), r 0.3s var(--ease);
  transition-delay: calc(0.4s + var(--i) * 120ms), 0s;
}
.pp-timeline .node.now { fill: var(--wash); stroke: var(--gold); }
.pp-timeline .ms:hover .node { r: 7; }
.js .pp-timeline[data-reveal]:not(.visible) .axis { stroke-dashoffset: 1; }
.js .pp-timeline[data-reveal]:not(.visible) .node { transform: scale(0); }

@media (max-width: 1100px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-aside { position: static; }
}
@media (max-width: 860px) {
  .pp-hero .wrap { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 2.5rem; }
  .pp-frame { max-width: 220px; order: -1; }
  .pp-kpis { gap: 1.5rem; }
  .pp-body { padding: 2rem 0 3.5rem; }
  .pp-main { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pp-span-4, .pp-span-5, .pp-span-7, .pp-span-12 { grid-column: auto; }
  .pp-panel { padding: 1.4rem 1.25rem 1.5rem; }
  .pp-ledger li { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.8rem 1rem; }
  .pp-ledger .arrow { grid-column: 2; }
  .pp-timeline svg { min-width: 720px; }
}