/* ARTSOL design system — tokens, base, layout, components. See PROJECT_BRIEF.md */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  /* Light page + dark forest components.
     Palette: #F6F8F4 page, #FFFFFF light surfaces/nav, #0B261A dark panels + headings, #123524 secondary dark + body text + buttons,
     #F7F2D5 text on dark, #8BAE79 icons/indicators, #286341 borders/outlines, #E7E8D9 soft highlights.
     Token names are historical: --violet = primary accent, --cyan = icon accent. Dark components re-scope these tokens (see "Dark components"). */
  --bg: #F6F8F4;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #E7E8D9;       /* soft highlight: hover, selected and inset surfaces */
  --text: #0B261A;            /* headings on light */
  --text-2: #123524;          /* body text on light */
  --text-3: #466154;          /* muted: 78% #123524 on white, 5.5:1 or better */
  --violet: #286341;          /* accent text, links, active nav, focus ring on light (moss is too light for text here) */
  --violet-ink: #123524;      /* link hover, ghost buttons */
  --cyan: #8BAE79;            /* icons and decorative indicators */
  --border: #D0DDD5;          /* 22% #286341 on white: subtle outlines */
  --border-hover: #94B1A0;    /* 50% #286341 on white */
  --border-input: #286341;    /* form controls: 7:1 */
  --btn: #123524;
  --btn-text: #F7F2D5;
  --btn-hover: #0B261A;
  --success: #047857;         /* semantic, readable on light */
  --error: #B42318;           /* semantic, readable on light */
  --on-accent: #F7F2D5;
  --grad-cta: linear-gradient(135deg, #123524 0%, #0B261A 100%);

  /* Typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-hero: clamp(2.4rem, 1.5rem + 4vw, 4.25rem);
  --fs-page: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-section: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  --fs-card: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.8125rem;
  --lh-tight: 1.12;
  --lh-body: 1.65;

  /* Spacing scale (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  /* Layout */
  --max: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-h: 72px;
  --radius: 14px;
  --radius-sm: 8px;
  --tap: 44px;

  /* Depth */
  --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -8px rgba(11,38,26,.16);
  --shadow-2: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 48px -16px rgba(11,38,26,.26);
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .25s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--s-4); line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-card); letter-spacing: -.01em; }
p { margin: 0 0 var(--s-4); color: var(--text-2); max-width: 68ch; }
a { color: var(--violet); text-underline-offset: 3px; }
a:hover { color: var(--violet-ink); }
ul { padding-left: 1.2em; color: var(--text-2); }
::selection { background: rgba(139,174,121,.45); color: var(--text); }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--text); color: var(--bg); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: var(--bg); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--border); }
.section__head { max-width: 680px; margin-bottom: var(--s-7); }
.eyebrow {
  display: inline-block; margin-bottom: var(--s-3);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violet);
}
.lead { font-size: 1.2rem; color: var(--text-2); }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-8); }
}
.page-hero { padding-block: var(--s-9) var(--s-7); border-bottom: 1px solid var(--border); background: var(--bg-2); }

