/* ===========================================================
   page.css — Shared styles for inner pages (master template).
   Blocks: hero, problem, what-we-do, how-it-works, why-us,
   proof, faq, cta band. Inherits all tokens from tokens.css.
   =========================================================== */

.page {
  padding-top: var(--nav-height);
}

/* === Inner-page hero ============================================ */
.page-hero {
  position: relative;
  padding: 90px var(--section-pad-x) 70px;
  background: var(--bone);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.page-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 40px;
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.page-eyebrow::before {
  content: ''; width: 30px; height: 1px; background: var(--orange);
}
.page-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--gray-deep);
  max-width: 16ch;
  margin-bottom: 24px;
}
.page-h1 .orange { color: var(--orange); }
.page-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--gray);
  max-width: 60ch;
}
.page-hero-cta {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-deep);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--orange);
  transition: gap 0.25s;
}
.page-hero-cta:hover { gap: 16px; }

/* Decorative pixel mark, top-right of hero */
.page-hero-mark {
  position: absolute; top: 50%; right: 40px;
  transform: translateY(-50%);
  width: 200px; height: auto;
  opacity: 0.12;
  pointer-events: none;
}

/* === Generic block ============================================== */
.block {
  padding: 70px var(--section-pad-x);
  border-bottom: 1px solid var(--rule);
}
.block:last-of-type { border-bottom: none; }
.block-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 40px;
}
.block-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.block-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--gray-deep);
  max-width: 20ch;
  margin-bottom: 30px;
}
.block-note {
  font-style: italic;
  color: var(--gray-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 22px;
  max-width: 64ch;
}

/* Problem list — restrained, dashes */
.prob-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 70ch;
}
.prob-list li {
  font-size: 16px; line-height: 1.55;
  color: var(--gray);
  padding-left: 22px;
  position: relative;
}
.prob-list li::before {
  content: ''; position: absolute;
  left: 0; top: 11px; width: 10px; height: 1px;
  background: var(--gray-soft);
}
.prob-list strong { color: var(--gray-deep); font-weight: 600; }

/* What-we-do list — orange square markers */
.do-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  max-width: 1000px;
}
.do-list li {
  font-size: 15px; line-height: 1.5;
  color: var(--gray);
  padding-left: 20px;
  position: relative;
}
.do-list li::before {
  content: ''; position: absolute;
  left: 0; top: 7px; width: 7px; height: 7px;
  background: var(--orange);
}
.do-list strong { color: var(--gray-deep); font-weight: 700; display: block; margin-bottom: 2px; }

/* Scope tags */
.scope-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px;
}
.scope-tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gray);
  padding: 5px 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

/* How-it-works — numbered steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: step;
}
.step {
  border: 1px solid var(--rule-strong);
  padding: 22px;
  background: var(--paper);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
  margin-bottom: 12px;
}
.step-name {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--gray-deep);
  margin-bottom: 8px;
}
.step-desc { font-size: 14px; line-height: 1.5; color: var(--gray); }

/* Why-us list */
.why-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 80ch;
}
.why-list li {
  font-size: 16px; line-height: 1.55;
  color: var(--gray);
  padding-left: 22px;
  position: relative;
}
.why-list li::before {
  content: ''; position: absolute;
  left: 0; top: 8px; width: 8px; height: 8px;
  background: var(--orange);
}
.why-list strong { color: var(--gray-deep); font-weight: 700; }

/* === Proof block (distinctive, dark) =========================== */
.block-proof {
  background: var(--gray-deep);
  color: var(--paper);
  border-bottom: none;
}
.block-proof .block-label { color: var(--orange); }
.block-proof .block-h2 { color: var(--paper); max-width: 24ch; }
.proof-body {
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,0.8);
  max-width: 70ch;
}
.proof-body + .proof-body { margin-top: 18px; }
.proof-body strong { color: var(--paper); font-weight: 600; }
.proof-bridge {
  margin-top: 26px;
  padding: 22px 26px;
  border-left: 3px solid var(--orange);
  background: rgba(255,255,255,0.04);
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.85);
}
.proof-bridge strong { color: var(--orange); }
.proof-note {
  margin-top: 22px;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  max-width: 64ch;
}
.proof-scope { margin-top: 28px; }
.block-proof .scope-tag {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
}

/* === FAQ (native details) ====================================== */
.page-faq { max-width: 960px; }
.qa {
  border-bottom: 1px solid var(--rule-strong);
}
.qa:first-of-type { border-top: 1px solid var(--rule-strong); }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.02em;
  color: var(--gray-deep);
  transition: color 0.2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--orange); }
