/* =============================================================
   AI RESEARCHER — Editorial design overlay
   Ghazi Gharsallah · personal research journal
   ============================================================= */

:root {
  /* Palette — warm archival paper meets ink & rust */
  --ink:          #141210;
  --ink-soft:     #2B2722;
  --ink-softer:   #4A453D;
  --paper:        #F1EAD9;
  --paper-deep:   #EBE1CB;
  --paper-dark:   #DCCFB3;
  --paper-edge:   #CABE9F;
  --rust:         #C4552D;
  --rust-deep:    #9B3E1A;
  --slate:        #3E5970;
  --moss:         #6B7A5E;
  --muted:        #5F584B;
  --line:         rgba(20, 18, 16, 0.14);
  --line-soft:    rgba(20, 18, 16, 0.08);
  --line-strong:  rgba(20, 18, 16, 0.32);

  /* Type */
  --f-display:    "Fraunces", "Playfair Display", Georgia, serif;
  --f-body:       "Newsreader", "Fraunces", Georgia, serif;
  --f-mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease:         cubic-bezier(0.2, 0.65, 0.25, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --gutter:       max(40px, 5vw);
  --rail-w:       44px;
}

/* =============================================================
   GLOBAL RESETS — beat existing style.css where it conflicts
   ============================================================= */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html.ai-researcher-html,
html:has(body.ai-researcher) {
  overflow-x: clip;
}
body.ai-researcher {
  font-family: var(--f-body) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink) !important;
  background: var(--paper) !important;
  background-image:
    radial-gradient(1200px 800px at 85% -10%, rgba(196, 85, 45, 0.07), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(62, 89, 112, 0.06), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, rgba(155, 62, 26, 0.04), transparent 55%) !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  overflow-x: clip;     /* clip doesn't create a scroll container */
  overflow-y: visible;  /* let window scroll naturally */
}

body.ai-researcher a {
  color: var(--ink) !important;
  text-decoration: none;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 420ms var(--ease), color 220ms var(--ease);
}

body.ai-researcher a:hover,
body.ai-researcher a:focus {
  color: var(--rust-deep) !important;
  opacity: 1 !important;
  background-size: 100% 1px;
}

body.ai-researcher p,
body.ai-researcher li,
body.ai-researcher .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p,
body.ai-researcher .panel-body,
body.ai-researcher .blog-entry .desc,
body.ai-researcher .colorlib-feature .colorlib-text {
  color: var(--ink-softer) !important;
}

body.ai-researcher em {
  font-style: italic;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 80, "opsz" 40;
}
/* Leave `i` alone — it is used for icon fonts (.fa, .icomoon, .ai) */

body.ai-researcher ::selection {
  background: var(--rust) !important;
  color: var(--paper) !important;
}

/* =============================================================
   PAPER GRAIN & VIGNETTE
   ============================================================= */

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

.paper-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(60, 40, 20, 0.08) 100%);
}

/* =============================================================
   RAIL / RUNNING HEAD
   ============================================================= */

.rail {
  position: fixed;
  top: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateX(50%);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 80;
  pointer-events: none;
}
.rail-left  { left: 16px;  }
.rail-right { right: 16px; }
.rail-ink   { color: var(--ink-softer); }
.rail-dot   { opacity: 0.5; margin: 6px 0; }
.rail-ital em {
  font-family: var(--f-display);
  letter-spacing: 0.04em;
  font-style: italic;
  text-transform: none;
  font-size: 11.5px;
}
@media (max-width: 1200px) { .rail { display: none; } }

/* =============================================================
   FLOATING ACTIONS — paper pills
   ============================================================= */

body.ai-researcher .floating-actions {
  left: auto !important;
  right: 24px !important;
  top: auto !important;
  bottom: 28px !important;
  transform: none !important;
  flex-direction: row !important;
  gap: 8px !important;
}
@media (max-width: 1200px) {
  body.ai-researcher .floating-actions { display: none !important; }
}
body.ai-researcher .floating-actions .floating-action {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms var(--ease);
}
body.ai-researcher .floating-actions .floating-action:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--rust);
}
body.ai-researcher .floating-actions .floating-action:hover i {
  color: var(--paper) !important;
}

/* =============================================================
   NAVBAR — brand + index
   ============================================================= */

body.ai-researcher .brand-nav.custom-navbar {
  padding: 22px 40px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
body.ai-researcher .brand-nav .container-fluid {
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  margin-right: auto;
}
.brand-mark .brand-word {
  font-family: var(--f-display) !important;
  font-size: 20px;
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 48;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  color: var(--ink) !important;
  background: none !important;
}
.brand-mark .brand-glyph {
  font-style: italic;
  color: var(--rust);
  font-weight: 600;
}
.brand-mark .brand-rest {
  margin-left: 2px;
}
.brand-mark .brand-tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

body.ai-researcher .brand-nav .custom-nav-links {
  gap: 22px !important;
  align-items: baseline !important;
}
body.ai-researcher .brand-nav .custom-nav-links > li > a {
  font-family: var(--f-body) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  background: none !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
  padding: 0 !important;
  position: relative;
}
body.ai-researcher .brand-nav .custom-nav-links > li > a .nav-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
  transform: translateY(-3px);
}
body.ai-researcher .brand-nav .custom-nav-links > li > a:hover,
body.ai-researcher .brand-nav .custom-nav-links > li > a.nav-active {
  color: var(--rust-deep) !important;
}
body.ai-researcher .brand-nav .custom-nav-links > li > a:hover .nav-num,
body.ai-researcher .brand-nav .custom-nav-links > li > a.nav-active .nav-num {
  color: var(--rust-deep) !important;
}
body.ai-researcher .brand-nav .custom-nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--rust);
  transition: right 360ms var(--ease);
}
body.ai-researcher .brand-nav .custom-nav-links > li > a:hover::after,
body.ai-researcher .brand-nav .custom-nav-links > li > a.nav-active::after {
  right: 0;
}

@media (max-width: 992px) {
  body.ai-researcher .brand-nav .custom-nav-links { flex-wrap: wrap; gap: 14px !important; }
  body.ai-researcher .brand-nav .custom-nav-links > li > a { font-size: 13px !important; }
}

/* =============================================================
   EDITORIAL HERO
   ============================================================= */

body.ai-researcher .new-hero-section.editorial-hero {
  min-height: 100vh;
  padding: 40px 0 60px !important;
  display: block !important;
  background: transparent !important;
  overflow: visible;
}
body.ai-researcher .new-hero-section.editorial-hero::before { display: none; }

/* Portrait frame canvas — full-bleed background of the hero (same position/size as
   the original layout). Sits beneath everything, with grayscale + soft fade to paper. */
body.ai-researcher .new-hero-section.editorial-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
body.ai-researcher .new-hero-section.editorial-hero .hero-bg .portrait-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%) contrast(1.02);
  -webkit-filter: grayscale(100%) contrast(1.02);
  mix-blend-mode: multiply;
  opacity: 0.95;
}
/* Soft left-edge fade so the left-column text stays legible over the portrait */
body.ai-researcher .new-hero-section.editorial-hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(241, 234, 217, 0.92) 28%, rgba(241, 234, 217, 0.45) 52%, rgba(241, 234, 217, 0) 78%),
    linear-gradient(180deg, rgba(241, 234, 217, 0) 60%, var(--paper) 100%);
}
body.ai-researcher .new-hero-section.editorial-hero .hero-lab,
body.ai-researcher .new-hero-section.editorial-hero .metrics-strip,
body.ai-researcher .new-hero-section.editorial-hero .hero-baseline {
  position: relative;
  z-index: 1;
}

.hero-lab {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 48px;
  padding: 56px var(--gutter) 40px;
  align-items: start;
  position: relative;
}

.hero-lab::before {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 0;
  height: 1px;
  background: var(--line);
}

/* --- Left meta column --- */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
  position: relative;
}
.hero-meta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -24px;
  width: 1px;
  background: var(--line);
}
.meta-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-val {
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.35;
}
.meta-rule {
  height: 1px;
  background: var(--line);
  margin: 6px 0 2px;
}
.meta-abstract {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-softer);
}
.meta-abstract .meta-key {
  display: block;
  margin-bottom: 4px;
}
.meta-abstract em {
  color: var(--rust-deep);
  font-style: italic;
}

/* --- Center headline --- */
.hero-headline { min-width: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(196, 85, 45, 0.15);
  animation: kicker-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(196, 85, 45, 0.15); }
  50%      { box-shadow: 0 0 0 9px rgba(196, 85, 45, 0.04); }
}

.display-mark {
  font-family: var(--f-display) !important;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  font-size: clamp(56px, 8.2vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0 0 36px !important;
  color: var(--ink) !important;
  overflow: visible;
}
.display-mark .dm-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: dm-rise 900ms var(--ease-out) forwards;
  white-space: nowrap;
}
.display-mark .dm-line-1 { animation-delay: 120ms; }
.display-mark .dm-line-2 {
  animation-delay: 260ms;
  margin-left: clamp(16px, 4vw, 48px);
  letter-spacing: -0.045em;
}
.display-mark em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--ink);
  font-family: var(--f-display);
  position: relative;
}
.display-mark em::after {
  content: "";
  display: inline-block;
  width: 0.06em;
}
.dm-dot {
  color: var(--rust);
  font-style: normal;
  margin-left: 0.02em;
}
@keyframes dm-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-lede {
  font-family: var(--f-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft) !important;
  max-width: 32ch;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
  animation: dm-rise 900ms var(--ease-out) 500ms forwards;
}
.hero-lede em {
  color: var(--rust-deep);
  font-style: italic;
}