/* ---------- 4. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.brand img { height: 32px; width: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4);
  color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 500;
  border-radius: var(--radius-sm); transition: color var(--dur), background var(--dur);
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--violet); border-radius: 0; }
.nav-toggle {
  display: none; min-width: var(--tap); min-height: var(--tap); background: var(--surface);
  border: 1px solid var(--border-hover); border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform var(--dur), background var(--dur);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .js .nav {
    position: absolute; inset: var(--header-h) 0 auto 0; background: var(--bg-2);
    border-bottom: 1px solid var(--border); padding: var(--s-4) var(--gutter) var(--s-5);
    display: none;
  }
  .js .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { width: 100%; }
  .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--violet); }
  .nav .btn { width: 100%; margin-top: var(--s-3); }
}
@media (min-width: 861px) { .nav { display: flex; align-items: center; gap: var(--s-4); } }

/* No-JS fallback: no sticky header or toggle; nav simply wraps under the logo */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-header { position: static; height: auto; padding-block: var(--s-3); }
html:not(.js) .site-header .container { flex-wrap: wrap; }
html:not(.js) .nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
html:not(.js) .nav__list { flex-direction: row; flex-wrap: wrap; }
html:not(.js) .nav .btn { width: auto; margin-top: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  --lift: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: .7rem 1.5rem; border-radius: var(--radius-sm);
  font: 600 .98rem/1.2 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur), border-color var(--dur);
  transform: translateY(var(--lift));
}
.btn:hover { --lift: -2px; }
.btn:active { --lift: 1px; }
.btn--primary { background: var(--btn); color: var(--btn-text); box-shadow: 0 10px 24px -10px rgba(11,38,26,.35); }
.btn--primary:hover { color: var(--btn-text); background: var(--btn-hover); box-shadow: 0 16px 30px -10px rgba(11,38,26,.42); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-hover); }
.btn--secondary:hover { color: var(--text); background: var(--surface-2); border-color: var(--violet); }
.btn--ghost { background: transparent; color: var(--violet-ink); }
.btn--ghost:hover { background: rgba(139,174,121,.16); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- 6. Cards (layered, subtly 3D) ---------- */
.card {
  position: relative; padding: var(--s-6); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur),
    opacity .6s var(--ease), translate .6s var(--ease);
  overflow: hidden;
}
/* Cursor-responsive light: --mx/--my are set by main.js on desktop only */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(139,174,121,.16), transparent 70%);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-2); }
.card:hover::before, .card:focus-within::before { opacity: 1; }
.card:focus-within { border-color: var(--border-hover); box-shadow: var(--shadow-2); }
.card > * { position: relative; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-5);
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--cyan);
}
.card__icon svg { width: 24px; height: 24px; }
.card--elevated { background: var(--surface-2); }
@media (hover: none) { .card:hover { transform: none; } }

/* ---------- 7. Hero ---------- */
.hero { position: relative; padding-block: var(--s-9) var(--s-10); overflow: hidden; }
.hero::before { /* soft ambient light, not a gradient flood */
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, rgba(139,174,121,.22), transparent);
  pointer-events: none;
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.03em; }
.hero h1 .accent { color: var(--violet); }
.hero .lead { margin-bottom: var(--s-6); max-width: 54ch; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero { padding-block: var(--s-8); } }

/* ---------- 8. Forms ---------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.field .hint { font-size: var(--fs-label); color: var(--text-3); }
.input, .textarea, .select {
  width: 100%; min-height: var(--tap); padding: .7rem 1rem; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm); font: inherit; transition: border-color var(--dur), box-shadow var(--dur);
}
.textarea { min-height: 140px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--violet); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,174,121,.45); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: var(--fs-small); }
.field-error:not(:empty)::before { content: "Error: "; font-weight: 700; }
.form-status.is-error { border-color: var(--error); border-left-width: 4px; }
.form-status.is-error strong { color: var(--error); }

/* ---------- 9. Footer ---------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: var(--s-8) var(--s-6); margin-top: auto; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); }
.footer__grid h2 { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-4); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.footer__grid a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.footer__grid a:hover { color: var(--text); text-decoration: underline; }
.footer__tagline { margin-top: var(--s-4); font-size: var(--fs-small); }
.footer__bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }
.footer__bottom p { color: var(--text-3); margin: 0; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- 10. Utilities & motion ---------- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; translate: 0 12px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; translate: none; }
.prose h2 { margin-top: var(--s-7); font-size: 1.5rem; }
.prose { max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; translate: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* ======================================================================
   Stage 2 components
   ====================================================================== */