.qa summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 400;
  color: var(--orange);
  transition: transform 0.25s;
}
.qa[open] summary::after { content: '\2013'; }
.qa-body {
  padding: 0 40px 26px 0;
  font-size: 15px; line-height: 1.6;
  color: var(--gray);
  max-width: 76ch;
}
.qa-body strong { color: var(--gray-deep); font-weight: 600; }

/* === Service directory cards =================================== */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: var(--container-max);
}
.svc-card {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 28px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-out), border-color 0.25s;
  position: relative;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--orange); }
.svc-card.lead { grid-column: span 2; }
.svc-card.lead::before {
  content: ''; position: absolute;
  top: -6px; left: -6px; right: 6px; bottom: 6px;
  border: 1px solid var(--orange); z-index: -1;
}
.svc-card-num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--orange);
  margin-bottom: 14px;
}
.svc-card-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.025em;
  color: var(--gray-deep);
  margin-bottom: 10px;
}
.svc-card-desc {
  font-size: 14px; line-height: 1.5;
  color: var(--gray);
  margin-bottom: 20px;
  flex: 1;
}
.svc-card-link {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.svc-card:hover .svc-card-link { color: var(--orange); }

/* === Offer tiers (wholesale page) ============================== */
.offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: var(--container-max);
}
.offer {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 30px;
  position: relative;
}
.offer.entry {
  grid-column: span 2;
  background: var(--gray-deep);
  color: var(--paper);
  border-color: var(--gray-deep);
}
.offer.entry::before {
  content: ''; position: absolute;
  top: -6px; left: -6px; right: 6px; bottom: 6px;
  border: 1px solid var(--orange); z-index: -1;
}
.offer-name {
  font-family: var(--font-sans);
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--gray-deep);
  margin-bottom: 6px;
}
.offer.entry .offer-name { color: var(--paper); }
.offer-price {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 16px;
}
.offer-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--gray);
}
.offer.entry .offer-desc { color: rgba(255,255,255,0.8); }
.offer-desc em { color: var(--gray-deep); font-style: italic; }
.offer.entry .offer-desc em { color: var(--orange); }

/* === CTA band ================================================== */
.cta-band {
  padding: 60px var(--section-pad-x);
  background: var(--orange);
  text-align: center;
}
.cta-band-inner {
  max-width: 900px; margin: 0 auto;
}
.cta-band-text {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 28px;
}
.cta-band-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.cta-btn-solid {
  padding: 18px 30px;
  background: var(--gray-deep);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  border: 1px solid var(--gray-deep);
  transition: all 0.25s;
}
.cta-btn-solid:hover { background: var(--ink); border-color: var(--ink); }
.cta-btn-ghost {
  padding: 18px 30px;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  border: 1px solid rgba(255,255,255,0.5);
  transition: all 0.25s;
}
.cta-btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,0.1); }

/* === Responsive ================================================ */
@media (max-width: 900px) {
  .do-list, .svc-cards, .offers { grid-template-columns: 1fr; }
  .svc-card.lead, .offer.entry { grid-column: span 1; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .page-hero { padding: 60px var(--section-pad-x) 50px; }
  .page-hero-inner, .block-inner { padding-left: 0; }
  .page-hero-mark { display: none; }
  .block { padding: 50px var(--section-pad-x); }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
}

/* ===========================================================
   CRM/ERP page — v2 additions (additive; tokens only).
   Two-column hero with a product-style panel, pain grid,
   outcome grid, value band, why grid, compact proof strip.
   =========================================================== */

/* Two-column service hero */
.svc-hero { padding-bottom: 76px; }
.svc-hero-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: center;
}
.svc-hero-left .page-h1 { max-width: 15ch; margin-bottom: 18px; }
.svc-hero-left .page-sub { max-width: 48ch; }

.svc-hero-actions { margin: 26px 0 22px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 26px;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--orange);
  transition: gap 0.25s var(--ease-out), background 0.25s;
}
.btn-primary svg { width: 14px; height: 14px; }
.btn-primary:hover { gap: 18px; background: var(--orange-deep, var(--orange)); }

/* Outcome chips */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chip {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gray-deep);
  padding: 7px 12px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}

/* "One system" product panel (intel-panel language, page-scoped) */
.sys-panel {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  position: relative;
}
.sys-panel::before {
  content: ''; position: absolute;
  top: -6px; left: -6px; right: 6px; bottom: 6px;
  border: 1px solid var(--orange); z-index: -1;
}
.sys-panel-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}
.sys-live { display: inline-flex; align-items: center; gap: 8px; }
.sys-dot {
  width: 6px; height: 6px; background: var(--orange);
  border-radius: 50%;
  animation: sys-blink 1.6s infinite;
}
@keyframes sys-blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.sys-tabs {
  display: flex; gap: 6px;
  padding: 14px 16px 4px;
}
.sys-tab {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  color: var(--gray);
}
.sys-tab.is-on { background: var(--orange); color: var(--paper); border-color: var(--orange); }
.sys-rows { padding: 6px 16px 14px; }
.sys-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13px; color: var(--gray);
}
.sys-row:last-child { border-bottom: none; }
.sys-row strong { font-weight: 700; color: var(--gray-deep); font-size: 13px; }
.sys-row strong.orange { color: var(--orange); }

