/* ============================================================
   PRAXIS HERO ART - signature art direction for top-page heros
   costandprofitability.com - FABLE, 05 Jul 2026
   Generative, no stock: the whale-curve arc as the house motif,
   plus editorial grain and asymmetric composition helpers.
   Pure CSS/SVG (inline data URIs), zero requests, zero JS.
   ============================================================ */

/* ---------- the canvas ----------
   Wrap any hero in .heroart and pick a variant. The art layers sit
   behind the content (z-index) and never intercept the pointer. */
.heroart{ position:relative; overflow:hidden; }
.heroart > *{ position:relative; z-index:2; }
.heroart::before, .heroart::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }

/* ---------- editorial grain (all variants) ----------
   A faint paper grain: feTurbulence via data URI, tiled. */
.heroart::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.5;
}

/* ---------- variant 1: the whale arc (home, /whale-curve/) ----------
   The cumulative curve as a faint monumental arc, peak off-centre right. */
.heroart.arc::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640' fill='none' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M-40 600 C 240 190, 560 120, 820 160 C 1060 197, 1240 340, 1460 520' stroke='%23C75B22' stroke-opacity='0.22' stroke-width='2.5'/%3E%3Cpath d='M-40 630 C 260 280, 620 210, 880 245 C 1100 275, 1260 400, 1460 570' stroke='%231A1714' stroke-opacity='0.08' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:cover; background-position:center bottom;
}

/* ---------- variant 2: ranked bars (work-with-us, services) ----------
   The margin-ranked bar field, fading into the tail. */
.heroart.bars::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23C75B22'%3E%3Crect x='60' y='470' width='16' height='130' opacity='.16'/%3E%3Crect x='104' y='492' width='16' height='108' opacity='.15'/%3E%3Crect x='148' y='508' width='16' height='92' opacity='.14'/%3E%3Crect x='192' y='521' width='16' height='79' opacity='.12'/%3E%3Crect x='236' y='532' width='16' height='68' opacity='.11'/%3E%3Crect x='280' y='541' width='16' height='59' opacity='.10'/%3E%3Crect x='324' y='549' width='16' height='51' opacity='.09'/%3E%3Crect x='368' y='556' width='16' height='44' opacity='.08'/%3E%3Crect x='412' y='562' width='16' height='38' opacity='.07'/%3E%3Crect x='456' y='567' width='16' height='33' opacity='.06'/%3E%3Crect x='500' y='572' width='16' height='28' opacity='.055'/%3E%3Crect x='544' y='576' width='16' height='24' opacity='.05'/%3E%3Crect x='588' y='580' width='16' height='20' opacity='.045'/%3E%3Crect x='632' y='583' width='16' height='17' opacity='.04'/%3E%3C/g%3E%3Cg fill='%23C43D2B'%3E%3Crect x='1180' y='600' width='16' height='14' opacity='.10'/%3E%3Crect x='1224' y='600' width='16' height='20' opacity='.12'/%3E%3Crect x='1268' y='600' width='16' height='28' opacity='.14'/%3E%3Crect x='1312' y='600' width='16' height='38' opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover; background-position:center bottom;
}

/* ---------- variant 3: time-equation plate (authority/events, about) ----------
   Faint oversized mono figures: the discipline as texture. */
.heroart.eq::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640'%3E%3Ctext x='1370' y='180' text-anchor='end' font-family='IBM Plex Mono,monospace' font-size='120' fill='%231A1714' fill-opacity='0.045'%3E26 + 12x%3C/text%3E%3Ctext x='1370' y='320' text-anchor='end' font-family='IBM Plex Mono,monospace' font-size='120' fill='%231A1714' fill-opacity='0.045'%3E+ 26u%3C/text%3E%3Ctext x='1370' y='460' text-anchor='end' font-family='IBM Plex Mono,monospace' font-size='120' fill='%23C75B22' fill-opacity='0.07'%3E= EUR/min%3C/text%3E%3C/svg%3E");
  background-size:cover; background-position:center;
}

/* ---------- variant 4: dark stage (star pages, CTA bands) ----------
   For dark heros: the arc in bright orange over ink. */
.heroart.dark{ background:var(--ink-dark, #1A1714); color:var(--paper, #F3EEE4); }
.heroart.dark::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640' fill='none' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M-40 600 C 240 190, 560 120, 820 160 C 1060 197, 1240 340, 1460 520' stroke='%23E2761A' stroke-opacity='0.3' stroke-width='2.5'/%3E%3Cpath d='M-40 630 C 260 280, 620 210, 880 245 C 1100 275, 1260 400, 1460 570' stroke='%23F3EEE4' stroke-opacity='0.07' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:cover; background-position:center bottom;
}
.heroart.dark::after{ mix-blend-mode:screen; opacity:.35; }

/* ---------- asymmetric composition helpers ----------
   The house layout: content pinned left on a 7/5 split, art breathing right. */
.heroart .hero-split{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:end; }
@media(max-width:860px){ .heroart .hero-split{ grid-template-columns:1fr; } }

/* photo treatment for star pages: duotone-leaning, never raw stock */
.heroart .hero-photo{ position:relative; border-radius:12px; overflow:hidden; }
.heroart .hero-photo img{ display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.04); }
.heroart .hero-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(199,91,34,.18), rgba(26,23,20,.22));
  mix-blend-mode:multiply; }