.hero-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  animation: dm-rise 900ms var(--ease-out) 700ms forwards;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  font-family: var(--f-body) !important;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ink);
  border-radius: 999px;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transition: color 260ms var(--ease), background 260ms var(--ease), transform 260ms var(--ease);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(101%);
  transition: transform 420ms var(--ease);
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }
.cta:hover { color: var(--paper) !important; }
.cta:hover::before { transform: translateY(0); }
.cta .cta-arrow { transition: transform 260ms var(--ease); }
.cta:hover .cta-arrow { transform: translateX(4px); }

body.ai-researcher .cta-primary { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink); }
body.ai-researcher .cta-primary::before { background: var(--rust); }
body.ai-researcher .cta-primary:hover { color: var(--paper) !important; }
body.ai-researcher .cta-primary:hover::before { transform: translateY(0); }
/* Reinforce ghost CTA text on hover against global a{} rule */
body.ai-researcher .cta.cta-ghost:hover { color: var(--paper) !important; }

/* Hero social */
body.ai-researcher .new-hero-section .hero-social {
  margin-top: 0;
  opacity: 0;
  transform: translateY(12px);
  animation: dm-rise 900ms var(--ease-out) 860ms forwards;
}
body.ai-researcher .new-hero-section .hero-social .social-link {
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--ink) !important;
  background-image: none !important;
  transition: background 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease);
}
body.ai-researcher .new-hero-section .hero-social .social-link:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
  transform: translateY(-3px);
}
body.ai-researcher .new-hero-section .hero-social .social-link i { font-size: 18px; }
body.ai-researcher .new-hero-section .hero-social .social-link .scholar-svg {
  width: 18px; height: 18px;
  transition: fill 260ms var(--ease);
}
body.ai-researcher .new-hero-section .hero-social .social-link:hover .scholar-svg { fill: var(--paper); }

/* --- Right field (neural canvas) --- */
.hero-field {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.field-header .field-name {
  color: var(--ink);
  font-family: var(--f-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.field-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(20, 18, 16, 0.04),
    6px 6px 0 var(--ink);
}
.neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.38; /* becomes a quiet substrate behind the portrait */
  mix-blend-mode: multiply;
}

/* Portrait frame sequence — main visual */
.field-canvas-wrap .hero-canvas,
.field-canvas-wrap .portrait-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter: grayscale(0.75) contrast(1.04) sepia(0.12);
  -webkit-filter: grayscale(0.75) contrast(1.04) sepia(0.12);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Subtle animated scan-line over the portrait for editorial feel */
.field-canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,18,16,0.04) 0%, transparent 4%, transparent 96%, rgba(20,18,16,0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20,18,16,0.045) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Scrub hint under the portrait */
.scrub-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(241, 234, 217, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  padding: 6px 10px;
}
.scrub-line {
  width: 18px;
  height: 1px;
  background: var(--rust);
  position: relative;
  overflow: hidden;
}
.scrub-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--ink) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: scrub-scan 2.2s linear infinite;
}
@keyframes scrub-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.field-corner {
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--ink);
}
.field-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.field-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.field-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.field-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.field-readout {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(241, 234, 217, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.25;
  min-width: 96px;
}
.ro-row { display: flex; justify-content: space-between; gap: 12px; }
.ro-k { color: var(--muted); letter-spacing: 0.06em; }
.ro-v { color: var(--rust-deep); font-weight: 500; }

.field-caption {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-softer) !important;
  margin-top: 10px;
}
.field-caption em {
  color: var(--rust-deep);
}

/* --- Metrics strip --- */
.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 44px var(--gutter) 40px;
  margin: 36px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%, transparent 25%),
    linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%),
    linear-gradient(90deg, transparent 0, transparent calc(75% - 1px), var(--line) calc(75% - 1px), var(--line) 75%, transparent 75%);
}
.metric {
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.metric:first-child { padding-left: 0; }
.metric:last-child  { padding-right: 0; }
.metric-num {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 80, "opsz" 144;
  font-weight: 400;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.metric-plus {
  color: var(--rust);
  font-size: 0.5em;
  margin-left: 4px;
  transform: translateY(-0.4em);
}
.metric-label {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-softer) !important;
  max-width: 24ch;
}

/* Hero baseline */
.hero-baseline {
  display: flex;
  justify-content: space-between;
  padding: 28px var(--gutter) 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.baseline-ink { color: var(--ink); }

/* Hero responsive */
@media (max-width: 1200px) {
  .hero-lab { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 900px) {
  .hero-lab { grid-template-columns: 1fr; gap: 40px; padding-top: 28px; }
  .hero-meta { display: none; }
  .metrics-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; background: none; padding: 32px var(--gutter); }
  .metric { padding: 0 !important; }
  .display-mark .dm-line-2 { margin-left: 0; }
  /* On mobile the portrait fills the hero-bg; fade is simpler (top-to-bottom) */
  body.ai-researcher .new-hero-section.editorial-hero .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(241, 234, 217, 0.15) 0%, rgba(241, 234, 217, 0.55) 40%, var(--paper) 100%);
  }
}

/* =============================================================
   SECTION FRAME / HEADERS
   ============================================================= */

body.ai-researcher .jp-section {
  background: transparent !important;
  background-image: none !important;
  padding: 110px 0 !important;
  position: relative;
  border-top: 1px solid var(--line);
}
body.ai-researcher .jp-section .colorlib-narrow-content {
  max-width: 1160px !important;
  padding: 0 var(--gutter) !important;
}

.section-head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 52px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.section-num {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--rust);
  padding-top: 6px;
  text-transform: uppercase;
}
.section-head-inner { max-width: 720px; }

body.ai-researcher .jp-section .heading-meta {
  display: block;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
body.ai-researcher .jp-section .colorlib-heading {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-size: clamp(38px, 4.4vw, 58px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  margin: 0 0 18px !important;
}
body.ai-researcher .jp-section .colorlib-heading::after,
body.ai-researcher .jp-section .colorlib-heading::before { display: none !important; }

.section-dek {
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-softer) !important;
  max-width: 48ch;
  margin: 0;
}
.section-dek em {
  color: var(--rust-deep);
  font-style: italic;
}

@media (max-width: 768px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; padding-bottom: 32px; margin-bottom: 40px; }
}

/* =============================================================
   §01 · ABOUT — prose grid
   ============================================================= */

.prose-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: start;
}
.prose-body { font-size: 17.5px; line-height: 1.72; }
.prose-body p { margin-bottom: 24px; color: var(--ink-soft) !important; }
.prose-body p strong { color: var(--ink); font-weight: 600; }
.prose-body p em,
.prose-body p i {
  font-style: italic;
  color: var(--rust-deep);
}
.has-dropcap {
  position: relative;
}
.dropcap {
  float: left;
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  font-size: 112px;
  line-height: 0.82;
  color: var(--rust);
  padding: 10px 14px 0 0;
  margin: -4px 0 0 -2px;
}

.pullquote {
  position: relative;
  margin: 44px 0;
  padding: 28px 32px 28px 44px;
  border-left: 3px solid var(--rust);
  background:
    linear-gradient(180deg, rgba(196, 85, 45, 0.05), rgba(196, 85, 45, 0.02));
}
.pullquote p {
  font-family: var(--f-display) !important;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 120;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink) !important;
  margin: 0;
}
.pullquote p em {
  font-style: italic;
  color: var(--rust-deep);
}
.pq-mark {
  position: absolute;
  top: -22px;
  left: 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--rust);
  opacity: 0.85;
}

.prose-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  background: rgba(235, 225, 203, 0.35);
}
.aside-block { display: flex; flex-direction: column; gap: 4px; }
.aside-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.aside-block p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft) !important;
  margin: 0;
}

@media (max-width: 900px) {
  .prose-grid { grid-template-columns: 1fr; gap: 36px; }
  .prose-aside { position: static; }
}

/* =============================================================
   §02 · CAPABILITY MATRIX
   ============================================================= */

.capability-matrix {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.cap-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 280ms var(--ease);
}
.cap-row:hover { background: rgba(235, 225, 203, 0.35); }
.cap-row-head { display: flex; align-items: baseline; gap: 14px; }
.cap-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--rust);
  text-transform: uppercase;
}
.cap-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 48;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cap-items {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.cap-items li {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink) !important;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
  cursor: default;
}
.cap-items li:hover {
  background: var(--ink);
  color: var(--paper) !important;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .cap-row { grid-template-columns: 1fr; gap: 14px; }
}

/* =============================================================
   §03 · EDUCATION — accordion paper
   ============================================================= */