/* Pain grid 2x2 */
.pain-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1000px;
}
.pain-card {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 24px;
}
.pain-card .pain-t {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--gray-deep);
  margin-bottom: 8px;
}
.pain-card p { font-size: 14px; line-height: 1.5; color: var(--gray); }

/* Outcome grid 3-col */
.gets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: var(--container-max);
}
.get-card {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 22px;
}
.get-t {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.02em; color: var(--gray-deep);
  margin-bottom: 8px;
  padding-left: 16px; position: relative;
}
.get-t::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; background: var(--orange);
}
.get-card p { font-size: 14px; line-height: 1.5; color: var(--gray); }
.gets-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.03em;
  color: var(--gray-soft);
}

/* Value band (dark) */
.value-band { background: var(--gray-deep); color: var(--paper); border-bottom: none; }
.value-band .block-label { color: var(--orange); }
.value-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  max-width: 760px; margin-bottom: 22px;
}
.value-num {
  font-family: var(--font-sans);
  font-weight: 800; font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.04em; color: var(--orange);
  line-height: 1;
}
.value-cap {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
}
.value-note {
  font-style: italic; font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,0.6); max-width: 64ch;
}

/* Why grid 2x2 with one featured (offset border) */
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1000px;
}
.why-card {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 24px;
}
.why-card .why-t {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--gray-deep);
  margin-bottom: 8px;
}
.why-card p { font-size: 14px; line-height: 1.55; color: var(--gray); }
.why-card.feat { position: relative; border-color: var(--orange); }
.why-card.feat::before {
  content: ''; position: absolute;
  top: -5px; left: -5px; right: 5px; bottom: 5px;
  border: 1px solid var(--orange); z-index: -1;
}

/* Compact proof strip (dark) */
.proof-strip {
  background: var(--gray-deep); color: var(--paper);
  padding: 40px var(--section-pad-x);
  border-bottom: none;
}
.proof-strip-inner {
  max-width: var(--container-max); margin: 0 auto; padding-left: 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 30px; flex-wrap: wrap;
}
.proof-strip .block-label { color: var(--orange); margin-bottom: 10px; }
.proof-strip-claim {
  font-family: var(--font-sans);
  font-weight: 700; font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.025em; color: var(--paper);
  max-width: 30ch;
}
.proof-strip-link {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper);
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--orange);
  transition: gap 0.25s;
  white-space: nowrap;
}
.proof-strip-link:hover { gap: 16px; }

/* FAQ items inside a generic block (loaded faq.css supplies item styles) */
.page-faq-list { max-width: 1000px; }

/* Responsive — v2 additions */
@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .gets-grid { grid-template-columns: 1fr 1fr; }
  .pain-grid, .why-grid, .value-stats { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .svc-hero-grid { padding-left: 0; }
  .proof-strip-inner { padding-left: 0; }
}
@media (max-width: 540px) {
  .gets-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Motion (added with CRM/ERP page). Mirrors the homepage's
   intel-panel language: filling bars + a staggered panel
   entrance + scroll-in reveals. All reduced-motion safe.
   =========================================================== */

/* Scroll-in reveal (opt-in via [data-reveal]) */
[data-reveal].reveal-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-reveal].reveal-init.is-revealed { opacity: 1; transform: none; }

/* Fill bar — same mechanism as the homepage intel panel.
   Paused until scroll.js marks it .is-visible (proper fill-on-view). */
.intel-bar {
  height: 4px; background: var(--bone-deep);
  position: relative; overflow: hidden;
}
.intel-bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--gray-deep);
  animation: intel-fill 1.6s var(--ease-out) forwards;
  animation-play-state: paused;
}
.intel-bar i.is-visible { animation-play-state: running; }
.intel-bar i.orange { background: var(--orange); }
@keyframes intel-fill { from { width: 0; } to { width: var(--w, 70%); } }

/* Panel footer (holds the fill bar) */
.sys-foot { padding: 4px 16px 16px; }
.sys-foot-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 8px;
}
.sys-foot-val.orange { color: var(--orange); font-weight: 600; }

