/* Neural Ether theme tokens — dark is default, .light swaps the palette */

:root {
  /* Dark (default) — obsidian + electric signals */
  --c-background: 19 19 20;
  --c-surface: 19 19 20;
  --c-surface-dim: 19 19 20;
  --c-surface-bright: 58 57 58;
  --c-surface-container-lowest: 14 14 15;
  --c-surface-container-low: 28 27 28;
  --c-surface-container: 32 31 32;
  --c-surface-container-high: 42 42 43;
  --c-surface-container-highest: 53 52 54;
  --c-surface-variant: 53 52 54;

  --c-on-background: 229 226 227;
  --c-on-surface: 229 226 227;
  --c-on-surface-variant: 195 198 215;

  --c-primary: 180 197 255;              /* #b4c5ff */
  --c-primary-container: 23 90 223;      /* #175adf */
  --c-on-primary: 0 42 119;
  --c-on-primary-container: 218 225 255;
  --c-on-primary-fixed: 0 23 75;
  --c-primary-fixed: 219 225 255;
  --c-primary-fixed-dim: 180 197 255;

  --c-secondary: 237 255 225;            /* #edffe1 */
  --c-secondary-container: 40 255 30;    /* #28ff1e */
  --c-on-secondary: 0 58 0;
  --c-on-secondary-container: 1 113 0;
  --c-secondary-fixed: 119 255 97;
  --c-secondary-fixed-dim: 0 230 2;

  --c-tertiary: 198 198 199;
  --c-tertiary-container: 99 101 101;
  --c-tertiary-fixed: 226 226 226;
  --c-tertiary-fixed-dim: 198 198 199;

  --c-outline: 141 144 160;
  --c-outline-variant: 67 70 84;

  --c-error: 255 180 171;
  --c-on-error: 105 0 5;
  --c-error-container: 147 0 10;
  --c-on-error-container: 255 218 214;

  --c-inverse-primary: 4 83 217;
  --c-inverse-surface: 229 226 227;
  --c-inverse-on-surface: 49 48 49;

  --glow-primary: rgba(23, 90, 223, 0.15);
  --glow-secondary: rgba(40, 255, 30, 0.10);
}

:root.light {
  /* Light — paper-white background with the SAME electric signals */
  --c-background: 250 250 251;
  --c-surface: 250 250 251;
  --c-surface-dim: 238 238 240;
  --c-surface-bright: 255 255 255;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 246 246 248;
  --c-surface-container: 241 241 244;
  --c-surface-container-high: 234 234 238;
  --c-surface-container-highest: 226 226 231;
  --c-surface-variant: 226 226 231;

  --c-on-background: 23 24 28;
  --c-on-surface: 23 24 28;
  --c-on-surface-variant: 70 74 88;

  --c-primary: 23 90 223;                /* invert: container becomes primary */
  --c-primary-container: 218 225 255;
  --c-on-primary: 255 255 255;
  --c-on-primary-container: 0 23 75;
  --c-on-primary-fixed: 0 23 75;
  --c-primary-fixed: 23 90 223;
  --c-primary-fixed-dim: 4 65 180;

  --c-secondary: 28 126 28;              /* #1c7e1c — readable green on white */
  --c-secondary-container: 183 240 169;
  --c-on-secondary: 255 255 255;
  --c-on-secondary-container: 1 50 0;
  --c-secondary-fixed: 1 90 0;
  --c-secondary-fixed-dim: 1 120 0;

  --c-tertiary: 70 74 88;
  --c-tertiary-container: 226 226 231;
  --c-tertiary-fixed: 40 43 50;
  --c-tertiary-fixed-dim: 90 94 108;

  --c-outline: 113 117 131;
  --c-outline-variant: 196 199 213;

  --c-error: 186 26 26;
  --c-on-error: 255 255 255;
  --c-error-container: 255 218 214;
  --c-on-error-container: 65 0 2;

  --c-inverse-primary: 180 197 255;
  --c-inverse-surface: 23 24 28;
  --c-inverse-on-surface: 246 246 248;

  --glow-primary: rgba(23, 90, 223, 0.12);
  --glow-secondary: rgba(28, 126, 28, 0.08);
}

