/* ===================================================================
   FIRST DO KNOW HARM — medical-legal consulting stylesheet
   -------------------------------------------------------------------
   HOW TO RE-THEME THE WHOLE SITE:
   Change the values in the :root block right below. Colors and fonts
   cascade from here — you do not need to touch anything else to shift
   the palette. Everything else in this file is layout and polish.
   This is the same skeleton as benweger.com, tuned for courtroom
   gravitas: deeper, slate/navy + oxblood accents.
   =================================================================== */

:root {
  /* ---- COLOR (edit these to re-skin the site) ---- */
  --bone:        #F2EFE8;  /* warm parchment — main light background      */
  --bone-2:      #E7E1D5;  /* slightly deeper parchment — alternate bands */
  --ink:         #181C21;  /* near-black slate — body text                */
  --ink-soft:    #424B55;  /* muted slate — secondary text                */
  --iron:        #1C232C;  /* dark band background — deep slate           */
  --iron-deep:   #131820;  /* darkest — hero + contact (slate-navy)       */
  --slate:       #34506B;  /* primary accent — deep slate-navy            */
  --slate-bright:#7C96AE;  /* lighter slate — for use on dark backgrounds */
  --oxblood:     #7A2E2E;  /* secondary accent — deep oxblood             */
  --oxblood-soft:#B26A5C;  /* lighter oxblood — for use on dark backgrounds*/
  --line:        rgba(24, 28, 33, 0.12);   /* hairlines on light          */
  --line-dark:   rgba(242, 239, 232, 0.16);/* hairlines on dark           */

  /* ---- TYPE ---- */
  --font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- RHYTHM ---- */
  --container: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 4px;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.7;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0 0 1.1em; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--slate); color: var(--bone); }

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

/* Accessibility: skip link + focus rings */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- SHARED BITS ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--oxblood);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}
.eyebrow--light { color: var(--slate-bright); }
.eyebrow--light .num { color: var(--oxblood-soft); }
.section-head--center .eyebrow { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--slate);
  color: var(--bone);
  border-color: var(--slate);
}
.btn--primary:hover { background: #2A4156; transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: rgba(242, 239, 232, 0.4);
}
.btn--ghost:hover { border-color: var(--bone); background: rgba(242,239,232,0.08); transform: translateY(-2px); }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
/* solid once you scroll past the hero (toggled by main.js) */
.site-header.scrolled {
  background: rgba(242, 239, 232, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(19, 24, 32, 0.07);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--bone);
  transition: color 0.3s ease;
}
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.brand-suffix { color: var(--oxblood-soft); font-style: italic; font-weight: 500; }
.scrolled .brand { color: var(--ink); }
.scrolled .brand-suffix { color: var(--oxblood); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--bone);
  position: relative;
  transition: color 0.2s ease;
}
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 1.5px;
  background: var(--oxblood-soft);
  transition: width 0.22s ease;
}
.nav a:not(.nav-cta):hover::after { width: 100%; }
.scrolled .nav a { color: var(--ink-soft); }
.scrolled .nav a:hover { color: var(--ink); }
.nav-cta {
  border: 1.5px solid rgba(242,239,232,0.45);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-cta:hover { background: var(--bone); color: var(--ink) !important; border-color: var(--bone); }
.scrolled .nav-cta { border-color: var(--slate); color: var(--slate) !important; }
.scrolled .nav-cta:hover { background: var(--slate); color: var(--bone) !important; }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 10px;
  background: none;
  border: none;
}
.nav-toggle span {
  height: 2px; width: 100%;
  background: var(--bone);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.3s ease;
}
.scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--iron-deep);
  border-top: 1px solid var(--line-dark);
  padding: 0.5rem var(--pad-x) 1.5rem;
}
.mobile-nav a {
  color: var(--bone);
  padding: 0.9rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a:last-child { border-bottom: none; color: var(--slate-bright); font-weight: 600; }
.mobile-nav.open { display: flex; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: var(--iron-deep);
  color: var(--bone);
  padding: clamp(8rem, 18vh, 12rem) 0 clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
/* faint slate + oxblood glow + grain so the dark band isn't flat */
.hero-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(124,150,174,0.16), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(122,46,46,0.16), transparent 55%);
}
.hero-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; max-width: 900px; }
.hero-title {
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  font-weight: 600;
  margin: 0 0 1.6rem;
  letter-spacing: -0.025em;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.4vw, 1.38rem);
  color: rgba(242, 239, 232, 0.82);
  max-width: 46ch;
  margin-bottom: 2.4rem;
  line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  list-style: none;
  margin: 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--line-dark);
}
.hero-meta li {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.6);
  position: relative;
  padding-left: 1.1rem;
}
.hero-meta li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--oxblood-soft);
  border-radius: 50%;
}