/* Panel entrance — rows stagger in on load (above the fold) */
.sys-panel { animation: sys-panel-in 0.5s var(--ease-out) both; }
@keyframes sys-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sys-row, .sys-foot { opacity: 0; animation: sys-row-in 0.45s var(--ease-out) forwards; }
.sys-row:nth-child(1) { animation-delay: 0.35s; }
.sys-row:nth-child(2) { animation-delay: 0.47s; }
.sys-row:nth-child(3) { animation-delay: 0.59s; }
.sys-row:nth-child(4) { animation-delay: 0.71s; }
.sys-foot { animation-delay: 0.85s; }
@keyframes sys-row-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* Respect reduced-motion: show everything in final state, no movement */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sys-panel, .sys-row, .sys-foot { animation: none; opacity: 1; transform: none; }
  .intel-bar i { animation: none; width: var(--w, 70%); }
  .sys-dot { animation: none; }
}

/* ===========================================================
   Hero flow animation (CRM/ERP) — v2 process loop (SVG).
   Orders arrive everywhere -> one system reads/matches/prices
   -> quote sent + CRM/inventory updated -> monitored by team.
   Honest capability story, no live figures. ~7s loop, with one
   orange element active at a time. Classes scoped to .flow-svg
   so the generic SVG class names can't collide globally.
   =========================================================== */
.flow-svg { padding: 18px 16px 16px; }
.flow-svg svg { display: block; width: 100%; height: auto; }

/* base node + text styles */
.flow-svg .box  { fill: var(--bone); stroke: var(--line-muted); stroke-width: 1; }
.flow-svg .tx   { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--gray); }
.flow-svg .txs  { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; fill: var(--gray); }
.flow-svg .zlab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--line-muted); }

