body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    .page-section {
      display: none;
      animation: fadeIn 0.28s ease-out;
    }
    .page-section.active {
      display: block;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media print {
      .no-print { display: none !important; }
      .page-section { display: block !important; }
    }

/* Fade the portrait into the hero surface instead of cutting off its dark backdrop. */
.hero-portrait { background: #0f172a; }
.hero-portrait-image {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 69%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 69%, transparent 100%);
}
.hero-portrait-blend {
  background: linear-gradient(to top, #0f172a 0%, rgb(15 23 42 / 15%) 29%, transparent 64%);
}
@media (min-width: 1024px) {
  .hero-portrait-image {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .hero-portrait-blend {
    background: linear-gradient(to right, #0f172a 0%, rgb(15 23 42 / 28%) 38%, transparent 75%),
      linear-gradient(to top, rgb(15 23 42 / 90%), transparent 30%);
  }
}

/* Light theme inspired by the supplied Juniper / Toffee / Alabaster palette.
   Scoped overrides also cover cards and filters generated by js/app.js. */
.theme-light {
  color-scheme: light;
  --alabaster: #f3e5ca;
  --paper: #fff8eb;
  --juniper: #12382d;
  --juniper-muted: #254c3d;
  --toffee: #825022;
  --ink: #192f28;
  --line: #d7c7a9;
}
.theme-light body { background-color: var(--alabaster) !important; color: var(--ink) !important; }
.theme-light .hero-portrait { background: var(--paper); }
.theme-light .hero-portrait-image { filter: saturate(.85) sepia(.08); }
.theme-light .hero-portrait-blend {
  background: linear-gradient(to top, var(--paper) 0%, rgb(255 248 235 / 18%) 32%, transparent 67%);
}
@media (min-width: 1024px) {
  .theme-light .hero-portrait-blend {
    background: linear-gradient(to right, var(--paper) 0%, rgb(255 248 235 / 35%) 42%, transparent 78%),
      linear-gradient(to top, rgb(255 248 235 / 85%), transparent 32%);
  }
}
.theme-light [class~="bg-slate-950"],
.theme-light [class~="bg-slate-950/90"],
.theme-light [class~="bg-slate-950/85"],
.theme-light [class~="bg-slate-950/80"],
.theme-light [class~="bg-slate-950/70"] { background-color: var(--alabaster) !important; }
.theme-light header[class~="bg-slate-950/85"] { background-color: rgb(243 229 202 / 94%) !important; }
.theme-light [class~="bg-slate-900"],
.theme-light [class~="bg-slate-900/90"],
.theme-light [class~="bg-slate-900/85"],
.theme-light [class~="bg-slate-900/80"],
.theme-light [class~="bg-slate-900/70"],
.theme-light [class~="bg-slate-900/60"] { background-color: var(--paper) !important; }
.theme-light [class~="bg-slate-800"],
.theme-light [class~="bg-slate-800/60"],
.theme-light [class~="bg-slate-700"] { background-color: #ecdfc7 !important; }
.theme-light [class~="border-slate-800"],
.theme-light [class~="border-slate-800/80"],
.theme-light [class~="border-slate-800/90"],
.theme-light [class~="border-slate-700"],
.theme-light [class~="divide-slate-800/70"] { border-color: var(--line) !important; }
.theme-light [class~="text-white"],
.theme-light [class~="text-slate-100"],
.theme-light [class~="text-slate-200"] { color: var(--ink) !important; }
.theme-light [class~="text-slate-300"] { color: #3e5043 !important; }
.theme-light [class~="text-slate-400"] { color: #635844 !important; }
.theme-light [class~="placeholder-slate-500"]::placeholder { color: #756b59 !important; }
.theme-light [class~="text-blue-300"],
.theme-light [class~="text-blue-400"],
.theme-light [class~="text-indigo-300"],
.theme-light [class~="text-indigo-400"],
.theme-light [class~="text-emerald-300"],
.theme-light [class~="text-emerald-400"] { color: var(--juniper-muted) !important; }
.theme-light [class~="text-amber-300"],
.theme-light [class~="text-amber-400"],
.theme-light [class~="text-purple-300"],
.theme-light [class~="text-purple-400"] { color: var(--toffee) !important; }
.theme-light [class~="bg-blue-600"],
.theme-light [class~="bg-blue-500"],
.theme-light [class~="bg-indigo-500"],
.theme-light [class~="bg-indigo-600"] { background-color: var(--juniper) !important; }
.theme-light [class~="bg-blue-600/90"],
.theme-light [class~="bg-emerald-600/90"],
.theme-light [class~="bg-emerald-600"],
.theme-light [class~="bg-amber-600"] { background-color: var(--toffee) !important; }
.theme-light [class~="bg-blue-500/10"],
.theme-light [class~="bg-blue-500/15"],
.theme-light [class~="bg-emerald-500/10"],
.theme-light [class~="bg-emerald-500/15"],
.theme-light [class~="bg-indigo-500/10"],
.theme-light [class~="bg-indigo-500/15"] { background-color: #e3eadb !important; }
.theme-light [class~="bg-amber-500/10"],
.theme-light [class~="bg-amber-500/15"],
.theme-light [class~="bg-purple-500/15"] { background-color: #f0dec3 !important; }
.theme-light [class~="border-blue-500/30"],
.theme-light [class~="border-emerald-500/30"],
.theme-light [class~="border-indigo-500/30"] { border-color: #94a995 !important; }
.theme-light [class~="border-amber-500/30"] { border-color: #ba9871 !important; }
.theme-light [class~="bg-gradient-to-br"][class~="from-blue-500"] {
  background-image: linear-gradient(to bottom right, var(--juniper), var(--toffee)) !important;
}
.theme-light [class~="from-slate-900"] {
  --tw-gradient-from: #fff8eb var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 248 235 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.theme-light [class~="via-slate-900/25"],
.theme-light [class~="via-slate-900/30"] {
  --tw-gradient-to: rgb(255 248 235 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 248 235 / 30%) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.theme-light [class~="bg-slate-950/80"].fixed.inset-0 { background-color: rgb(18 56 45 / 65%) !important; }
.theme-light [class~="hover:bg-slate-800"]:hover,
.theme-light [class~="hover:bg-slate-800/60"]:hover,
.theme-light [class~="hover:bg-slate-700"]:hover { background-color: #e2d2b7 !important; }
.theme-light [class~="hover:text-white"]:hover { color: var(--juniper) !important; }
.theme-light [class~="hover:bg-blue-600"]:hover,
.theme-light [class~="hover:bg-blue-500"]:hover,
.theme-light [class~="group-hover:bg-blue-600"]:hover,
.theme-light .group:hover [class~="group-hover:bg-blue-600"] { background-color: var(--juniper-muted) !important; color: #fff8eb !important; }
/* Keep project-card hover cues soft and legible against the Juniper light palette. */
.theme-light #flagship-projects-grid > div:hover {
  background-color: #e3eadb !important;
  border-color: #94a995 !important;
}
.theme-light #flagship-projects-grid button:hover,
.theme-light #flagship-projects-grid button:focus-visible {
  background-color: #d6e7d5 !important;
  color: var(--juniper) !important;
}
/* Keep the consulting directory row highlight consistent with project cards. */
.theme-light #clients-table-body tr:hover {
  background-color: #e3eadb !important;
}
.theme-light [class~="bg-blue-600"][class~="text-white"],
.theme-light [class~="bg-blue-500"][class~="text-white"],
.theme-light [class~="bg-blue-600/90"][class~="text-white"],
.theme-light [class~="bg-emerald-600"][class~="text-white"],
.theme-light [class~="bg-emerald-600/90"][class~="text-white"],
.theme-light [class~="bg-amber-600"][class~="text-white"],
.theme-light [class~="bg-gradient-to-br"][class~="text-white"] { color: #fff8eb !important; }
.theme-light input, .theme-light textarea, .theme-light select { color-scheme: light; }
.theme-light [class~="focus:border-blue-500"]:focus { border-color: var(--juniper) !important; }
.theme-light [class~="selection:bg-blue-500"]::selection { background: var(--juniper); color: #fff8eb; }
@media print { .theme-light body { background-color: #fff !important; } }

/* Home-page services CTA: separate from Tailwind theme overrides in both modes. */
.adaptive-cta {
  background: linear-gradient(110deg, #102a29, #162438);
  border: 1px solid #385966;
  color: #f8fafc;
}
.adaptive-cta-eyebrow { color: #86efac; }
.adaptive-cta-description { color: #d1dce1; }
.adaptive-cta-link { background: #34d399; color: #092c24; }
.adaptive-cta-link:hover { background: #a7f3d0; }
.adaptive-cta-link:focus-visible { outline: 3px solid #a7f3d0; outline-offset: 3px; }
.theme-light .adaptive-cta {
  background: #e3eadb;
  border-color: #94a995;
  color: var(--juniper);
}
.theme-light .adaptive-cta-eyebrow { color: var(--juniper-muted); }
.theme-light .adaptive-cta-description { color: var(--ink); }
.theme-light .adaptive-cta-link { background: var(--juniper); color: var(--paper); }
.theme-light .adaptive-cta-link:hover { background: var(--juniper-muted); }
.theme-light .adaptive-cta-link:focus-visible { outline-color: var(--juniper); }

/* Floating assistant: intentionally uses explicit colors in both themes. */
.portfolio-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; font-family: 'Inter', sans-serif; }
.chat-toggle, .chat-form button { border: 0; border-radius: 1rem; background: #2563eb; color: white; padding: .8rem 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 25px #0005; }
.chat-toggle:focus-visible, .chat-panel button:focus-visible, .chat-panel input:focus-visible, .chat-sources a:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.chat-panel { width: min(24rem, calc(100vw - 2rem)); height: min(31rem, calc(100dvh - 6rem)); background: #0f172a; border: 1px solid #475569; border-radius: 1.2rem; color: #f8fafc; box-shadow: 0 22px 45px #0009; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid #334155; }
.chat-header h2 { font-weight: 700; font-size: 1rem; }
.chat-header p, .chat-disclaimer { color: #cbd5e1; font-size: .75rem; }
.chat-header button { background: transparent; color: #f8fafc; border: 0; cursor: pointer; padding: .2rem .5rem; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.chat-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; padding: .7rem .85rem; border-radius: .85rem; max-width: 92%; background: #334155; align-self: flex-start; }
.chat-user { background: #1d4ed8; color: white; align-self: flex-end; }
.chat-sources { display: flex; flex-wrap: wrap; gap: .35rem .65rem; border-top: 1px solid #64748b; margin-top: .5rem; padding-top: .4rem; }
.chat-sources a { color: #bfdbfe; text-decoration: underline; font-size: .75rem; }
.chat-form { display: flex; gap: .5rem; padding: .7rem 1rem 0; border-top: 1px solid #334155; }
.chat-form input { flex: 1; min-width: 0; padding: .65rem; border-radius: .6rem; border: 1px solid #64748b; color: #f8fafc; background: #1e293b; }
.chat-form input::placeholder { color: #cbd5e1; }
.chat-form button { border-radius: .6rem; padding: .6rem .8rem; box-shadow: none; }
.chat-form button:disabled { opacity: .55; cursor: wait; }
.chat-disclaimer { padding: .5rem 1rem .7rem; line-height: 1.35; }
.theme-light .chat-panel { background: #fff8eb; color: #192f28; border-color: #825022; }
.theme-light .chat-header, .theme-light .chat-form { border-color: #d7c7a9; }
.theme-light .chat-header p, .theme-light .chat-disclaimer { color: #254c3d; }
.theme-light .chat-header button { color: #192f28; }
.theme-light .chat-message { background: #e3eadb; color: #192f28; }
.theme-light .chat-user { background: #12382d; color: #fff8eb; }
.theme-light .chat-sources a { color: #12382d; }
.theme-light .chat-form input { color: #192f28; background: white; border-color: #825022; }
.theme-light .chat-form input::placeholder { color: #254c3d; }
.theme-light .chat-toggle, .theme-light .chat-form button { background: #12382d; color: #fff8eb; }