body.ai-researcher .fancy-collapse-panel .panel-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.ai-researcher .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.ai-researcher .panel-heading {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
body.ai-researcher .panel-heading a,
body.ai-researcher .panel-heading a.collapsed {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px !important;
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--f-body) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background-image: none !important;
  transition: background 280ms var(--ease);
  position: relative;
}
body.ai-researcher .panel-heading a:hover { background: var(--paper-dark) !important; }
body.ai-researcher .panel-heading a strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 48;
  font-size: 22px;
  margin-right: 10px;
  color: var(--ink);
}
body.ai-researcher .panel-heading a span {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--rust-deep);
}
body.ai-researcher .panel-heading a::after {
  content: "+" !important;
  font-family: var(--f-display) !important;
  font-size: 28px !important;
  color: var(--ink) !important;
  transition: transform 320ms var(--ease);
  position: relative;
  top: -2px;
}
body.ai-researcher .panel-heading a[aria-expanded="true"]::after,
body.ai-researcher .panel-heading a:not(.collapsed)::after {
  content: "–" !important;
  transform: rotate(0deg);
}
body.ai-researcher .panel-body {
  padding: 24px 28px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-top: none !important;
  border-radius: 0 !important;
  color: var(--ink-soft) !important;
  font-size: 15.5px;
  line-height: 1.6;
}

/* =============================================================
   §04 · CHRONICLE — research log timeline
   ============================================================= */

.chronicle {
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.chronicle::before {
  content: "";
  position: absolute;
  left: 162px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line-strong);
}

.chron-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 44px;
  padding: 24px 0;
  align-items: start;
  position: relative;
}
.chron-entry + .chron-entry { border-top: 1px solid var(--line); }
.chron-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.chron-date::after {
  content: "";
  position: absolute;
  left: 162px;
  top: 10px;
  width: 9px; height: 9px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transform: translateX(-50%);
}
.chron-entry:hover .chron-date::after {
  background: var(--rust);
  border-color: var(--rust);
  box-shadow: 0 0 0 5px rgba(196, 85, 45, 0.14);
}
.cd-year {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 48;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cd-present {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rust);
  text-transform: uppercase;
}
.chron-body h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 72;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.chron-org {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--rust-deep) !important;
  border-bottom: 1px solid transparent;
  margin-bottom: 10px;
  background-image: none !important;
}
.chron-org:hover { color: var(--ink) !important; }
.chron-body p,
.chron-body ul {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-softer) !important;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.chron-body ul li { margin-bottom: 4px; padding-left: 16px; position: relative; }
.chron-body ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--rust);
  font-family: var(--f-mono);
  font-size: 13px;
}
.mono { font-family: var(--f-mono); font-size: 0.9em; color: var(--rust-deep); }

/* Milestone row in chronicle — gets a filled rust marker and a subtle inset */
.chron-entry.chron-milestone .cd-present { color: var(--rust-deep); font-weight: 600; }
.chron-entry.chron-milestone .chron-date::after {
  background: var(--rust);
  border-color: var(--rust);
  box-shadow: 0 0 0 6px rgba(196, 85, 45, 0.14);
}
.chron-entry.chron-milestone .chron-body {
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  background: rgba(196, 85, 45, 0.06);
  margin-left: -6px;
}
.chron-entry.chron-milestone .chron-body h3 em {
  color: var(--rust-deep);
}

@media (max-width: 768px) {
  .chronicle::before { left: 0; }
  .chron-entry { grid-template-columns: 1fr; gap: 10px; padding-left: 22px; }
  .chron-date::after { left: -22px; top: 10px; }
}

/* =============================================================
   §05 · BIBLIOGRAPHY
   ============================================================= */

.biblio {
  list-style: none;
  padding: 0; margin: 0;
}
.biblio-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 280ms var(--ease);
}
.biblio-entry:hover { background: rgba(235, 225, 203, 0.35); padding-left: 12px; padding-right: 12px; }
.bib-tag {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bib-ref {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--rust);
  text-transform: uppercase;
}
.bib-year {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 48;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.bib-body h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 72;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.bib-body h3 a {
  color: var(--ink) !important;
  background-image: linear-gradient(var(--rust), var(--rust)) !important;
}
.bib-authors {
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.bib-venue {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--muted);
}
.bib-venue em {
  color: var(--ink-soft);
  font-style: italic;
}
.bib-contrib {
  margin: 10px 0 0 !important;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-softer) !important;
  max-width: 64ch;
  padding-left: 14px;
  border-left: 2px solid var(--paper-dark);
}
.bib-contrib em { color: var(--rust-deep); }

@media (max-width: 768px) {
  .biblio-entry { grid-template-columns: 1fr; gap: 10px; }
  .bib-tag { flex-direction: row; align-items: baseline; gap: 12px; }
}

/* =============================================================
   §06/07 · HONOR LIST
   ============================================================= */

.honor-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.honor-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 260ms var(--ease), padding 260ms var(--ease);
}
.honor-list li:hover { background: rgba(235, 225, 203, 0.4); padding-left: 12px; }
.honor-year {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--rust);
  text-transform: uppercase;
}
.honor-name {
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink) !important;
}
.honor-name strong { font-weight: 600; }

@media (max-width: 600px) {
  .honor-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* =============================================================
   §08 · WORKS
   ============================================================= */

.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.work-card {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), background 360ms var(--ease);
}
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px dashed transparent;
  transition: border-color 360ms var(--ease);
}
.work-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper-deep);
}
.work-card:hover::after { border-color: var(--line); }

.work-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.work-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}
.work-kind {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.work-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.work-card h3 a { color: var(--ink) !important; background-image: none !important; }
.work-card p {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-softer) !important;
  margin: 0;
}
.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.work-link {
  color: var(--rust-deep) !important;
  background-image: none !important;
  font-weight: 500;
}

.work-card-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
  padding: 28px 32px;
}
.work-card-feature > .work-tag { grid-column: 1 / -1; }
.work-card-feature > .work-image { grid-column: 1; grid-row: 2 / span 3; }
.work-card-feature > h3 { grid-column: 2; grid-row: 2; margin-top: 4px; }
.work-card-feature > p { grid-column: 2; grid-row: 3; }
.work-card-feature > .work-meta { grid-column: 2; grid-row: 4; margin-top: auto; }
.work-card-feature .work-image {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  background-image: none !important;
}
.work-card-feature .work-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  transition: transform 600ms var(--ease), filter 600ms var(--ease);
}
.work-card-feature:hover .work-image img {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1.1);
}

@media (max-width: 900px) {
  .works-grid { grid-template-columns: 1fr; }
  .work-card-feature { grid-template-columns: 1fr; }
}

/* Kill old colorlib blog-entry styles that might leak */
body.ai-researcher .colorlib-blog .blog-entry { display: none; }

/* =============================================================
   §09 · LETTER (Contact)
   ============================================================= */

.letter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 40px 60px;
  padding: 48px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  position: relative;
  box-shadow: 12px 12px 0 var(--ink);
}
.letter::before,
.letter::after {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  border: 1px solid var(--ink);
}
.letter::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.letter::after  { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.letter-from,
.letter-to {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.letter-key {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}
.letter p {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink) !important;
  margin: 0;
}
.letter-to strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 48;
  font-size: 20px;
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
}
.letter-email a {
  color: var(--rust-deep) !important;
  font-weight: 500;
}
.letter-cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

@media (max-width: 700px) {
  .letter { grid-template-columns: 1fr; padding: 32px; gap: 28px; box-shadow: 6px 6px 0 var(--ink); }
  .letter-cta { justify-content: flex-start; }
}

/* =============================================================
   COLOPHON
   ============================================================= */

