/* Audit Eyes — public site and admin panel.
   Palette is sampled from the firm's own logo: navy #0c3a78, red #c8281f,
   charcoal #202020. The previous green had no relationship to the brand. */

:root {
  --ink: #14181f;
  --ink-soft: #566175;
  --ink-faint: #8a93a4;
  --line: #e4e7ee;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --navy: #0c3a78;
  --navy-dark: #07264f;
  --red: #c8281f;
  --red-dark: #a11d16;
  --danger: #c8281f;
  --max: 1180px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 6px 24px -8px rgba(12, 58, 120, .16);
  --shadow-lg: 0 22px 48px -18px rgba(12, 58, 120, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--red); }

h1, h2, h3 { line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------------- scroll reveal ----------------
   app.js adds .is-in when the element enters the viewport. Without JS the
   element must still be visible, so the hidden state is applied only after
   the script marks the document — otherwise a JS failure blanks the page. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero::before, .hero::after { animation: none !important; }
}

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 24px; max-width: var(--max); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
/* The img rule above outranks the height="44" attribute in the markup, so the
   logo has to be constrained here or a large upload grows the sticky header. */
/* The uploaded wordmark is about 6:1, so height alone decides how much room it
   takes from the nav. max-width keeps an unusually wide upload from pushing the
   navigation off the row. */
.brand img { height: 38px; width: auto; max-width: 260px; object-fit: contain; display: block; }
@media (max-width: 1024px) { .brand img { height: 32px; max-width: 200px; } }

.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav a {
  color: var(--ink-soft); font-weight: 500; font-size: 15px;
  padding: 8px 14px; border-radius: 8px; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.site-nav a:hover { color: var(--navy); }
.site-nav a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); color: var(--ink);
  width: 44px; height: 40px; border-radius: 10px; padding: 0; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* Shipped photograph under a heavy navy wash, so it reads as texture rather
     than a busy picture. A hero slide with its own image overrides this via an
     inline background-image using the same overlay-then-url shorthand. */
  background-image:
    linear-gradient(rgba(7, 26, 52, .82), rgba(7, 26, 52, .72)),
    url("img/hero.jpg");
  background-color: #07264f;
  background-size: cover; background-position: center;
  color: #fff; padding: 148px 0 132px; text-align: center;
}
/* Two slow-drifting radial washes give the flat gradient some life. They sit
   behind the content and are disabled under prefers-reduced-motion. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); opacity: .34; pointer-events: none;
}
.hero::before {
  width: 620px; height: 620px; top: -240px; left: -160px;
  background: radial-gradient(circle, rgba(76, 143, 232, .85), transparent 70%);
  animation: drift-a 19s ease-in-out infinite alternate;
}
.hero::after {
  width: 520px; height: 520px; bottom: -220px; right: -120px;
  background: radial-gradient(circle, rgba(200, 40, 31, .55), transparent 70%);
  animation: drift-b 23s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(120px, 80px, 0) scale(1.15); } }

/* WebGL ripple canvas. Sits over the hero's CSS background (which stays as the
   fallback) and under the text. hero-ripple.js adds .has-ripple only once the
   canvas is actually drawing, so the drifting washes are retired only when
   something has replaced them. */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero > .container { position: relative; z-index: 2; }
.hero.has-ripple::before, .hero.has-ripple::after { display: none; }
@keyframes drift-b { to { transform: translate3d(-110px, -70px, 0) scale(1.1); } }

.hero-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #b9d0f2; margin: 0 0 18px;
  padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.hero h1 { font-size: clamp(32px, 5.4vw, 58px); margin: 0 0 18px; font-weight: 800; }
.hero-sub { font-size: clamp(16px, 1.9vw, 20px); color: #d7e3f5; max-width: 720px; margin: 0 auto 32px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Entrance animation for the hero, independent of the scroll observer. */
.hero .container > * { animation: rise .8s var(--ease) both; }
.hero .container > *:nth-child(1) { animation-delay: .05s; }
.hero .container > *:nth-child(2) { animation-delay: .16s; }
.hero .container > *:nth-child(3) { animation-delay: .27s; }
.hero .container > *:nth-child(4) { animation-delay: .38s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .hero .container > * { animation: none; } }

/* ---------------- sections ---------------- */
.section { padding: 104px 0; scroll-margin-top: 88px; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin: 0 0 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 12px;
}
.section h2 { font-size: clamp(27px, 3.6vw, 40px); margin: 0 0 14px; }
.section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; }