/* Smooth palette swap */
html, body {
  transition: background-color 320ms ease, color 320ms ease;
}

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.fill-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Neural glows — ambient depth */
.neural-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
  background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
}
.neural-glow.accent {
  background: radial-gradient(circle, var(--glow-secondary) 0%, transparent 70%);
}

/* Signature gradient utility */
.neural-gradient {
  background: linear-gradient(135deg, rgb(var(--c-primary-container)) 0%, rgb(var(--c-secondary-container)) 100%);
}
.text-neural-gradient {
  background: linear-gradient(135deg, rgb(var(--c-primary-container)) 0%, rgb(var(--c-secondary-container)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:root.light .text-neural-gradient {
  background: linear-gradient(135deg, #0b3fa8 0%, #1c7e1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass panel — glassmorphism */
.glass-panel {
  background: rgb(var(--c-surface-variant) / 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Hide content that should animate in */
[data-hidden-until-ready] { opacity: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-outline-variant));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-outline)); }

/* Focus ring consistent across themes */
:focus-visible {
  outline: 2px solid rgb(var(--c-primary));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print — keep it clean, light regardless */
@media print {
  :root { color-scheme: light; }
  .no-print { display: none !important; }
}

/* ── Article prose ─────────────────────────────────────────────────────────
   Applied to HTML authored in the Ivoire.pro back office, which ships plain
   <p>/<h2>/<ul> with no classes. Scoped so it can never leak into the
   hand-authored pages. */
.ivp-prose { font-size: 1.0625rem; line-height: 1.8; }
.ivp-prose > * + * { margin-top: 1.5em; }
.ivp-prose h2,
.ivp-prose h3,
.ivp-prose h4 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: rgb(var(--c-on-surface));
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 2.5em;
  scroll-margin-top: 6rem;
}
.ivp-prose h2 { font-size: 1.75rem; }
.ivp-prose h3 { font-size: 1.375rem; }
.ivp-prose h4 { font-size: 1.125rem; }
.ivp-prose strong { color: rgb(var(--c-on-surface)); font-weight: 600; }
.ivp-prose em { font-style: italic; }
.ivp-prose a {
  color: rgb(var(--c-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--c-primary) / 0.4);
}
.ivp-prose a:hover { text-decoration-color: rgb(var(--c-primary)); }
.ivp-prose ul,
.ivp-prose ol { padding-left: 1.5em; }
.ivp-prose ul { list-style: disc; }
.ivp-prose ol { list-style: decimal; }
.ivp-prose li::marker { color: rgb(var(--c-secondary-fixed-dim)); }
.ivp-prose li + li { margin-top: 0.5em; }
.ivp-prose blockquote {
  border-left: 2px solid rgb(var(--c-secondary-fixed-dim));
  padding-left: 1.25em;
  color: rgb(var(--c-on-surface));
  font-style: italic;
}
.ivp-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--c-outline-variant) / 0.2);
}
.ivp-prose figure figcaption {
  margin-top: 0.75em;
  font-family: Inter, sans-serif;
  font-size: 0.8125rem;
  color: rgb(var(--c-on-surface-variant) / 0.7);
  text-align: center;
}
.ivp-prose hr { border: 0; border-top: 1px solid rgb(var(--c-outline-variant) / 0.3); margin: 3em 0; }
.ivp-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: rgb(var(--c-surface-container-high));
  border: 1px solid rgb(var(--c-outline-variant) / 0.2);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}
.ivp-prose pre {
  background: rgb(var(--c-surface-container-lowest));
  border: 1px solid rgb(var(--c-outline-variant) / 0.2);
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
}
.ivp-prose pre code { background: none; border: 0; padding: 0; }
.ivp-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.ivp-prose th,
.ivp-prose td { border: 1px solid rgb(var(--c-outline-variant) / 0.25); padding: 0.6em 0.85em; text-align: left; }
.ivp-prose th { background: rgb(var(--c-surface-container)); color: rgb(var(--c-on-surface)); font-weight: 600; }

/* Form states for the Ivoire.pro-backed contact form */
.ivp-form-status[hidden] { display: none; }