.colophon {
  margin-top: 60px;
  padding: 60px 0 80px;
  border-top: 1px solid var(--line);
  background: transparent;
}
.colophon-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  max-width: 1160px !important;
  padding: 0 var(--gutter) !important;
}
.colophon-mark .colophon-glyph {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
}
.c-slash {
  color: var(--rust);
  margin: 0 2px;
}
.colophon-meta p {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-softer) !important;
  margin: 0;
}
.colophon-fine {
  font-family: var(--f-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-top: 6px !important;
}
.colophon-links {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.colophon-links a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink) !important;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .colophon-inner { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .colophon-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

/* =============================================================
   REVEAL UTILITY (triggered by ai-researcher.js)
   ============================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 320ms; }

/* Disable legacy animate.css handlers from ambushing our layout */
body.ai-researcher .animate-box {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Keep old theme from overriding hero colors */
body.ai-researcher .new-hero-section .container-fluid { padding: 0 !important; }

/* Hide rail on reduce-motion mobile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kicker-dot { animation: none; }
}

/* =============================================================
   COMPAT — neutralize old .hero-stats/.hero-title/.hero-image-col etc.
   ============================================================= */

body.ai-researcher .hero-title,
body.ai-researcher .hero-subtitle,
body.ai-researcher .hero-stats,
body.ai-researcher .hero-image-col,
body.ai-researcher .vertical-text-col,
body.ai-researcher .scroll-down {
  display: none !important;
}

/* Ensure body grid dots from style.css do not show up (we replace bg) */
body.ai-researcher {
  background-image:
    radial-gradient(1200px 800px at 85% -10%, rgba(196, 85, 45, 0.07), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(62, 89, 112, 0.06), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, rgba(155, 62, 26, 0.04), transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 35px,
      rgba(20, 18, 16, 0.03) 35px,
      rgba(20, 18, 16, 0.03) 36px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 35px,
      rgba(20, 18, 16, 0.03) 35px,
      rgba(20, 18, 16, 0.03) 36px
    ) !important;
  background-size: auto, auto, auto, 36px 36px, 36px 36px !important;
}


/* =============================================================
   CLIENT-FACING LAYER
   Practice · Engagements · build cards · project brief
   Appended last so it wins over the sections above.
   ============================================================= */

/* -------------------------------------------------------------
   NAV — 10 index entries need a slightly tighter rhythm
   ------------------------------------------------------------- */

body.ai-researcher .brand-nav .custom-nav-links {
  gap: 18px !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Bootstrap's .nav clearfix pseudo-elements become stray flex items here */
body.ai-researcher .brand-nav .custom-nav-links::before,
body.ai-researcher .brand-nav .custom-nav-links::after {
  content: none !important;
  display: none !important;
}
body.ai-researcher .brand-nav .custom-nav-links > li > a {
  font-size: 13.5px !important;
}

@media (max-width: 1200px) {
  body.ai-researcher .brand-nav .custom-nav-links { gap: 14px !important; }
  body.ai-researcher .brand-nav .custom-nav-links > li > a { font-size: 12.5px !important; }
}

/* -------------------------------------------------------------
   HERO — availability line + wider lede for the new copy
   ------------------------------------------------------------- */

.hero-lede { max-width: 38ch; margin-bottom: 22px; }

.hero-availability {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 44ch;
  margin: 0 0 34px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--rust);
  background: rgba(235, 225, 203, 0.42);
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft) !important;
  opacity: 0;
  transform: translateY(12px);
  animation: dm-rise 900ms var(--ease-out) 620ms forwards;
}
.hero-availability .avail-text { flex: 1 1 auto; min-width: 0; }
.hero-availability strong { color: var(--ink); font-weight: 600; }
.avail-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--moss);
  transform: translateY(-2px);
  box-shadow: 0 0 0 0 rgba(107, 122, 94, 0.55);
  animation: avail-pulse 2600ms var(--ease) infinite;
}
@keyframes avail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107, 122, 94, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(107, 122, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 122, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .avail-dot { animation: none; }
}

/* Third floating action — "Start a project" (base rule pins 70px; widen it) */
body.ai-researcher .floating-actions .floating-hire {
  width: auto !important;
  padding: 0 18px !important;
  gap: 8px;
  white-space: nowrap;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
body.ai-researcher .floating-actions .floating-hire i { font-size: 15px !important; }
body.ai-researcher .floating-actions .floating-hire .floating-cv-text {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.ai-researcher .floating-actions .floating-hire i,
body.ai-researcher .floating-actions .floating-hire .floating-cv-text {
  color: var(--paper) !important;
}
body.ai-researcher .floating-actions .floating-hire:hover {
  background: var(--rust) !important;
  border-color: var(--rust) !important;
}

@media (max-width: 768px) {
  body.ai-researcher .floating-actions .floating-hire { display: none !important; }
}

/* -------------------------------------------------------------
   §02 · PRACTICE — capability cards
   ------------------------------------------------------------- */

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.practice-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  background: rgba(235, 225, 203, 0.28);
  position: relative;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease),
              background 360ms var(--ease), border-top-color 360ms var(--ease);
}
.practice-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--paper);
  border-top-color: var(--rust);
}
.practice-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.practice-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}
.practice-kind {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.practice-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 72;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2px 0 0;
}
.practice-card p {
  font-family: var(--f-body);
  font-size: 14.8px;
  line-height: 1.58;
  color: var(--ink-softer) !important;
  margin: 0;
}
.practice-card p em { font-style: italic; color: var(--rust-deep); }
.practice-items {
  list-style: none;
  padding: 14px 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.practice-items li {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.practice-card:hover .practice-items li {
  color: var(--ink-soft) !important;
  border-color: var(--line-strong);
}

@media (max-width: 1024px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .practice-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* -------------------------------------------------------------
   §04 · ENGAGE — engagement ledger
   ------------------------------------------------------------- */

.engage-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.engage-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background 280ms var(--ease), padding 280ms var(--ease);
}
.engage-row:hover { background: rgba(235, 225, 203, 0.38); padding-left: 12px; }

.engage-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.engage-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}
.engage-head h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 72;
  font-size: 27px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.engage-dur {
  display: inline-block;
  width: fit-content;
  margin-top: 4px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

.engage-body p {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-softer) !important;
  margin: 0 0 16px;
  max-width: 62ch;
}
.engage-deliv {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.engage-deliv li {
  position: relative;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink) !important;
  padding: 6px 13px 6px 26px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.engage-deliv li::before {
  content: "→";
  position: absolute;
  left: 10px;
  color: var(--rust);
  font-family: var(--f-mono);
  font-size: 11px;
}

@media (max-width: 860px) {
  .engage-row { grid-template-columns: 1fr; gap: 16px; }
}

/* Principles strip */
.principles {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  margin-top: 48px;
  padding: 28px 30px;
  border: 1px solid var(--line-strong);
  background: rgba(235, 225, 203, 0.4);
}
.principles-key {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
  padding-top: 4px;
}
.principles-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}
.principles-list li {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-softer) !important;
}
.principles-list li strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 36;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}

@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .principles-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   §03 · BUILDS — additions to the works grid
   ------------------------------------------------------------- */

.work-card-wide { grid-column: 1 / -1; }

.work-note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.work-meta {
  gap: 16px;
  flex-wrap: wrap;
}
.work-card p .mono {
  font-family: var(--f-mono);
  font-size: 0.86em;
  color: var(--rust-deep);
}
.work-card p strong { color: var(--ink); font-weight: 600; }
.work-card p em { font-style: italic; color: var(--rust-deep); }

@media (max-width: 900px) {
  .work-card-wide { grid-column: auto; }
}

/* -------------------------------------------------------------
   §09 · SUB-HEADINGS inside a merged section
   ------------------------------------------------------------- */

body.ai-researcher .sub-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-variation-settings: "SOFT" 40, "opsz" 72;
  font-size: 26px !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink) !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
}
body.ai-researcher .sub-head:not(:first-of-type) { margin-top: 56px !important; }
.sub-head-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   §10 · CONTACT — project brief
   ------------------------------------------------------------- */

.brief-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.brief-list li {
  position: relative;
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink) !important;
  padding-left: 22px;
}
.brief-list li::before {
  content: "§";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--rust);
}
.brief-note {
  margin-top: 16px !important;
  font-size: 13.5px !important;
  font-style: italic;
  color: var(--muted) !important;
}
.letter-cta {
  gap: 14px;
  flex-wrap: wrap;
}
.letter-to .letter-email + .letter-email { margin-top: 4px; }

@media (max-width: 700px) {
  .letter-cta { gap: 12px; }
}

/* -------------------------------------------------------------
   MOBILE NAV — Bootstrap collapses the index below 768px and the
   template ships no toggle button, which left phone visitors with
   no navigation at all. Show it as a compact wrapped index instead.
   ------------------------------------------------------------- */

@media (max-width: 767px) {
  body.ai-researcher .brand-nav.custom-navbar { padding: 18px 20px !important; }
  body.ai-researcher .brand-nav .container-fluid { flex-wrap: wrap; gap: 0; }
  body.ai-researcher .brand-nav .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100%;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    border-top: 1px solid var(--line);
    padding-top: 12px !important;
  }
  body.ai-researcher .brand-nav .custom-nav-links {
    justify-content: flex-start !important;
    gap: 9px 15px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.ai-researcher .brand-nav .custom-nav-links > li { margin: 0 !important; }
  body.ai-researcher .brand-nav .custom-nav-links > li > a {
    font-size: 12.5px !important;
    gap: 4px;
  }
  body.ai-researcher .brand-nav .custom-nav-links > li > a .nav-num { display: none; }
  body.ai-researcher .brand-nav .custom-nav-links > li > a::after { bottom: -3px; }
}

/* -------------------------------------------------------------
   §03 · BUILD THUMBNAILS — two fragments of the real interface,
   tilted in space over a field tinted with the project's accent.
   Images live in images/projects/ (see the README there): each
   card reads <slug>-a.jpg for the back slab and <slug>-b.jpg for
   the front one. Swap a file, the thumbnail changes.
   ------------------------------------------------------------- */

.work-card { padding: 0 0 22px; gap: 10px; }

.work-thumb {
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-deep);
  background-image: none !important;
  overflow: hidden;
  line-height: 0;
}

.thumb-field {
  --thumb-accent: var(--rust-deep);
  --thumb-accent-soft: rgba(196, 85, 45, .16);
  position: relative;
  aspect-ratio: 8 / 5.4;
  overflow: hidden;
  perspective: 1100px;
  background:
    radial-gradient(120% 92% at 18% 6%, var(--thumb-accent-soft), transparent 62%),
    linear-gradient(158deg, var(--paper), var(--paper-dark));
}
.thumb-rules {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}