/* ---------- GENERIC SECTION ---------- */
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--bone-2); }
.section--dark {
  background: var(--iron-deep);
  color: var(--bone);
  overflow: hidden;
}
.section-head { margin-bottom: 3rem; }
.section-head--center { text-align: center; max-width: 760px; margin-inline: auto; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.section-head .lead-under {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 1.1rem auto 0;
}
.section--dark h2 { color: var(--bone); }
.section--dark .lead-under { color: rgba(242,239,232,0.72); }

/* About: portrait left, bio right */
.about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin: 0.2rem 0 0; }
.about-body .eyebrow { margin-bottom: 0.8rem; }
.prose { font-size: 1.1rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.credential {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.4rem;
}
/* Portrait with a subtle offset oxblood frame behind it (editorial look). */
.portrait { position: relative; margin: 0.3rem 0 0; }
.portrait::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 62%;
  height: 62%;
  border-right: 2px solid var(--oxblood);
  border-bottom: 2px solid var(--oxblood);
  border-bottom-right-radius: var(--radius);
  z-index: 0;
}
.portrait img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 18px 40px rgba(19, 24, 32, 0.2);
}

/* ---------- CARD GRIDS (expertise areas + services + courses) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.cards--two { grid-template-columns: repeat(2, 1fr); }
.cards--four { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem 2rem 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.section--alt .card { background: #F6F3EC; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(19, 24, 32, 0.1);
  border-color: rgba(52, 80, 107, 0.4);
}
.card-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--oxblood);
  display: block;
  margin-bottom: 1rem;
}
.card h3 { font-size: 1.3rem; margin-bottom: 0.8rem; line-height: 1.2; }
.card p { color: var(--ink-soft); margin: 0; font-size: 0.99rem; }
.card p + p { margin-top: 0.8rem; }

/* Compact expertise-area chips (the four forensic domains) */
.areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.area {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.section--alt .area { background: #F6F3EC; }
.area:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(19,24,32,0.08); }
.area-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--slate);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
  margin-top: 0.1rem;
}
.area h4 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.3rem; }
.area p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }

/* The process — a numbered ordered list rendered as steps */
.process {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 2.2rem;
}
.process li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--oxblood);
}
.process h4 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.25rem; }
.process p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- VENTURES / CROSS-LINK CARDS ---------- */
.ventures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.venture {
  display: flex;
  flex-direction: column;
  background: var(--iron);
  color: var(--bone);
  border-radius: var(--radius);
  padding: 2rem 1.9rem 1.8rem;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
  min-height: 200px;
}
.venture:hover { transform: translateY(-4px); background: #232c36; box-shadow: 0 18px 40px rgba(19,24,32,0.2); }
.venture-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.venture h3 { font-size: 1.4rem; color: var(--bone); }
.venture-arrow {
  font-size: 1.3rem;
  color: var(--slate-bright);
  transition: transform 0.25s ease;
}
.venture:hover .venture-arrow { transform: translate(4px, -4px); }
.venture p { color: rgba(242, 239, 232, 0.72); font-size: 0.98rem; flex: 1; }
.venture-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood-soft);
  border: 1px solid var(--line-dark);
  padding: 0.32rem 0.7rem;
  border-radius: 100px;
}

/* ---------- PULLQUOTE BAND ---------- */
.pullquote { text-align: center; max-width: 820px; margin: 0 auto; }
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.36;
  color: var(--bone);
  margin-bottom: 1.2rem;
}
.pullquote cite {
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood-soft);
}
.pullquote cite span { color: rgba(242,239,232,0.55); }

/* ---------- CONTACT ---------- */
.contact-inner { text-align: center; max-width: 720px; margin-inline: auto; }
.contact-inner .eyebrow { justify-content: center; }
.contact-inner h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 1.2rem; }
.contact-lead { font-size: 1.12rem; color: var(--ink-soft); margin-bottom: 2.2rem; }
.contact-fine {
  font-size: 0.86rem;
  color: var(--ink-soft);
  opacity: 0.8;
  margin-top: 1.8rem;
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- FOOTER ---------- */
.site-footer { background: var(--iron-deep); color: var(--bone); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; color: var(--bone); }
.footer-brand .brand-mark { width: 44px; height: 44px; color: var(--slate-bright); }
.footer-name { font-family: var(--font-display); font-size: 1.18rem; margin: 0; }
.footer-tag { font-size: 0.85rem; color: rgba(242,239,232,0.55); margin: 0.2rem 0 0; }
.footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-nav a { font-size: 0.9rem; color: rgba(242,239,232,0.72); transition: color 0.2s ease; }
.footer-nav a:hover { color: var(--bone); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
}
.footer-bottom p { font-size: 0.82rem; color: rgba(242,239,232,0.45); margin: 0; }
.footer-bottom a { color: rgba(242,239,232,0.7); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--bone); }