.hero__grid > * { min-width: 0; }
.hero::after { /* soft pointer light (position set by main.js on desktop only) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--hl, 0); transition: opacity .4s;
  background: radial-gradient(420px circle at var(--hx, 70%) var(--hy, 30%), rgba(139,174,121,.12), transparent 70%);
}
.scene.is-paused .scene__lines path { animation-play-state: paused; }
.nav .btn { min-height: 40px; padding-block: .5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.text-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 600; text-decoration: none; }
.text-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.text-link:hover::after { transform: translateX(4px); }

/* ---- Hero 3D scene: billboard panels floating over a perspective plane ---- */
.stage { perspective: 1200px; display: grid; place-items: center; min-height: 400px; }
.scene {
  --rx: 44deg; --rz: -30deg; --tx: 0deg; --ty: 0deg; --sw: clamp(260px, 28vw, 400px);
  position: relative; width: var(--sw); aspect-ratio: 1; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--ty))) rotateZ(calc(var(--rz) + var(--tx)));
  transition: transform .5s var(--ease);
}
.scene__plane {
  position: absolute; inset: 0; border-radius: 26px; border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(139,174,121,.12), transparent 50%),
    repeating-linear-gradient(0deg, rgba(40,99,65,.55) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(40,99,65,.55) 0 1px, transparent 1px 32px),
    var(--bg-2);
  box-shadow: 0 50px 60px -30px rgba(11,38,26,.45);
}
.scene__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene__lines path { fill: none; stroke: var(--cyan); stroke-opacity: .65; stroke-width: .7; stroke-dasharray: 2 2.4; animation: flow 3s linear infinite; }
.scene__lines .link-soft { stroke: var(--violet); stroke-opacity: .45; }
.scene__lines circle { fill: var(--cyan); fill-opacity: .16; }
@keyframes flow { to { stroke-dashoffset: -9.6; } }
.node {
  position: absolute; width: 38%; height: 15%; display: flex; align-items: center; gap: .4em; padding: 0 .6em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  font-size: clamp(11px, calc(var(--sw) * .031), 12.5px); font-weight: 600; color: var(--text); line-height: 1.15;
  box-shadow: 0 18px 24px -12px rgba(2,10,6,.6), 0 1px 0 rgba(247,242,213,.08) inset;
  transform: translateZ(var(--z, 22px)) rotateZ(calc((var(--rz) + var(--tx)) * -1)) rotateX(calc((var(--rx) + var(--ty)) * -1));
}
.node svg { flex: none; width: 1.5em; height: 1.5em; color: var(--cyan); }
.node--core { --z: 40px; border-color: var(--violet); background: var(--surface-2); box-shadow: 0 0 36px -6px rgba(139,174,121,.30), 0 18px 24px -12px rgba(2,10,6,.55); }
.node--a { left: 5%; top: 14.5%; }  .node--b { left: 57%; top: 14.5%; }
.node--c { left: 31%; top: 42.5%; } .node--d { left: 5%; top: 70.5%; }  .node--e { left: 57%; top: 70.5%; }
@media (max-width: 900px) {
  .stage { min-height: 330px; }
  .scene { --rx: 42deg; --rz: -22deg; --sw: min(320px, 78vw); }
}

/* ---- Trust strip ---- */
.trust { border-block: 1px solid var(--border); background: var(--bg-2); }
.trust__list { list-style: none; margin: 0; padding: var(--s-6) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust__item svg { flex: none; width: 24px; height: 24px; color: var(--cyan); margin-top: 2px; }
.trust__item strong { display: block; color: var(--text); font-size: .98rem; }
.trust__item span { display: block; color: var(--text-3); font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 960px) { .trust__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust__list { grid-template-columns: 1fr; } }

/* ---- Service cards ---- */
.card--service { display: flex; flex-direction: column; }
.card--service .text-link { margin-top: auto; padding-top: var(--s-3); }
.card[data-tilt]:hover { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translateY(-4px); }
.card[data-tilt] { transition: transform .15s linear, box-shadow var(--dur) var(--ease), border-color var(--dur), opacity .6s var(--ease), translate .6s var(--ease); }

/* ---- Existing-system flow ---- */
.flow-diagram { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); counter-reset: f; }
.flow-diagram li {
  position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.flow-diagram li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--s-5) / -2 - 6px); width: 12px; height: 12px;
  border-top: 2px solid var(--violet); border-right: 2px solid var(--violet); transform: translateY(-50%) rotate(45deg);
}
.flow-diagram li:nth-child(3) { background: var(--surface); border-color: var(--violet); }
.flow-diagram .flow__label { display: block; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); font-weight: 600; margin-bottom: var(--s-2); }
.flow-diagram h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.flow-diagram p { font-size: var(--fs-small); margin: 0; }
@media (max-width: 960px) {
  .flow-diagram { grid-template-columns: 1fr; gap: var(--s-6); }
  .flow-diagram li:not(:last-child)::after { top: auto; bottom: calc(var(--s-6) / -2 - 6px); right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
.note { padding: var(--s-4) var(--s-5); border-left: 3px solid var(--violet); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); max-width: 78ch; }
.note p { margin: 0; }
.note strong { color: var(--text); }

/* ---- Use cases (problem first, approach second) ---- */
.usecase { display: flex; flex-direction: column; gap: var(--s-3); }
.usecase h3 { margin-bottom: 0; }
.usecase dl { margin: 0; display: grid; gap: var(--s-3); }
.usecase dt { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--violet); }
.usecase dd { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; }