.thumb-slab {
  position: absolute;
  display: block;
  overflow: hidden;
  line-height: 0;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow:
    0 22px 38px -18px rgba(46, 36, 24, .62),
    0 4px 10px -6px rgba(46, 36, 24, .38);
  transition: transform 820ms var(--ease-out), box-shadow 820ms var(--ease-out);
  backface-visibility: hidden;
}
.thumb-slab img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.thumb-slab-back {
  left: 10%; top: 8%; width: 66%; height: 66%;
  transform: rotateX(9deg) rotateY(-13deg) rotateZ(-1.5deg);
}
.thumb-slab-front {
  left: 39%; top: 31%; width: 57%; height: 61%;
  transform: rotateX(7deg) rotateY(-11deg) rotateZ(1deg);
}
.work-card:hover .thumb-slab-back  { transform: rotateX(5deg) rotateY(-8deg) translate3d(-7px, -6px, 16px); }
.work-card:hover .thumb-slab-front { transform: rotateX(4deg) rotateY(-7deg) translate3d(7px, 3px, 34px); }

.thumb-cap,
.thumb-chip {
  position: absolute;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.thumb-cap {
  left: 14px; bottom: 13px;
  color: var(--muted);
  background: rgba(241, 234, 217, .74);
  border-radius: 2px;
  padding: 4px 6px;
  margin: -4px -6px;
}
.thumb-chip {
  right: 14px; top: 14px;
  color: var(--thumb-accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .55);
}

/* Everything after the plate keeps the old inner padding */
.work-card > .work-tag,
.work-card > h3,
.work-card > p,
.work-card > .work-meta { margin-left: 26px; margin-right: 26px; }
.work-card > .work-tag { margin-top: 18px; }

body.ai-researcher .work-card h3 { font-size: 26px; line-height: 1.12; }

body.ai-researcher .work-card p.work-sub {
  font-family: var(--f-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin: -4px 26px 4px !important;
  line-height: 1.4;
}

/* Feature card — plate beside the text rather than above it */
.work-card-feature {
  padding: 0 0 22px;
  grid-template-columns: minmax(320px, 0.95fr) 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 34px;
  row-gap: 10px;
  align-items: start;
}
.work-card-feature > .work-thumb {
  grid-column: 1;
  grid-row: 1 / span 5;
  border-bottom: none;
  border-right: 1px solid var(--line-strong);
  align-self: stretch;
  display: block;
}
/* The feature collage fills its column instead of sitting in a band */
.work-card-feature > .work-thumb .thumb-field { aspect-ratio: auto; height: 100%; min-height: 440px; }
.work-card-feature > .work-thumb .thumb-slab-back  { left: 6%;  top: 10%; width: 74%; height: 52%; }
.work-card-feature > .work-thumb .thumb-slab-front { left: 26%; top: 42%; width: 70%; height: 50%; }
.work-card-feature > .work-tag  { grid-column: 2; grid-row: 1; margin: 22px 30px 0 0; }
.work-card-feature > h3         { grid-column: 2; grid-row: 2; margin: 0 30px 0 0; }
.work-card-feature > .work-sub  { grid-column: 2; grid-row: 3; margin: -4px 30px 4px 0 !important; }
.work-card-feature > p          { grid-column: 2; grid-row: 4; margin: 0 30px 0 0; }
.work-card-feature > .work-meta { grid-column: 2; grid-row: 5; margin: 0 30px 0 0; }

@media (max-width: 900px) {
  .work-card-feature { grid-template-columns: 1fr; grid-template-rows: auto; }
  .work-card-feature > .work-thumb {
    grid-column: 1; grid-row: auto;
    border-right: none;
    border-bottom: 1px solid var(--line-strong);
  }
  .work-card-feature > .work-thumb .thumb-field { aspect-ratio: 8 / 5.4; height: auto; min-height: 0; }
  .work-card-feature > .work-thumb .thumb-slab-back  { left: 10%; top: 8%;  width: 66%; height: 66%; }
  .work-card-feature > .work-thumb .thumb-slab-front { left: 39%; top: 31%; width: 57%; height: 61%; }
  .work-card-feature > .work-tag  { grid-column: 1; grid-row: auto; margin: 18px 26px 0; }
  .work-card-feature > h3,
  .work-card-feature > p,
  .work-card-feature > .work-meta { grid-column: 1; grid-row: auto; margin-left: 26px; margin-right: 26px; }
  .work-card-feature > .work-sub  { grid-column: 1; grid-row: auto; margin: -4px 26px 4px !important; }
}

/* =============================================================
   MOTION LAYER
   Animated figure plates, pointer-reactive cards, scroll-driven
   reveals. Every effect below is additive: without JS the page
   renders fully drawn and static (see the .js-fx guard).
   ============================================================= */

:root {
  --fx-fast: 420ms;
  --fx-mid:  700ms;
  --fx-slow: 1100ms;
}

/* -------------------------------------------------------------
   FIGURE PLATES — palette
   ------------------------------------------------------------- */

.plate { display: block; width: 100%; height: auto; }
.plate-bg   { fill: var(--paper-deep); }
.plate-rule { fill: none; stroke: var(--ink); stroke-opacity: .07; stroke-width: 1; }
.plate-head { fill: var(--ink); stroke: none; }
.plate-ink  { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.plate .s-rust  { stroke: var(--rust); }
.plate .s-slate { stroke: var(--slate); }
.plate .s-ink   { stroke: var(--ink); }
.plate .s-paper { stroke: var(--paper); }
.plate .f-rust  { fill: var(--rust);  stroke: none; }
.plate .f-slate { fill: var(--slate); stroke: none; }
.plate .f-ink   { fill: var(--ink);   stroke: none; }
.plate .f-muted { fill: var(--muted); fill-opacity: .5; stroke: none; }
.plate .f-paper { fill: var(--paper); }

.plate .faint { stroke-opacity: .5; stroke-width: 1.3; }
.plate .thin  { stroke-width: 1.5; }
.plate .bold  { stroke-width: 2.4; }
.plate .head  { stroke-width: 3; }
.plate .hexa  { stroke-width: 2.4; }
.plate .ring  { stroke-width: 1.3; stroke-dasharray: 5 5; }
.plate .cone  { stroke-width: 1.5; stroke-dasharray: 6 4; }
.plate .link  { stroke-width: 1.8; stroke-dasharray: 7 5; }

.plate * { transform-box: fill-box; transform-origin: center; }
/* Halo discs are fill-only; without this they inherit the 2px ink
   stroke from .plate-ink and read as a grey ring. */
.plate .fx-halo { stroke: none; }
.plate .fx-type > * { transform-origin: left center; }
.plate .fx-flow,
.plate .fx-flow-soft > * { stroke-dasharray: 7 6; stroke-width: 1.7; }
.plate .fx-flow-soft > * { stroke-dasharray: 5 5; stroke-width: 1.3; }

/* -------------------------------------------------------------
   PLATES — resting state (only once JS confirms it can animate)
   ------------------------------------------------------------- */

.js-fx .plate .fx-draw > *,
.js-fx .plate .fx-scan > *,
.js-fx .plate .fx-mesh > *,
.js-fx .plate .fx-flow-soft > *,
.js-fx .plate .fx-loop,
.js-fx .plate .fx-trace { stroke-dasharray: 1; stroke-dashoffset: 1; }

.js-fx .plate .fx-pop,
.js-fx .plate .fx-cell,
.js-fx .plate .fx-rank,
.js-fx .plate .fx-orbit,
.js-fx .plate .fx-cloud > *,
.js-fx .plate .fx-solve,
.js-fx .plate .fx-alert,
.js-fx .plate .fx-car,
.js-fx .plate .fx-shutter,
.js-fx .plate .fx-node,
.js-fx .plate .fx-core { opacity: 0; }

.js-fx .plate .fx-type > *,
.js-fx .plate .fx-lane > * { transform: scaleX(0); }
.js-fx .plate .fx-grow    { transform: scaleY(.05); transform-origin: bottom center; opacity: 0; }
.js-fx .plate .fx-ring    { transform: scale(.4); opacity: 0; }
.js-fx .plate .fx-flow    { opacity: 0; }
.js-fx .plate .fx-halo    { opacity: 0; }
.js-fx .plate .fx-limbs > *,
.js-fx .plate .fx-cone,
.js-fx .plate .fx-link    { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-fx .plate .fx-radio > *,
.js-fx .plate .fx-emit,
.js-fx .plate .fx-wave,
.js-fx .plate .fx-dust > * { opacity: 0; }

/* Stagger — one scale for every effect family */
.plate .fx-d1 { animation-delay: 90ms  !important; }
.plate .fx-d2 { animation-delay: 200ms !important; }
.plate .fx-d3 { animation-delay: 330ms !important; }
.plate .fx-d4 { animation-delay: 470ms !important; }
.plate .fx-d5 { animation-delay: 610ms !important; }
.plate .fx-d6 { animation-delay: 760ms !important; }

/* -------------------------------------------------------------
   PLATES — the reveal choreography, played once on scroll-in
   ------------------------------------------------------------- */

@keyframes p-draw  { to { stroke-dashoffset: 0; } }
@keyframes p-pop   { from { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes p-type  { to { transform: scaleX(1); } }
@keyframes p-grow  { to { transform: scaleY(1); opacity: 1; } }
@keyframes p-ring  { to { transform: scale(1); opacity: 1; } }
@keyframes p-fade  { to { opacity: 1; } }

.work-card.is-inview .plate .fx-draw > *,
.work-card.is-inview .plate .fx-scan > *,
.work-card.is-inview .plate .fx-mesh > *,
.work-card.is-inview .plate .fx-flow-soft > *,
.work-card.is-inview .plate .fx-limbs > *,
.work-card.is-inview .plate .fx-cone,
.work-card.is-inview .plate .fx-link,
.work-card.is-inview .plate .fx-loop,
.work-card.is-inview .plate .fx-trace {
  animation: p-draw var(--fx-slow) var(--ease-out) both;
}
.work-card.is-inview .plate .fx-pop,
.work-card.is-inview .plate .fx-cell,
.work-card.is-inview .plate .fx-rank,
.work-card.is-inview .plate .fx-orbit,
.work-card.is-inview .plate .fx-cloud > *,
.work-card.is-inview .plate .fx-solve,
.work-card.is-inview .plate .fx-alert,
.work-card.is-inview .plate .fx-car,
.work-card.is-inview .plate .fx-shutter,
.work-card.is-inview .plate .fx-node,
.work-card.is-inview .plate .fx-core {
  animation: p-pop var(--fx-fast) var(--ease-out) both;
}
.work-card.is-inview .plate .fx-type > *,
.work-card.is-inview .plate .fx-lane > * { animation: p-type var(--fx-mid) var(--ease-out) both; }
.work-card.is-inview .plate .fx-grow     { animation: p-grow var(--fx-slow) var(--ease-out) 400ms both; }
.work-card.is-inview .plate .fx-ring     { animation: p-ring var(--fx-mid) var(--ease-out) both; }
.work-card.is-inview .plate .fx-flow,
.work-card.is-inview .plate .fx-dust > *,
.work-card.is-inview .plate .fx-emit,
.work-card.is-inview .plate .fx-wave,
.work-card.is-inview .plate .fx-radio > * { animation: p-fade var(--fx-mid) var(--ease-out) 500ms both; }

/* Cloud points scatter in one by one rather than as a block */
.work-card.is-inview .plate .fx-cloud > *:nth-child(2) { animation-delay: 60ms; }
.work-card.is-inview .plate .fx-cloud > *:nth-child(3) { animation-delay: 120ms; }
.work-card.is-inview .plate .fx-cloud > *:nth-child(4) { animation-delay: 180ms; }
.work-card.is-inview .plate .fx-cloud > *:nth-child(5) { animation-delay: 240ms; }
.work-card.is-inview .plate .fx-cloud > *:nth-child(6) { animation-delay: 300ms; }
.work-card.is-inview .plate .fx-type > *:nth-child(2)  { animation-delay: 120ms; }
.work-card.is-inview .plate .fx-type > *:nth-child(3)  { animation-delay: 240ms; }
.work-card.is-inview .plate .fx-type > *:nth-child(4)  { animation-delay: 360ms; }
.work-card.is-inview .plate .fx-lane > *               { animation-duration: 900ms; }

/* -------------------------------------------------------------
   PLATES — the living loop, only while the card is on screen
   ------------------------------------------------------------- */

@keyframes p-flow  { to { stroke-dashoffset: -26; } }
@keyframes p-core  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.32); } }
@keyframes p-halo  { 0%, 100% { opacity: .28; transform: scale(.92); } 50% { opacity: .8; transform: scale(1.06); } }

.work-card.is-live .plate .fx-flow          { animation: p-fade var(--fx-mid) both, p-flow 1.5s linear 500ms infinite; }
.work-card.is-live .plate .fx-flow-soft > * { animation: p-draw var(--fx-slow) var(--ease-out) both, p-flow 2.4s linear 1.1s infinite; }
.work-card.is-live .plate .fx-core          { animation: p-pop var(--fx-fast) var(--ease-out) both, p-core 2.6s var(--ease) 600ms infinite; }
.work-card.is-live .plate .fx-halo          { animation: p-halo 2.6s var(--ease) 600ms infinite; }

/* Hover — the plate wakes fully up */
@keyframes p-scan  { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } }
@keyframes p-radio { 0% { opacity: 0; transform: scale(.75); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes p-emit  { 0% { transform: translateX(-14px); opacity: .25; } 50% { opacity: 1; } 100% { transform: translateX(14px); opacity: .25; } }
@keyframes p-wave  { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@keyframes p-alert { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.96); } }
@keyframes p-car   { 0% { transform: translateX(0); } 100% { transform: translateX(58px); } }
@keyframes p-shut  { 0%, 100% { transform: scale(1); } 45% { transform: scale(.82); } }
@keyframes p-ringr { to { transform: rotate(360deg); } }

.work-card:hover .plate .fx-flow          { animation-duration: var(--fx-mid), 800ms; }
.work-card:hover .plate .fx-scan > *      { animation: p-draw var(--fx-slow) var(--ease-out) both, p-scan 1.8s var(--ease) infinite; }
.work-card:hover .plate .fx-radio > *     { animation: p-radio 1.6s var(--ease-out) infinite; }
.work-card:hover .plate .fx-radio.fx-d2 > * { animation-delay: 300ms; }
.work-card:hover .plate .fx-emit          { animation: p-emit 2.6s var(--ease) infinite; }
.work-card:hover .plate .fx-emit.fx-d5    { animation-delay: 220ms; }
.work-card:hover .plate .fx-emit.fx-d6    { animation-delay: 440ms; }
.work-card:hover .plate .fx-wave          { animation: p-wave 1.5s var(--ease) infinite; }
.work-card:hover .plate .fx-alert         { animation: p-alert 1.4s var(--ease) infinite; }
.work-card:hover .plate .fx-car           { animation: p-pop var(--fx-fast) both, p-car 2.4s var(--ease) 400ms infinite; }
.work-card:hover .plate .fx-shutter       { animation: p-pop var(--fx-fast) both, p-shut 1.9s var(--ease) infinite; }
.work-card:hover .plate .fx-ring          { animation: p-ring var(--fx-mid) var(--ease-out) both, p-ringr 26s linear infinite; }
.work-card:hover .plate .fx-orbit         { animation: p-pop var(--fx-fast) both, p-core 3s var(--ease) infinite; }
.work-card:hover .plate .fx-orbit.fx-d3   { animation-delay: 0ms, 200ms; }
.work-card:hover .plate .fx-orbit.fx-d4   { animation-delay: 0ms, 400ms; }
.work-card:hover .plate .fx-orbit.fx-d5   { animation-delay: 0ms, 600ms; }
.work-card:hover .plate .fx-orbit.fx-d6   { animation-delay: 0ms, 800ms; }
.work-card:hover .plate .fx-solve         { animation: p-pop var(--fx-fast) both, p-core 1.8s var(--ease) infinite; }

/* -------------------------------------------------------------
   CARDS — pointer tilt + cursor spotlight
   ------------------------------------------------------------- */

.work-card,
.practice-card {
  --rx: 0deg; --ry: 0deg; --ty: 0px; --mx: 50%; --my: 50%; --spot: 0;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0);
  transform-style: preserve-3d;
  transition: transform 240ms var(--ease), box-shadow 360ms var(--ease), background 360ms var(--ease);
  will-change: transform;
}
.work-card::before,
.practice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--spot);
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(196, 85, 45, .13), transparent 65%);
  transition: opacity 300ms var(--ease);
}
.work-card.is-tilting,
.practice-card.is-tilting { transition: box-shadow 360ms var(--ease), background 360ms var(--ease); }