.grid { display: grid; gap: 26px; }
.grid-services { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.grid-team { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-testimonials { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-posts { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* ---------------- cards ---------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Accent bar wipes in on hover. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--red));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.card p { color: var(--ink-soft); margin: 0; }

.grid-services .card p { font-size: 15.5px; }

.avatar {
  width: 104px; height: 104px; object-fit: cover; border-radius: 50%;
  margin-bottom: 16px; border: 3px solid #fff; box-shadow: 0 6px 18px -6px rgba(12, 58, 120, .35);
}
.avatar.small { width: 52px; height: 52px; margin-bottom: 10px; }
.cover { border-radius: 10px; margin-bottom: 14px; width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.role { font-style: normal; color: var(--red); font-weight: 600; font-size: 14px; margin: 0 0 12px; letter-spacing: .01em; }
.date { color: var(--ink-faint); font-size: 13.5px; margin: 0; }

blockquote.card { margin: 0; }
blockquote.card p { font-size: 16px; font-style: italic; }
blockquote.card footer { margin-top: 14px; font-weight: 600; color: var(--ink); font-style: normal; }

/* faq */
.faq {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 22px; margin-bottom: 12px; transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq:hover { border-color: #cdd6e6; box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--navy);
  transition: transform .3s var(--ease); line-height: 1;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--ink-soft); }

/* ---------------- buttons ---------------- */
.button, button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; border: 0;
  padding: 13px 26px; border-radius: 10px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.2;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.button:hover, button:hover {
  background: var(--navy-dark); color: #fff; text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.button.accent { background: var(--red); }
.button.accent:hover { background: var(--red-dark); }
.button.ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .45); }
.button.ghost:hover { background: rgba(255, 255, 255, .2); }
.button.secondary { background: #64708a; }
.button.secondary:hover { background: #4d5871; }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--red-dark); }
button[disabled] { opacity: .35; cursor: default; transform: none; box-shadow: none; }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.contact-info p { margin: 0 0 14px; color: var(--ink-soft); }
.contact-info a { font-weight: 600; }

.contact-form input, .contact-form textarea,
.admin-form input, .admin-form textarea, .admin-form select {
  width: 100%; padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15px; background: #fff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus,
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(12, 58, 120, .12);
}
.contact-form { background: #fff; padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.section-alt .contact-form { background: #fff; }

/* Honeypot: kept out of view for people, still reachable for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error { color: var(--red); font-weight: 600; }
.success { color: #12694a; font-weight: 600; }
.hint { color: var(--ink-faint); font-size: 14px; margin: 0 0 6px; }

/* ---------------- footer ---------------- */
.site-footer { background: #0a1b33; color: #a9b8ce; padding: 56px 0 34px; text-align: center; }
.site-footer p { margin: 0 0 14px; }
.site-footer .social a { margin: 0 10px; color: #dbe6f5; font-weight: 500; }
.site-footer .social a:hover { color: #fff; }
.footer-legal { font-size: 13.5px; color: #6f819b; margin-top: 22px; }

/* ---------------- article ---------------- */
.article { max-width: 780px; }
.article-body { margin: 26px 0; font-size: 17px; color: #253044; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px; box-shadow: var(--shadow); display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 8px; font-size: 16px; }
  .site-nav a::after { display: none; }
  .hero { padding: 92px 0 84px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 36px; }
}

/* ================================================================
   admin panel
   ================================================================ */
body.admin { background: var(--bg-alt); }
.admin-nav {
  width: 236px; min-height: 100vh; background: #0a1b33; color: #fff;
  padding: 22px 16px; position: fixed; top: 0; left: 0; overflow-y: auto;
}
.admin-brand { font-weight: 700; margin: 0 0 20px; letter-spacing: -.01em; }
.admin-nav a { display: block; color: #b9c7dc; padding: 9px 10px; border-radius: 8px; font-size: 15px; }
.admin-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.logout-form { margin-top: 24px; }
.logout-form button { width: 100%; background: rgba(255, 255, 255, .12); font-size: 14px; padding: 10px 14px; }
.logout-form button:hover { background: var(--red); transform: none; }
.admin-main { margin-left: 236px; padding: 32px 36px; }
.admin-main h1 { margin-top: 0; font-size: 27px; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: #f2f5fa; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.admin-table tr:last-child td { border-bottom: 0; }
.row-actions { white-space: nowrap; }
.row-actions form.inline { display: inline; }
.row-actions button { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.row-actions a { margin-right: 8px; font-weight: 600; }
.thumb { max-width: 92px; border-radius: 6px; }

.admin-form { max-width: 700px; background: #fff; padding: 26px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14.5px; }
.checkbox { font-weight: 400 !important; }
.checkbox input { width: auto; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #07264f, var(--navy)); }
.login-box { background: #fff; padding: 36px; border-radius: 16px; width: 370px; border: 0; box-shadow: 0 30px 70px -24px rgba(4, 18, 42, .6); }
.login-box h1 { margin-top: 0; font-size: 23px; }
.login-box label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.login-box input { width: 100%; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 15px; }
.login-box input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(12, 58, 120, .12); }
.login-box button { width: 100%; }

.message { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.message-head { margin: 0 0 4px; }
.message-date { color: var(--ink-faint); font-size: 13px; margin: 0 0 10px; }
.dashboard-highlight {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.dashboard-counts { line-height: 2.1; list-style: none; padding: 0; }
.dashboard-counts li { border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
  .admin-nav { position: static; width: auto; min-height: 0; }
  .admin-main { margin-left: 0; padding: 22px; }
  .login-box { width: 100%; max-width: 370px; margin: 0 16px; }
}


/* ---------------- header call to action ---------------- */
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; }
.header-phone:hover { color: var(--navy); }
.header-cta .button { padding: 10px 20px; font-size: 14.5px; }

/* ---------------- value strip ----------------
   Three short promises directly under the hero. Sits half over the hero so the
   two sections interlock rather than stacking as separate bands. */
.value-strip { margin-top: -58px; position: relative; z-index: 5; }
.value-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.value {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.value-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 58, 120, .08); color: var(--navy);
}
.value-icon svg { width: 23px; height: 23px; }
.value h3 { margin: 0 0 6px; font-size: 17.5px; }
.value p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------------- split (text beside image) ---------------- */
.split { display: grid; gap: 52px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.split-media { position: relative; }
.split-media img {
  width: 100%; border-radius: var(--radius); display: block;
  box-shadow: var(--shadow-lg);
}
/* Offset accent frame behind the photograph. */
.split-media::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
  border: 2px solid rgba(12, 58, 120, .22); border-radius: var(--radius);
}
.split-body h2 { font-size: clamp(25px, 3.1vw, 34px); margin: 0 0 16px; }
.split-body p { color: var(--ink-soft); margin: 0 0 16px; }
.split-list { list-style: none; padding: 0; margin: 0 0 24px; }
.split-list li { padding-left: 30px; position: relative; margin-bottom: 10px; color: var(--ink-soft); }
.split-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 9px;
  border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}
.split.reverse .split-media { order: 2; }
.split.reverse .split-media::after { inset: 18px 18px -18px -18px; }

/* ---------------- rich footer ---------------- */
.footer-grid {
  display: grid; gap: 40px; text-align: left;
  /* Explicit tracks, not repeat(auto-fit, ...): auto-fit may not be combined with
     another flexible track, and the whole declaration is dropped when it is,
     which collapsed this footer to a single stacked column. */
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-col h4 { color: #fff; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #a9b8ce; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-about p { margin: 0 0 14px; font-size: 15px; max-width: 34ch; }
.footer-brand { display: block; margin-bottom: 14px; }
/* The logo is dark artwork for a white header; on the navy footer it would be
   almost invisible, so it is knocked out to solid white. This drops the blue and
   red accents, which is the accepted trade for legibility on a dark ground. */
.footer-brand img { height: 34px; width: auto; max-width: 230px; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand span { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 13.5px; color: #6f819b; }

@media (max-width: 860px) {
  .header-phone { display: none; }
  .value-strip { margin-top: -34px; }
  .split { gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .split-media::after, .split.reverse .split-media::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------------- breadcrumb ---------------- */
.breadcrumb { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 14px; }
.breadcrumb .container { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------------- service detail ---------------- */
.article .lead { font-size: 19px; color: var(--ink-soft); margin: 0 0 24px; }
.service-cta { margin-top: 32px; }
.card-more { font-weight: 600; font-size: 14.5px; display: inline-block; margin-top: 6px; }
.byline { color: var(--ink-soft); font-size: 15px; margin: 0 0 18px; }
.byline strong { color: var(--ink); }

/* ---------------- rendered article body ----------------
   rich_text() emits h2 / p / ul from the admin's plain-text markup. Scoped to
   .article-body so it cannot disturb the section headings elsewhere. */
.article-body h2 { font-size: 22px; margin: 34px 0 12px; letter-spacing: -.01em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { margin: 0 0 16px; }
.article-body ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.article-body li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.article-body li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 13px; height: 7px;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}