/* sources light up in sequence */
.flow-svg .src-email { animation: flow2-srcE 7s infinite; }
.flow-svg .src-phone { animation: flow2-srcP 7s infinite; }
.flow-svg .src-web   { animation: flow2-srcW 7s infinite; }
@keyframes flow2-srcE { 0%,2%{fill:var(--bone);stroke:var(--line-muted)} 4%,9%{fill:var(--orange-tint);stroke:var(--orange)} 13%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes flow2-srcP { 0%,9%{fill:var(--bone);stroke:var(--line-muted)} 11%,16%{fill:var(--orange-tint);stroke:var(--orange)} 20%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes flow2-srcW { 0%,16%{fill:var(--bone);stroke:var(--line-muted)} 18%,23%{fill:var(--orange-tint);stroke:var(--orange)} 27%,100%{fill:var(--bone);stroke:var(--line-muted)} }

/* converge lines pulse as each source fires */
.flow-svg .ln  { stroke: var(--line-muted); stroke-width: 1.5; fill: none; }
.flow-svg .lnE { animation: flow2-lnE 7s infinite; }
.flow-svg .lnP { animation: flow2-lnP 7s infinite; }
.flow-svg .lnW { animation: flow2-lnW 7s infinite; }
@keyframes flow2-lnE { 0%,4%{stroke:var(--line-muted)} 6%,11%{stroke:var(--orange)} 15%,100%{stroke:var(--line-muted)} }
@keyframes flow2-lnP { 0%,11%{stroke:var(--line-muted)} 13%,18%{stroke:var(--orange)} 22%,100%{stroke:var(--line-muted)} }
@keyframes flow2-lnW { 0%,18%{stroke:var(--line-muted)} 20%,25%{stroke:var(--orange)} 29%,100%{stroke:var(--line-muted)} }

/* travelling packet on the entry line */
.flow-svg .packet { fill: var(--orange); transform-box: fill-box; animation: flow2-pkt 7s infinite; }
@keyframes flow2-pkt { 0%,24%{opacity:0;transform:translateX(0)} 26%{opacity:1} 34%{opacity:1;transform:translateX(46px)} 38%,100%{opacity:0;transform:translateX(46px)} }

/* engine stages fire read -> match -> price */
.flow-svg .st { fill: var(--bone); stroke: var(--line-muted); stroke-width: 1; }
.flow-svg .st-read  { animation: flow2-sR 7s infinite; }
.flow-svg .st-match { animation: flow2-sM 7s infinite; }
.flow-svg .st-price { animation: flow2-sP 7s infinite; }
@keyframes flow2-sR { 0%,33%{fill:var(--bone);stroke:var(--line-muted)} 37%,43%{fill:var(--orange);stroke:var(--orange)} 47%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes flow2-sM { 0%,44%{fill:var(--bone);stroke:var(--line-muted)} 48%,54%{fill:var(--orange);stroke:var(--orange)} 58%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes flow2-sP { 0%,55%{fill:var(--bone);stroke:var(--line-muted)} 59%,65%{fill:var(--orange);stroke:var(--orange)} 69%,100%{fill:var(--bone);stroke:var(--line-muted)} }
.flow-svg .st-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--gray); }
.flow-svg .st-read-l  { animation: flow2-lR 7s infinite; }
.flow-svg .st-match-l { animation: flow2-lM 7s infinite; }
.flow-svg .st-price-l { animation: flow2-lP 7s infinite; }
@keyframes flow2-lR { 0%,37%{fill:var(--gray)} 40%,43%{fill:var(--paper)} 47%,100%{fill:var(--gray)} }
@keyframes flow2-lM { 0%,48%{fill:var(--gray)} 51%,54%{fill:var(--paper)} 58%,100%{fill:var(--gray)} }
@keyframes flow2-lP { 0%,59%{fill:var(--gray)} 62%,65%{fill:var(--paper)} 69%,100%{fill:var(--gray)} }

/* branches + outputs (quote sent, CRM/inventory updated) */
.flow-svg .br  { stroke: var(--line-muted); stroke-width: 1.5; fill: none; }
.flow-svg .brT { animation: flow2-brT 7s infinite; }
.flow-svg .brB { animation: flow2-brB 7s infinite; }
@keyframes flow2-brT { 0%,66%{stroke:var(--line-muted)} 69%,80%{stroke:var(--orange)} 86%,100%{stroke:var(--line-muted)} }
@keyframes flow2-brB { 0%,70%{stroke:var(--line-muted)} 73%,84%{stroke:var(--orange)} 90%,100%{stroke:var(--line-muted)} }
.flow-svg .out-quote { animation: flow2-oQ 7s infinite; }
.flow-svg .out-crm   { animation: flow2-oC 7s infinite; }
@keyframes flow2-oQ { 0%,68%{fill:var(--bone);stroke:var(--line-muted)} 72%,84%{fill:var(--orange-tint);stroke:var(--orange)} 90%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes flow2-oC { 0%,72%{fill:var(--bone);stroke:var(--line-muted)} 76%,86%{fill:var(--orange-tint);stroke:var(--orange)} 92%,100%{fill:var(--bone);stroke:var(--line-muted)} }

/* human "monitored by your team" marker */
.flow-svg .marker { transform-box: fill-box; transform-origin: center; animation: flow2-mk 7s infinite; }
@keyframes flow2-mk { 0%,76%{opacity:0.25;transform:scale(0.9)} 80%{opacity:1;transform:scale(1.1)} 84%,92%{opacity:1;transform:scale(1)} 97%,100%{opacity:0.25;transform:scale(0.9)} }

/* time strip — collapses to the short "minutes, not days" length, then resets */
.flow-svg .tfill { fill: var(--orange); transform-box: fill-box; transform-origin: left; animation: flow2-tf 7s infinite; }
@keyframes flow2-tf { 0%,22%{transform:scaleX(1)} 66%{transform:scaleX(0.38)} 86%{transform:scaleX(0.38)} 96%,100%{transform:scaleX(1)} }

/* Reduced motion: calm static frame — system shown connected, team
   present, the order->quote time already short. No movement. */
@media (prefers-reduced-motion: reduce) {
  .flow-svg * { animation: none !important; }
  .flow-svg .packet { opacity: 0; }
  .flow-svg .marker { opacity: 1; transform: none; }
  .flow-svg .tfill  { transform: scaleX(0.38); }
}

/* ===========================================================
   Services overview hero animation — the "built to run" loop.
   Design -> Deploy -> Monitor -> Optimize -> back to Design,
   forever. A greyed "handoff / gone" exit sits off Deploy and
   is never taken — that ignored exit IS the message. ~8s loop,
   one orange element active at a time. Classes scoped to
   .loop-svg so the generic SVG class names can't collide.
   =========================================================== */
.loop-svg { padding: 18px 16px 16px; }
.loop-svg svg { display: block; width: 100%; height: auto; }

/* labels + nodes */
.loop-svg .tx    { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--gray); }
.loop-svg .arc   { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; fill: var(--line-muted); }
.loop-svg .track { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.loop-svg .node  { fill: var(--bone); stroke: var(--line-muted); stroke-width: 1; }

/* nodes fire in sequence around the loop */
.loop-svg .nD   { animation: loop-nD 8s linear infinite; }
.loop-svg .nDep { animation: loop-nDep 8s linear infinite; }
.loop-svg .nM   { animation: loop-nM 8s linear infinite; }
.loop-svg .nO   { animation: loop-nO 8s linear infinite; }
@keyframes loop-nD   { 0%,6%{fill:var(--orange-tint);stroke:var(--orange)} 12%,90%{fill:var(--bone);stroke:var(--line-muted)} 96%,100%{fill:var(--orange-tint);stroke:var(--orange)} }
@keyframes loop-nDep { 0%,22%{fill:var(--bone);stroke:var(--line-muted)} 26%,34%{fill:var(--orange-tint);stroke:var(--orange)} 40%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes loop-nM   { 0%,44%{fill:var(--bone);stroke:var(--line-muted)} 48%,56%{fill:var(--orange-tint);stroke:var(--orange)} 62%,100%{fill:var(--bone);stroke:var(--line-muted)} }
@keyframes loop-nO   { 0%,72%{fill:var(--bone);stroke:var(--line-muted)} 76%,84%{fill:var(--orange-tint);stroke:var(--orange)} 90%,100%{fill:var(--bone);stroke:var(--line-muted)} }

/* dead handoff branch — permanently dim, never lights */
.loop-svg .dead-line { fill: none; stroke: var(--line-muted); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: 0.45; }
.loop-svg .dead-box  { fill: none; stroke: var(--line-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.45; }
.loop-svg .dead-tx   { font-family: var(--font-mono); font-size: 9.5px; fill: var(--line-muted); opacity: 0.7; }

/* "still running" pulse as the loop closes back to Design */
.loop-svg .pulse { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: loop-pulse 8s linear infinite; }
@keyframes loop-pulse { 0%,90%{opacity:0;transform:scale(0.5)} 95%{opacity:0.7;transform:scale(1)} 100%{opacity:0;transform:scale(1.6)} }

/* Reduced motion: calm static loop, dead exit visible, no movement.
   (The packet uses SVG motion — hidden rather than frozen mid-path.) */
@media (prefers-reduced-motion: reduce) {
  .loop-svg * { animation: none !important; }
  .loop-svg .packet { display: none; }
}

/* ===========================================================
   Conversational AI hero animation — "it doesn't just reply,
   it acts inside the system." A request drops out of the chat
   into the pipeline (order created -> CRM updated -> stock
   checked) and a confirmation returns. The action owns the
   screen time. ~7s loop, one orange element active at a time.
   The fixed 600x330 design is expressed in container-query
   units so it scales uniformly to the column, like an SVG
   viewBox. Scoped to .conv-anim so generic names can't collide.
   =========================================================== */
.conv-anim { container-type: inline-size; padding: 16px; overflow: hidden; }
.conv-field {
  position: relative;
  width: 100cqw; height: 55cqw;
  font-family: var(--font-mono);
}

/* zone labels */
.conv-anim .zl { position: absolute; font-size: 1.5cqw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-muted); }
.conv-anim .zl.chat { left: 4cqw; top: 2.33cqw; }
.conv-anim .zl.sys  { left: 4cqw; top: 26.33cqw; color: var(--gray); font-weight: 600; }

/* chat bubbles — small, neutral, quick */
.conv-anim .bub {
  position: absolute; font-size: 2cqw; line-height: 1.35;
  padding: 1.5cqw 2.17cqw; border-radius: 2cqw; max-width: 39.3cqw;
  opacity: 0; animation: 7s infinite;
}
.conv-anim .cust    { left: 4cqw;    top: 5.67cqw;  background: var(--bone);  border: 1px solid var(--rule);       border-bottom-left-radius: 0.5cqw;  animation-name: conv-cust; }
.conv-anim .bot     { left: 25cqw;   top: 14.33cqw; background: var(--paper); border: 1px solid var(--line-muted); border-bottom-right-radius: 0.5cqw; color: var(--gray); animation-name: conv-bot; }
.conv-anim .confirm { left: 37.5cqw; top: 20.33cqw; background: var(--paper); border: 1px solid var(--orange);     border-bottom-right-radius: 0.5cqw; color: var(--gray-deep); font-weight: 600; display: flex; align-items: center; gap: 1.17cqw; animation-name: conv-confirm; }
.conv-anim .confirm .ck { width: 2.33cqw; height: 2.33cqw; border-radius: 50%; background: var(--orange); color: var(--paper); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.conv-anim .confirm .ck svg { width: 1.33cqw; height: 1.33cqw; }
@keyframes conv-cust    { 0%,2%{opacity:0;transform:translateY(1cqw)}  8%,90%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes conv-bot     { 0%,16%{opacity:0;transform:translateY(1cqw)} 22%,90%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes conv-confirm { 0%,82%{opacity:0;transform:translateY(-1cqw)} 88%,96%{opacity:1;transform:none} 99%,100%{opacity:0} }

/* system pipeline — the star: large, central, longest beat */
.conv-anim .pline { position: absolute; left: 10cqw; top: 41.67cqw; width: 80cqw; height: 1.5px; background: var(--line-muted); opacity: 0.5; }
.conv-anim .snode {
  position: absolute; top: 38cqw; width: 25cqw; height: 7.67cqw;
  border: 1px solid var(--line-muted); background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.83cqw; font-weight: 500; color: var(--gray);
  animation: 7s infinite;
}
.conv-anim .s1 { left: 5cqw;    animation-name: conv-s1; }
.conv-anim .s2 { left: 37.5cqw; animation-name: conv-s2; }
.conv-anim .s3 { left: 70cqw;   animation-name: conv-s3; }
@keyframes conv-s1 { 0%,33%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} 37%,45%{background:var(--orange);border-color:var(--orange);color:var(--paper)} 50%,100%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} }
@keyframes conv-s2 { 0%,46%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} 50%,58%{background:var(--orange);border-color:var(--orange);color:var(--paper)} 63%,100%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} }
@keyframes conv-s3 { 0%,59%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} 63%,71%{background:var(--orange);border-color:var(--orange);color:var(--paper)} 76%,100%{background:var(--bone);border-color:var(--line-muted);color:var(--gray)} }

/* packets — the family's orange dot */
.conv-anim .pk { position: absolute; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--orange); opacity: 0; animation: 7s infinite; }
.conv-anim .pd { animation-name: conv-pd; }
.conv-anim .pu { animation-name: conv-pu; }
/* drop out of conversation into pipeline */
@keyframes conv-pd { 0%,25%{opacity:0;left:33.33cqw;top:18.67cqw} 28%{opacity:1} 34%{opacity:1;left:17.5cqw;top:40.67cqw} 38%,100%{opacity:0;left:17.5cqw;top:40.67cqw} }
/* confirmation returns up to chat */
@keyframes conv-pu { 0%,71%{opacity:0;left:80cqw;top:40.67cqw} 74%{opacity:1} 80%{opacity:1;left:50cqw;top:21.33cqw} 84%,100%{opacity:0;left:50cqw;top:21.33cqw} }

/* faint drop channel from chat into pipeline */
.conv-anim .chan { position: absolute; left: 20cqw; top: 20cqw; width: 1px; height: 20cqw; background: repeating-linear-gradient(var(--line-muted), var(--line-muted) 3px, transparent 3px, transparent 7px); opacity: 0.3; }

/* Reduced motion: full conversation + pipeline shown, calm, no movement */
@media (prefers-reduced-motion: reduce) {
  .conv-anim * { animation: none !important; }
  .conv-anim .bub, .conv-anim .snode { opacity: 1; }
  .conv-anim .pk { display: none; }
}

/* ===========================================================
   Wholesale hero animation — "chaos today -> calm that runs
   itself." Scattered, jittering order sources (two flagged)
   resolve, after an orange sweep, into one tidy pipeline with
   work flowing through it. The chaos plays ONCE (forwards) and
   settles; only the calm packet flow loops — so the eye lands
   on the audit CTA, not a replaying mess. ~6s resolve.
   Fixed 600x300 design expressed in container-query units so it
   scales like an SVG viewBox. Scoped to .wh-anim; flag is grey,
   never red (DESIGN.md). One orange element active at a time.
   =========================================================== */
.wh-anim { container-type: inline-size; padding: 16px; overflow: hidden; }
.wh-field { position: relative; width: 100cqw; height: 50cqw; }

/* connector pipeline — fades in at resolve and stays */
.wh-anim .pipe { position: absolute; left: 10.67cqw; top: 29cqw; width: 78.67cqw; height: 1.5px; background: var(--line-muted); opacity: 0; animation: wh-pipeIn 6s ease-in-out forwards; }
@keyframes wh-pipeIn { 0%,52%{opacity:0} 64%,100%{opacity:0.6} }

/* nodes: scattered + jitter -> resolved row. Plays once, holds. */
.wh-anim .node {
  position: absolute; width: 13cqw; height: 5.67cqw;
  border: 1px solid var(--line-muted); background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.67cqw; color: var(--gray);
  animation-duration: 6s; animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; animation-iteration-count: 1;
}
.wh-anim .n1 { animation-name: wh-m1; }
.wh-anim .n2 { animation-name: wh-m2; }
.wh-anim .n3 { animation-name: wh-m3; }
.wh-anim .n4 { animation-name: wh-m4; }
.wh-anim .n5 { animation-name: wh-m5; }
/* resolved row: x 10/27.5/45/62.5/80cqw, y 26.33cqw */
@keyframes wh-m1 { 0%{left:8cqw;top:9cqw} 8%{left:9cqw;top:8cqw} 16%{left:7.67cqw;top:10cqw} 24%{left:8.67cqw;top:8.67cqw} 33%{left:8cqw;top:9cqw} 55%{left:10cqw;top:26.33cqw} 100%{left:10cqw;top:26.33cqw} }
@keyframes wh-m2 { 0%{left:50cqw;top:6.67cqw} 8%{left:49cqw;top:8cqw} 16%{left:51cqw;top:6cqw} 24%{left:49.67cqw;top:7.33cqw} 33%{left:50cqw;top:6.67cqw} 55%{left:27.5cqw;top:26.33cqw} 100%{left:27.5cqw;top:26.33cqw} }
@keyframes wh-m3 { 0%{left:25cqw;top:40.67cqw} 8%{left:26.33cqw;top:39.33cqw} 16%{left:24.33cqw;top:41.67cqw} 24%{left:25.67cqw;top:40cqw} 33%{left:25cqw;top:40.67cqw} 55%{left:45cqw;top:26.33cqw} 100%{left:45cqw;top:26.33cqw} }
@keyframes wh-m4 { 0%{left:78.67cqw;top:10.33cqw} 8%{left:77.67cqw;top:11.67cqw} 16%{left:79.67cqw;top:9.33cqw} 24%{left:78.33cqw;top:10.67cqw} 33%{left:78.67cqw;top:10.33cqw} 55%{left:62.5cqw;top:26.33cqw} 100%{left:62.5cqw;top:26.33cqw} }
@keyframes wh-m5 { 0%{left:60cqw;top:41.67cqw} 8%{left:61.33cqw;top:40.33cqw} 16%{left:59cqw;top:42.67cqw} 24%{left:60.33cqw;top:41.33cqw} 33%{left:60cqw;top:41.67cqw} 55%{left:80cqw;top:26.33cqw} 100%{left:80cqw;top:26.33cqw} }

/* attention flag (grey hollow "!", never red) — clears at the sweep */
.wh-anim .flag {
  position: absolute; width: 2.67cqw; height: 2.67cqw;
  border: 1.5px solid var(--gray-deep); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.67cqw; font-weight: 700; color: var(--gray-deep);
  animation: wh-flagClear 6s ease-in-out forwards; z-index: 3;
}
.wh-anim .flag::after { content: '!'; }
@keyframes wh-flagClear { 0%,40%{opacity:0.85} 48%,100%{opacity:0} }
.wh-anim .fl-a { animation-name: wh-flA; }
.wh-anim .fl-b { animation-name: wh-flB; }
@keyframes wh-flA { 0%{left:55.33cqw;top:5cqw;opacity:0.85} 33%{left:55.33cqw;top:5cqw;opacity:0.85} 48%,100%{opacity:0} }
@keyframes wh-flB { 0%{left:65.33cqw;top:40cqw;opacity:0.85} 33%{left:65.33cqw;top:40cqw;opacity:0.85} 48%,100%{opacity:0} }

/* orange sweep — steps in once, aligns the mess */
.wh-anim .sweep { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--orange); box-shadow: 0 0 18px 6px color-mix(in srgb, var(--orange) 35%, transparent); opacity: 0; animation: wh-sweep 6s ease-in-out forwards; }
@keyframes wh-sweep { 0%,33%{left:-1.67cqw;opacity:0} 36%{opacity:1} 47%{left:100cqw;opacity:1} 50%,100%{left:100cqw;opacity:0} }