/* Business workflow portfolio: preserve Neural Ether, foreground real work. */
.font-label { font-family: Manrope, sans-serif; }
.brand-main { width:min(100%,1200px); margin:0 auto; padding:140px 32px 88px; }
.brand-main h1,.brand-main h2,.brand-main h3 { font-family:'Space Grotesk',sans-serif; color:rgb(var(--c-on-surface)); font-weight:600; letter-spacing:-.035em; }
.brand-main h1 { font-size:clamp(2.5rem,4.4vw,4.25rem); line-height:1.07; margin:18px 0 26px; max-width:19ch; text-wrap:balance; }
.brand-main h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.18; margin-bottom:24px; max-width:29ch; text-wrap:balance; }
.brand-main h3 { font-size:1.35rem; line-height:1.35; margin-bottom:14px; }
.brand-main p { color:rgb(var(--c-on-surface-variant)); line-height:1.8; max-width:74ch; margin-bottom:20px; }
.brand-main .brand-lede { font-size:1.16rem; line-height:1.85; }
.brand-main .brand-context { font-size:.87rem; letter-spacing:.015em; color:rgb(var(--c-primary)); margin-bottom:12px; }
.brand-main .brand-note, .brand-main figcaption { font-size:.84rem; line-height:1.7; color:rgb(var(--c-on-surface-variant)); margin-top:18px; }
.brand-hero { display:grid; grid-template-columns:1.35fr 1fr; gap:64px; align-items:center; margin-bottom:84px; }
.brand-hero figure { margin:0; }
.brand-hero img { width:100%; height:auto; border-radius:12px; }
.brand-actions { display:flex; flex-wrap:wrap; gap:16px; margin:28px 0 18px; }
.brand-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 23px; border-radius:6px; background:rgb(var(--c-primary)); color:rgb(var(--c-on-primary)); font-weight:700; }
.brand-button:hover { filter:brightness(1.1); }
.brand-link { display:inline-block; color:rgb(var(--c-primary)); text-decoration:underline; text-underline-offset:5px; padding:10px 0; line-height:1.5; }
.brand-section { margin-top:88px; scroll-margin-top:108px; }
.brand-section > p { margin-bottom:28px; }
.case-feature { padding:44px; background:rgb(var(--c-surface-container-low)); border:1px solid rgb(var(--c-outline-variant)); border-radius:12px; scroll-margin-top:108px; }
.case-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:32px 0; }
.case-columns p { font-size:.95rem; }
.workflow { list-style:none; padding:0; display:flex; gap:0; margin:36px 0; counter-reset:step; }
.workflow li { position:relative; flex:1; padding:22px 18px 12px 0; border-top:2px solid rgb(var(--c-primary)); color:rgb(var(--c-on-surface)); font-size:.85rem; }
.workflow li::before { content:''; width:10px; height:10px; border-radius:50%; background:rgb(var(--c-primary)); position:absolute; left:0; top:-6px; }
.brand-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin:36px 0 64px; }
.brand-split img { width:100%; height:auto; border-radius:8px; }
.recognition { grid-template-columns:.7fr 1.3fr; padding:32px; background:rgb(var(--c-surface-container-low)); border-radius:12px; }
.recognition img { max-height:420px; width:auto; margin:auto; object-fit:contain; }
.brand-intro { margin-bottom:64px; }
.experience-list > article { display:grid; grid-template-columns:140px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid rgb(var(--c-outline-variant)); }
.experience-list p { margin-bottom:0; }
.brand-main details { padding:22px 0; border-bottom:1px solid rgb(var(--c-outline-variant)); }
.brand-main summary { cursor:pointer; font-weight:600; color:rgb(var(--c-on-surface)); }
@media(max-width:800px) {
 .brand-main { padding:114px 22px 60px; }
 .brand-hero { grid-template-columns:1fr; gap:30px; margin-bottom:56px; }
 .brand-hero figure { max-width:480px; }
 .case-columns { grid-template-columns:1fr; gap:18px; }
 .brand-split,.recognition { grid-template-columns:1fr; gap:26px; }
 .recognition { padding:24px; }
 .brand-section { margin-top:64px; }
 .case-feature { padding:26px; }
 .workflow { flex-direction:column; margin:28px 0; }
 .workflow li { border-top:0; border-left:2px solid rgb(var(--c-primary)); padding:10px 0 18px 22px; }
 .workflow li::before { left:-6px; top:16px; }
 .experience-list > article { grid-template-columns:1fr; gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Keep the fixed navigation quiet in the light theme. */
html:not(.dark) body > header { box-shadow: 0 8px 24px rgb(0 0 0 / .08); }