/* ---------- SCROLL-REVEAL (subtle fade-up; disabled if user prefers reduced motion) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* anchor offset so sticky header doesn't cover section tops */
section[id] { scroll-margin-top: 90px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  .cards, .cards--four { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 280px; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .cards, .cards--two, .cards--four, .ventures, .areas, .process { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  .hero-meta { gap: 0.5rem 1.2rem; }
  .btn { width: 100%; }
  .hero-actions { width: 100%; }
}

/* ===================================================================
   SUBPAGE / LANDING-PAGE COMPONENTS   (added 2026-06-16)
   Used by the SEO landing pages (strangulation, SAFE, IPV, child abuse,
   for-prosecutors, for-defense). Append-only — nothing above is altered.
   =================================================================== */

/* Compact hero for interior pages (reuses .hero dark band) */
.hero--sub { padding: clamp(7rem, 14vh, 9.5rem) 0 clamp(2.8rem, 6vw, 4.2rem); }
.hero--sub .hero-inner { max-width: 820px; }
.hero--sub .hero-title { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 1.3rem; }
.hero--sub .hero-lead { margin-bottom: 2rem; }

/* Breadcrumb (sits inside the dark hero) */
.breadcrumb { font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(242,239,232,0.55); margin: 0 0 1.3rem; }
.breadcrumb a { color: rgba(242,239,232,0.8); }
.breadcrumb a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb span { color: rgba(242,239,232,0.35); margin: 0 0.45rem; }

/* Readable narrow text column */
.content { max-width: 760px; margin-inline: auto; }
.content--wide { max-width: 940px; }
.content h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1rem; }
.content > h2:not(:first-child) { margin-top: 2.8rem; }

/* Prose lists + sub-heads (base sheet only styles <p>) */
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3rem; }
.prose li { margin: 0 0 0.5em; color: var(--ink-soft); }
.prose li strong { color: var(--ink); font-weight: 600; }
.prose h3 { font-size: 1.32rem; margin: 2rem 0 0.7rem; }
.prose h4 { font-family: var(--font-display); font-size: 1.12rem; margin: 1.6rem 0 0.4rem; }

/* Key-points callout */
.keypoints {
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  margin: 2.2rem 0;
}
.section--alt .keypoints { background: #F6F3EC; }
.keypoints .kp-title {
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 0.7rem;
}
.keypoints ul { margin: 0; padding-left: 1.2rem; }
.keypoints li { margin: 0 0 0.4em; color: var(--ink-soft); }
.keypoints li:last-child { margin-bottom: 0; }

/* FAQ — native <details>, no JS needed */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  margin-bottom: 0.9rem;
}
.section--alt .faq details { background: #F6F3EC; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--oxblood); font-size: 1.5rem; line-height: 1; flex: none; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); }
.faq details > div p { margin: 0 0 0.7em; }
.faq details > div p:last-child { margin-bottom: 0; }

/* Mid-page + page-bottom inline CTA */
.cta-inline { text-align: center; margin-top: 2.6rem; }
.crosslink-head { text-align: center; margin-bottom: 1.4rem; }
.crosslink-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* Homepage: "read more" link inside each expertise area + the prosecution/defense aside */
.area-more { margin: 0.55rem 0 0; font-size: 0.9rem; }
.area-more a { color: var(--slate); font-weight: 600; }
.area-more a:hover { text-decoration: underline; text-underline-offset: 2px; }
.areas-aside { text-align: center; color: var(--ink-soft); font-size: 0.99rem; margin: 0.4rem 0 0; }
.areas-aside a { color: var(--slate); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ===================================================================
   ANTI-SLOP COMPLIANCE PASS (added 2026-07-09, gogh audit)
   Source-cited: make-interfaces-feel-better (hit areas >=40px, press
   feedback scale 0.96) + Vercel web-interface-guidelines (focus states
   on all interactive elements). Append-only.
   =================================================================== */
.nav a { padding-block: 0.75rem; }            /* lift text links to ~40px hit height */
.footer-nav a { padding-block: 0.6rem; display: inline-block; }
.breadcrumb a { padding-block: 0.4rem; display: inline-block; }
.btn:active { transform: scale(0.98); }       /* press feedback; never below 0.95 */
.faq summary:focus-visible,
.faq summary:focus {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===================================================================
   DE-NUMERAL PASS (2026-07-11): decorative index marks removed sitewide
   (eyebrow nums, roman area-marks, card letters, process counters).
   Spans stripped from HTML; process counter neutralized here.
   =================================================================== */
.process li { padding-left: 0; }
.process li::before { content: none; }