body.ai-researcher .work-card:hover {
  --ty: -5px;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0);
  box-shadow: 14px 18px 34px rgba(20, 18, 16, .16), 5px 5px 0 var(--ink);
  background: var(--paper);
}
body.ai-researcher .practice-card:hover {
  --ty: -5px;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0);
  box-shadow: 12px 16px 30px rgba(20, 18, 16, .14), 4px 4px 0 var(--ink);
}

/* Practice card — the rule under the title draws itself on hover */
.practice-card h3 { position: relative; padding-bottom: 8px; }
.practice-card h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}
.practice-card:hover h3::after { transform: scaleX(1); }
.practice-card .practice-num { transition: letter-spacing 380ms var(--ease); }
.practice-card:hover .practice-num { letter-spacing: 0.34em; }

/* -------------------------------------------------------------
   NAV — progress line, auto-hide, sliding active marker
   ------------------------------------------------------------- */

body.ai-researcher .brand-nav.custom-navbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(241, 234, 217, .82) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: transform 520ms var(--ease), padding 380ms var(--ease), box-shadow 380ms var(--ease);
}
body.ai-researcher .brand-nav.is-stuck {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  box-shadow: 0 1px 0 var(--line), 0 12px 28px -22px rgba(20, 18, 16, .5);
}
body.ai-researcher .brand-nav.is-hidden { transform: translateY(-104%); }

.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--rust), var(--rust-deep));
  z-index: 3;
}