/* ---- Process ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); counter-reset: step; }
.steps li { position: relative; counter-increment: step; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-4);
  border-radius: 50%; background: var(--violet); color: var(--on-accent); font-weight: 700;
}
.steps h3 { font-size: 1.1rem; }
.steps p { font-size: var(--fs-small); margin: 0; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--border); margin-left: 18px; }
  .steps li { margin: 0 0 var(--s-5) var(--s-6); }
  .steps li::before { position: absolute; left: -58px; top: var(--s-5); margin: 0; }
}

/* ---- Principles / tech ---- */
.principle { display: flex; gap: var(--s-4); align-items: flex-start; }
.principle svg { flex: none; width: 24px; height: 24px; color: var(--cyan); margin-top: 3px; }
.principle h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.principle p { font-size: var(--fs-small); margin: 0; }
.chips { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .95rem; font-weight: 500; }

/* ---- FAQ ---- */
.faq { max-width: 820px; display: grid; gap: var(--s-3); }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--dur); }
.faq details[open] { border-color: var(--border-hover); background: var(--surface-2); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: var(--tap); padding: var(--s-4) var(--s-5); font-weight: 600; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--violet); transition: transform var(--dur); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq .faq__body { padding: 0 var(--s-5) var(--s-5); }
.faq .faq__body p { margin: 0; }

/* ---- Closing CTA ---- */
.cta-band {
  position: relative; text-align: center; padding: var(--s-9) var(--s-6); border-radius: 22px; border: 1px solid var(--border-hover); overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(40,99,65,.6), transparent 65%), var(--surface);
  box-shadow: var(--shadow-2);
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---- Services page detail blocks ---- */
.service-detail { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-7); padding-block: var(--s-8); border-top: 1px solid var(--border); }
.service-detail:first-of-type { border-top: 0; padding-top: 0; }
.service-detail__intro .card__icon { margin-bottom: var(--s-4); }
.service-detail dl { margin: 0; display: grid; gap: var(--s-5); }
.service-detail dt { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--violet); margin-bottom: var(--s-1); }
.service-detail dd { margin: 0; color: var(--text-2); }
.service-detail dd ul { margin: 0; padding-left: 1.1em; }
.service-detail dd li + li { margin-top: var(--s-1); }
.service-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 860px) { .service-detail { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---- Solutions page ---- */
.solution { padding-block: var(--s-7); border-top: 1px solid var(--border); }
.solution:first-of-type { border-top: 0; padding-top: 0; }
.solution__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-6); }
.solution__cols h3 { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.example { padding: var(--s-5); background: var(--surface); border: 1px dashed var(--border-hover); border-radius: var(--radius); }
.example__tag { display: inline-block; margin-bottom: var(--s-4); padding: 2px var(--s-3); border-radius: 999px; border: 1px solid var(--violet); color: var(--violet); font-size: var(--fs-label); font-weight: 600; }
.mini-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-3); }
.mini-flow li { position: relative; padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--text); }
.mini-flow li:not(:last-child) { margin-right: var(--s-4); }
.mini-flow li:not(:last-child)::after { content: "\2192"; position: absolute; right: calc(var(--s-4) / -1 - 4px); top: 50%; transform: translateY(-50%); color: var(--violet); }
@media (max-width: 760px) {
  .solution__cols { grid-template-columns: 1fr; }
  .mini-flow { flex-direction: column; }
  .mini-flow li:not(:last-child) { margin: 0 0 var(--s-4); }
  .mini-flow li:not(:last-child)::after { content: "\2193"; right: auto; left: var(--s-4); top: auto; bottom: calc(var(--s-4) / -1 - 8px); transform: none; }
}

