/* ===================================================================
   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%; }
}