body.ai-researcher .brand-nav .custom-nav-links > li > a .nav-num {
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
body.ai-researcher .brand-nav .custom-nav-links > li > a.nav-active .nav-num {
  transform: translateY(-3px) scale(1.12);
}

/* -------------------------------------------------------------
   RAIL — reading progress
   ------------------------------------------------------------- */

.rail-progress {
  position: fixed;
  left: 21px;
  top: 0;
  width: 1px;
  height: 100vh;
  background: var(--line);
  z-index: 900;
  pointer-events: none;
}
.rail-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--rust);
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
}
@media (max-width: 1200px) { .rail-progress { display: none; } }

/* -------------------------------------------------------------
   SECTION HEADS — masked reveal
   ------------------------------------------------------------- */

.js-fx .section-head .colorlib-heading .h-line {
  display: block;
  overflow: hidden;
  padding-bottom: .09em;
}
.js-fx .section-head .colorlib-heading .h-line > span {
  display: block;
  transform: translateY(105%) rotate(2.2deg);
  transition: transform 900ms var(--ease-out);
}
.js-fx .section-head.is-inview .colorlib-heading .h-line > span {
  transform: none;
}
.js-fx .section-head .colorlib-heading .h-line:nth-child(2) > span { transition-delay: 90ms; }
.js-fx .section-head .colorlib-heading .h-line:nth-child(3) > span { transition-delay: 180ms; }

.section-num { transition: color 400ms var(--ease); }
.js-fx .section-head .section-num,
.js-fx .section-head .heading-meta,
.js-fx .section-head .section-dek {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js-fx .section-head.is-inview .section-num,
.js-fx .section-head.is-inview .heading-meta,
.js-fx .section-head.is-inview .section-dek { opacity: 1; transform: none; }
.js-fx .section-head.is-inview .section-dek { transition-delay: 260ms; }
.js-fx .section-head.is-inview .heading-meta { transition-delay: 60ms; }

/* Hairline that draws across under the section head */
.section-head { position: relative; border-bottom: none; }
.section-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease-out) 200ms;
}
.js-fx .section-head.is-inview::after { transform: scaleX(1); }
html:not(.js-fx) .section-head::after { transform: scaleX(1); }

/* -------------------------------------------------------------
   ENGAGE — accent bar + staggered chips
   ------------------------------------------------------------- */

.engage-row { position: relative; }
.engage-row::before {
  content: "";
  position: absolute;
  left: -14px; top: 0; bottom: 0;
  width: 2px;
  background: var(--rust);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 560ms var(--ease-out);
}
.engage-row:hover::before { transform: scaleY(1); }
.engage-deliv li {
  transition: transform 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease);
}
.engage-row:hover .engage-deliv li { border-color: var(--line-strong); transform: translateY(-2px); }
.engage-row:hover .engage-deliv li:nth-child(2) { transition-delay: 60ms; }
.engage-row:hover .engage-deliv li:nth-child(3) { transition-delay: 120ms; }
.engage-dur { transition: background 380ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease); }
.engage-row:hover .engage-dur { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* -------------------------------------------------------------
   MARQUEE — capability ticker
   ------------------------------------------------------------- */

.ticker {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(235, 225, 203, .45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-group { display: flex; align-items: center; flex: 0 0 auto; }
.ticker-item {
  font-family: var(--f-display);
  font-size: 25px;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 60;
  letter-spacing: -0.015em;
  color: var(--ink-softer);
  padding: 0 26px;
  white-space: nowrap;
}
.ticker-item em { font-style: italic; color: var(--rust-deep); }
.ticker-sep {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rust);
  opacity: .55;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------
   HERO — headline mask, sheen, counters
   ------------------------------------------------------------- */

.js-fx .display-mark .dm-line {
  display: block;
  overflow: hidden;
  padding-bottom: .09em;
  opacity: 1;
  transform: none;
  animation: none;
}
.js-fx .display-mark .dm-line > span,
.js-fx .display-mark .dm-line > em {
  display: inline-block;
  transform: translateY(104%) rotate(3deg);
  animation: dm-mask 1150ms var(--ease-out) forwards;
}
.js-fx .display-mark .dm-line-2 > * { animation-delay: 140ms; }
@keyframes dm-mask { to { transform: none; } }

.metric-num { position: relative; display: inline-block; }
.metric { transition: transform 420ms var(--ease); }
.metric:hover { transform: translateY(-4px); }
.metric:hover .metric-num { color: var(--rust-deep); }

.hero-availability { position: relative; overflow: hidden; }
.hero-availability::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 244, .58) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 6.5s var(--ease) 2.4s infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 26%, 100% { transform: translateX(120%); } }

/* CTA — arrow travels out and back in */
.cta { overflow: hidden; }
.cta .cta-arrow { display: inline-block; }
.cta:hover .cta-arrow { animation: cta-arrow 620ms var(--ease-out); }
@keyframes cta-arrow {
  45%  { transform: translateX(16px); opacity: 0; }
  55%  { transform: translateX(-16px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* -------------------------------------------------------------
   REVEALS — richer than a fade
   ------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.988);
  filter: blur(3px);
  transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out), filter 820ms var(--ease-out);
}
.reveal.is-inview { opacity: 1; transform: none; filter: none; }
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

/* -------------------------------------------------------------
   REDUCED MOTION — everything above collapses to a static page
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-fx .plate *,
  .work-card .plate *,
  .ticker-track,
  .hero-availability::after,
  .cta:hover .cta-arrow {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .js-fx .plate .fx-halo { opacity: .4 !important; }
  /* Collage slabs keep their static tilt; only the movement stops */
  .thumb-slab { transition: none !important; }
  .work-card:hover .thumb-slab-back  { transform: rotateX(9deg) rotateY(-13deg) rotateZ(-1.5deg); }
  .work-card:hover .thumb-slab-front { transform: rotateX(7deg) rotateY(-11deg) rotateZ(1deg); }
  .work-card, .practice-card { transform: none !important; }
  .work-card::before, .practice-card::before { display: none; }
  .js-fx .display-mark .dm-line > span,
  .js-fx .display-mark .dm-line > em,
  .js-fx .section-head .colorlib-heading .h-line > span { transform: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .section-head::after { transform: scaleX(1) !important; }
  .rail-progress, .scroll-progress { display: none; }
}

/* The section head animates its own parts, so opt it out of the
   blanket reveal transform while still using .is-inview. */
.js-fx .section-head.reveal { opacity: 1; transform: none; filter: none; }
.metric-plus { transition: opacity 320ms var(--ease) 240ms; }

/* -------------------------------------------------------------
   MOBILE — a sticky nav can't afford two wrapped rows of links,
   so the index becomes one horizontally scrollable strip.
   ------------------------------------------------------------- */

@media (max-width: 767px) {
  body.ai-researcher .brand-nav.custom-navbar { padding: 14px 0 0 !important; }
  body.ai-researcher .brand-nav .container-fluid { padding: 0 20px !important; }
  body.ai-researcher .brand-nav .navbar-collapse.collapse {
    margin: 12px 0 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  body.ai-researcher .brand-nav .custom-nav-links {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 2px !important;
    gap: 18px !important;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  body.ai-researcher .brand-nav .custom-nav-links::-webkit-scrollbar { display: none; }
  body.ai-researcher .brand-nav .custom-nav-links > li { flex: 0 0 auto; scroll-snap-align: start; }
  body.ai-researcher .brand-nav.is-stuck { padding-top: 10px !important; }

  .ticker { padding: 16px 0; }
  .ticker-item { font-size: 18px; padding: 0 18px; }
  .ticker-sep { width: 5px; height: 5px; }
  .ticker-track { animation-duration: 34s; }
}

/* =============================================================
   FIGURE PLATES v2 — tonal, isometric, textured
   Flat line art read as "clip art"; these are built like engraved
   technical plates: layered faces, halftone ground, plate chrome.
   ============================================================= */

/* Plate chrome ------------------------------------------------- */
.plate-halftone { opacity: .5; }
.plate-frame {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .38;
  stroke-width: 1.2;
}
.plate-frame .plate-hair { stroke-opacity: .16; stroke-width: 1; }
.plate-fig,
.plate-cap {
  font-family: var(--f-mono);
  font-size: 8.6px;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--muted);
  stroke: none;
}
.plate-fig { fill: var(--rust); }

/* Tonal fills — the depth ladder. Top faces lightest. ---------- */
.plate .ft-paper { fill: #F6EFDF; stroke: none; }
.plate .ft-1 { fill: var(--ink); fill-opacity: .06; stroke: none; }
.plate .ft-2 { fill: var(--ink); fill-opacity: .14; stroke: none; }
.plate .ft-3 { fill: var(--ink); fill-opacity: .24; stroke: none; }
.plate .none-f { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-opacity: .8; }

.plate .fr-1 { fill: var(--rust); fill-opacity: .16; stroke: none; }
.plate .fr-2 { fill: var(--rust); fill-opacity: .34; stroke: none; }
.plate .fr-3 { fill: var(--rust); fill-opacity: .62; stroke: none; }
.plate .fr-solid { fill: url(#pgrad-rust); stroke: none; }
.plate .fs-2 { fill: var(--slate); fill-opacity: .34; stroke: none; }
.plate .fs-3 { fill: var(--slate); fill-opacity: .62; stroke: none; }
.plate .fs-solid { fill: var(--slate); stroke: none; }
.plate .fk-2 { fill: var(--ink); fill-opacity: .52; stroke: none; }
.plate .fk-3 { fill: var(--ink); fill-opacity: .74; stroke: none; }
.plate .fk-solid { fill: var(--ink); stroke: none; }

.plate .hatch-k,
.plate .hatch-r { stroke: none; }

/* Stroke weights ----------------------------------------------- */
.plate .w2 { stroke-width: 2; }
.plate .w3 { stroke-width: 2.8; }
.plate .ring2 { stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; }
.plate .orbit-ring { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1.2; stroke-dasharray: 3 7; }
.plate .cl-rust  { fill: var(--rust);  fill-opacity: .10; stroke: var(--rust);  stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 5 5; }
.plate .cl-slate { fill: var(--slate); fill-opacity: .10; stroke: var(--slate); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 5 5; }
.plate .cl-ink   { fill: var(--ink);   fill-opacity: .07; stroke: var(--ink);   stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 5 5; }

.plate-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Two draw channels so outlines over fills can be staged apart --- */
.js-fx .plate .fx-draw-1 > *,
.js-fx .plate .fx-draw-2 > *,
.js-fx .plate .fx-draw-1,
.js-fx .plate .fx-grid > *,
.js-fx .plate .fx-tick > *,
.js-fx .plate .fx-scanline > * { stroke-dasharray: 1; stroke-dashoffset: 1; }

.js-fx .plate .fx-rise { opacity: 0; transform: translateY(9px); }
.js-fx .plate .fx-scan > * { opacity: 0; }

.work-card.is-inview .plate .fx-draw-1 > *,
.work-card.is-inview .plate .fx-draw-2 > *,
.work-card.is-inview .plate .fx-draw-1,
.work-card.is-inview .plate .fx-grid > *,
.work-card.is-inview .plate .fx-tick > *,
.work-card.is-inview .plate .fx-scanline > * {
  animation: p-draw var(--fx-slow) var(--ease-out) both;
}
.work-card.is-inview .plate .fx-draw-2 > * { animation-delay: 260ms; }
.work-card.is-inview .plate .fx-rise { animation: p-rise var(--fx-mid) var(--ease-out) both; }
.work-card.is-inview .plate .fx-scan > * { animation: p-fade var(--fx-slow) var(--ease-out) 620ms both; }

@keyframes p-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Sharpen the tiny plate label at the size it actually renders */
@media (max-width: 900px) {
  .plate-fig, .plate-cap { font-size: 9.4px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .js-fx .plate .fx-rise,
  .js-fx .plate .fx-scan > * { opacity: 1 !important; transform: none !important; }
}
.plate .drop { stroke: var(--ink); stroke-opacity: .30; stroke-width: 1.2; stroke-dasharray: 2 4; fill: none; }

/* =============================================================
   MULTI-PAGE LAYER
   Three pages, compact components. The long-prose components
   (prose-grid, chronicle, biblio, capability-matrix) are gone;
   what replaces them is scannable at a glance.
   ============================================================= */

/* Pages without a hero need top clearance under the sticky nav */
.page-main .jp-section.jp-first { padding-top: 78px !important; border-top: none; }
.page-main .jp-section.jp-first .section-head { margin-bottom: 48px; }

/* Nav — cross-page links */
body.ai-researcher .brand-nav .custom-nav-links > li > a.page-link { font-size: 15px !important; }
@media (max-width: 767px) {
  body.ai-researcher .brand-nav .custom-nav-links > li > a.page-link { font-size: 13.5px !important; }
}

/* -------------------------------------------------------------
   FACTS GRID — the profile in six cells, no paragraphs
   ------------------------------------------------------------- */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 24px 22px;
  background: var(--paper);
  transition: background 300ms var(--ease);
}
.fact:hover { background: var(--paper-deep); }
.fact-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.fact-val {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 48;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.fact-val em { font-style: italic; color: var(--rust-deep); }

@media (max-width: 900px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   CV LIST — career & education as one scannable ledger
   ------------------------------------------------------------- */

.cv-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.cv-row {
  display: grid;
  grid-template-columns: 132px minmax(230px, 1fr) 1.15fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background 260ms var(--ease), padding 260ms var(--ease);
}
.cv-row:hover { background: rgba(235, 225, 203, .42); padding-left: 12px; }
.cv-when {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rust);
  white-space: nowrap;
}
.cv-what { display: flex; flex-direction: column; gap: 3px; }
.cv-what strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 48;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.cv-org {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--muted) !important;
}
a.cv-org:hover { color: var(--rust-deep) !important; }
.cv-note {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-softer) !important;
}
.cv-note em { font-style: italic; color: var(--rust-deep); }

@media (max-width: 860px) {
  .cv-row { grid-template-columns: 1fr; gap: 6px; }
  .cv-when { font-size: 11px; }
}

/* -------------------------------------------------------------
   PUBLICATIONS — title, venue, year. Nothing else.
   ------------------------------------------------------------- */

.pub-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.pub-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: background 260ms var(--ease), padding 260ms var(--ease);
}
.pub-row:hover { background: rgba(235, 225, 203, .42); padding-left: 12px; }
.pub-year {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--rust);
}
.pub-body { display: flex; flex-direction: column; gap: 5px; }
.pub-body > a {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 60;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink) !important;
}
.pub-venue {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--muted);
}