/* ---- About ---- */
.statement { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; max-width: 26ch; margin: 0; color: var(--text); }
.statement em { font-style: normal; color: var(--violet); }
.about-hero { position: relative; overflow: hidden; }
.about-hero::after { content: ""; position: absolute; right: -80px; top: -60px; width: 360px; height: 360px; background: url("../assets/brand/artsol-mark.svg") center/contain no-repeat; opacity: .07; pointer-events: none; }

/* ---- Contact & form ---- */
.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-methods { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.contact-methods a, .contact-methods .loc {
  display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-methods a:hover { border-color: var(--violet); }
.contact-methods svg { flex: none; width: 22px; height: 22px; color: var(--cyan); }
.contact-methods small { display: block; color: var(--text-3); font-size: var(--fs-label); }
.field .req { color: var(--text-3); font-weight: 400; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--s-3); }
.field--check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--violet); }
.field--check .field-error { grid-column: 2; }
.field-error:empty { display: none; }
.form-note { font-size: var(--fs-small); color: var(--text-3); }
.form-status { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.form-status[hidden] { display: none; }
.form-status p { margin-bottom: var(--s-3); color: var(--text); }
.form-status .btn-row { margin-top: var(--s-3); }
.form-status.is-info { border-color: var(--violet); color: var(--text); }
.form-status pre { white-space: pre-wrap; word-break: break-word; margin: var(--s-3) 0 0; padding: var(--s-3); background: var(--surface-2); border-radius: var(--radius-sm); color: var(--text-2); font: .85rem/1.5 var(--font-mono); max-height: 220px; overflow: auto; }

/* ---- Legal ---- */
.draft-banner { padding: var(--s-4) var(--s-5); border: 1px solid var(--violet); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: var(--s-7); max-width: 72ch; color: var(--text-2); }
.draft-banner strong { color: var(--text); }
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .scene__lines path { animation: none; }
  .scene { transition: none; }
  .card[data-tilt]:hover { transform: none; }
}
@media (hover: none) { .card[data-tilt]:hover { transform: none; } }

/* Dark components: re-scope colour tokens so existing rules render ivory on forest green */
.scene, .card--service, .flow-diagram li, .steps li, .example, .card--elevated, .cta-band, .site-footer {
  --bg-2: #0B261A; --surface: #0B261A; --surface-2: #123524;
  --text: #F7F2D5; --text-2: #F7F2D5; --text-3: #BABDA4;      /* muted ivory: 7:1 or better on both darks */
  --violet: #8BAE79; --violet-ink: #E7E8D9; --cyan: #8BAE79;
  --border: #286341; --border-hover: #8BAE79; --border-input: #8BAE79;
  --btn: #8BAE79; --btn-text: #0B261A; --btn-hover: #E7E8D9; --on-accent: #0B261A;
  --success: #34D399; --error: #F87171;
  color: var(--text);
}
.flow-diagram li:not(:last-child)::after { border-top-color: #286341; border-right-color: #286341; }

/* Small screens: reclaim horizontal space inside cards */
@media (max-width: 480px) {
  .card { padding: var(--s-5); }
  .contact-methods a, .contact-methods .loc { gap: var(--s-3); padding-inline: var(--s-3); font-size: .95rem; }
  .cta-band { padding-block: var(--s-8); padding-inline: var(--s-4); }
}