/* calm packets — flow along the pipeline, looping, after resolve */
.wh-anim .pk { position: absolute; top: 28.33cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--orange); opacity: 0; animation: wh-flow 3s linear infinite; }
.wh-anim .pk1 { animation-delay: 3.7s; }
.wh-anim .pk2 { animation-delay: 4.7s; }
.wh-anim .pk3 { animation-delay: 5.7s; }
@keyframes wh-flow { 0%{left:10cqw;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:83cqw;opacity:0} }

/* Reduced motion: skip the chaos — show the resolved, self-running
   pipeline directly (flags cleared, packets static), no movement. */
@media (prefers-reduced-motion: reduce) {
  .wh-anim .node, .wh-anim .pipe, .wh-anim .sweep, .wh-anim .flag { animation: none; }
  .wh-anim .pk, .wh-anim .flag { display: none; }
  .wh-anim .pipe { opacity: 0.6; }
  .wh-anim .n1 { left: 10cqw;   top: 26.33cqw; }
  .wh-anim .n2 { left: 27.5cqw; top: 26.33cqw; }
  .wh-anim .n3 { left: 45cqw;   top: 26.33cqw; }
  .wh-anim .n4 { left: 62.5cqw; top: 26.33cqw; }
  .wh-anim .n5 { left: 80cqw;   top: 26.33cqw; }
}