@media (max-width: 700px) { .pub-row { grid-template-columns: 1fr; gap: 6px; } }

/* -------------------------------------------------------------
   BRING LIST — what a client gets, one line each
   ------------------------------------------------------------- */

.bring-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.bring-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px 24px;
  background: var(--paper);
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-softer) !important;
  transition: background 300ms var(--ease);
}
.bring-list li:hover { background: var(--paper-deep); }
.bring-list li strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 48;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

@media (max-width: 700px) { .bring-list { grid-template-columns: 1fr; } }

/* Expertise cards carry no paragraph now — pull the chips up */
.practice-card > h3 + .practice-items { margin-top: 16px; }
.practice-card .practice-items { border-top: 1px solid var(--line); padding-top: 16px; }

/* Engagement rows lost their paragraph — tighten the grid */
.engage-body p:empty { display: none; }
.engage-row { padding: 24px 0; }

/* -------------------------------------------------------------
   PAGE-TO-PAGE CTA
   ------------------------------------------------------------- */

.page-next {
  display: flex;
  justify-content: flex-end;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px dashed var(--line-strong);
}
@media (max-width: 600px) { .page-next { justify-content: flex-start; } }

/* Footer nav row */
.colophon-meta p a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =============================================================
   NAV — index centred in the bar
   ============================================================= */

@media (min-width: 768px) {
  body.ai-researcher .brand-nav .container-fluid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  body.ai-researcher .brand-nav .brand-mark { margin-right: 0; grid-column: 1; }
  body.ai-researcher .brand-nav .navbar-collapse {
    grid-column: 2;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.ai-researcher .brand-nav .custom-nav-links {
    float: none !important;
    margin: 0 !important;
    justify-content: center !important;
    flex-wrap: nowrap;
  }
}

/* -------------------------------------------------------------
   FACTS GRID — separators drawn per cell, so an odd number of
   facts leaves paper in the gap rather than a phantom tile.
   ------------------------------------------------------------- */

.facts-grid {
  gap: 0;
  background: var(--paper);
  overflow: hidden;
}
.fact { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }

/* A trailing fact stretches to close its row, so an odd count never
   leaves an outlined empty tile. */
@media (min-width: 901px) {
  .facts-grid .fact:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .facts-grid .fact:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .facts-grid .fact:last-child:nth-child(2n + 1) { grid-column: span 2; }
}

/* =============================================================
   PACKAGES — the three things a client can buy
   ============================================================= */

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.pkg-card {
  --rx: 0deg; --ry: 0deg; --ty: 0px; --mx: 50%; --my: 50%; --spot: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--ink);
  position: relative;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0);
  transition: transform 240ms var(--ease), box-shadow 360ms var(--ease),
              border-top-color 360ms var(--ease), background 360ms var(--ease);
}
.pkg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--spot);
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(196, 85, 45, .13), transparent 65%);
  transition: opacity 300ms var(--ease);
}
.pkg-card:hover {
  --ty: -6px;
  border-top-color: var(--rust);
  box-shadow: 14px 18px 34px rgba(20, 18, 16, .15), 5px 5px 0 var(--ink);
}

.pkg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pkg-num {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 72;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rust);
}
.pkg-kind {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pkg-card:hover .pkg-kind { color: var(--ink-soft); border-color: var(--line-strong); }

body.ai-researcher .pkg-card h3 {
  font-family: var(--f-display) !important;
  font-weight: 500 !important;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}

.pkg-promise {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft) !important;
  margin: 0 0 10px !important;
}
.pkg-for {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted) !important;
  margin: 0 0 18px !important;
}

.pkg-includes {
  list-style: none;
  padding: 18px 0 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-includes li {
  position: relative;
  padding-left: 22px;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-softer) !important;
}
.pkg-includes li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--rust);
}

.pkg-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.pkg-dur {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}

@media (max-width: 1000px) { .pkg-grid { grid-template-columns: 1fr; gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .pkg-card { transform: none !important; }
  .pkg-card::before { display: none; }
}