/* =============================================================================
   INTERIOR VISUAL-VARIATION TREATMENTS (2026-09-24, owner color-rhythm pass)
   A SMALL, reusable set of scene surfaces + hero compositions + content artifacts
   so interior routes stop reading as "navy hero + right white card" on every page.
   Page-specific choices are driven by CONTENT, not a mechanical stripe.
   Loaded AFTER site.css + scenes.css on interior pages only; the frozen homepage
   loads neither, so it is untouched. Nothing here changes the scene MOTION engine.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · SURFACE TREATMENTS  (dark scenes are transparent over the fixed atmosphere;
   these paint DISTINCT surfaces so consecutive dark scenes differ and openings/
   closings carry weight. Light surfaces reuse .sec--light's text-color system.)
   --------------------------------------------------------------------------- */
/* Dark scenes share ONE continuous navy environment (the fixed atmosphere behind the stage) — like the
   approved homepage. They paint NO per-scene navy surface and NO border, so there are no lighter blocks
   and no horizontal seams/lines between dark scenes or near the header. "deep" and "panel" remain as
   semantic hooks (used by the accent/eyebrow rhythm) but are visually transparent over the atmosphere. */
.scene--deep, .sec--deep, .scene--panel, .sec--panel{ background:transparent; border-top:0; border-bottom:0; }
/* Cool-silver alt light — a second kind of reset so light scenes are not all identical. */
.sec--light.sec--mist, .scene.sec--light.sec--mist{background:linear-gradient(180deg,#e8ecf3 0%,#eef1f7 100%)}
/* Warm-paper alt light — for report / deliverable reading surfaces. */
.sec--light.sec--paper, .scene.sec--light.sec--paper{background:linear-gradient(180deg,#f4f2ee 0%,#f6f5f1 100%)}

/* Per-page / per-section ACCENT (industries set --accent on <body>). Legible on navy (>=4.5:1). */
.eyebrow{color:var(--accent,#7fa8e6)}
.sec--light .eyebrow{color:var(--accent-ink,var(--perf-blue))}
.card .qn{color:var(--accent,#8fb0ff)}
.sec--light .card .qn{color:var(--accent-ink,var(--perf-blue))}
/* per-page accent also tints the headline + section-heading highlight (restrained, large text only) */
.ihero h1 .lt{color:var(--accent,var(--blue-soft))}
.sec:not(.sec--light) h2 .lt{color:var(--accent,var(--blue-soft))}
.sec--light h2 .lt{color:var(--accent-ink,var(--perf-blue))}
/* a thin accent kicker rule under an eyebrow, used sparingly to signal a chapter */
.krule{width:46px;height:3px;border-radius:3px;background:var(--accent,#7fa8e6);margin:14px 0 0;opacity:.9}
.sec--light .krule{background:var(--accent-ink,var(--perf-blue))}

/* ---------------------------------------------------------------------------
   2 · HERO COMPOSITIONS  (break the identical left-headline / right-white-card)
   --------------------------------------------------------------------------- */
/* Centered editorial hero — no right column; headline + sub + actions centered. */
.ihero--centered .ihero-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
.ihero--centered .ihero-content{max-width:60ch}
.ihero--centered .ihero-sub{margin-left:auto;margin-right:auto}
.ihero--centered .ihero-actions{justify-content:center}
.ihero--centered .breadcrumb{text-align:center}
/* Artifact hero — right column holds a composed visual (product artifact / framework /
   flow / roll-up), NOT the generic info card. */
.ihero--artifact .ihero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,60px);align-items:center}

/* Glass artifact frame that holds a hero visual (image or CSS composition). */
.art{position:relative;border-radius:18px;padding:clamp(16px,1.5vw,22px);
  background:var(--lg-bg);border:1px solid rgba(120,150,205,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 34px 90px -46px rgba(0,8,32,.85);
  -webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
.art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(140,175,255,.10),rgba(140,175,255,0) 42%)}
.art img{border-radius:12px;display:block;width:100%;height:auto}
/* In the hero, cap the artifact height so the pinned scene never clips (image keeps aspect, may letterbox on the glass). */
.ihero--artifact .ihero-grid{align-items:center}
.ihero--artifact .art{max-width:min(100%,500px);margin-left:auto}
.ihero--artifact .art img{max-height:300px;height:auto;object-fit:contain}
/* Short desktop/laptop heights: cap tighter so the whole hero fits the pinned frame at the 700h gate. */
@media (min-width:901px) and (max-height:850px){ .ihero--artifact .art img{max-height:240px} }
@media (min-width:901px) and (max-height:760px){ .ihero--artifact .art img{max-height:190px} .ihero--artifact .art-cap{margin-top:8px} }
@media (max-width:900px){ .ihero--artifact .art{margin:0 auto} .ihero--artifact .art img{max-height:230px} }
.art-cap{margin-top:12px;font-size:var(--kick);letter-spacing:.02em;color:#93a3bf;text-align:center}

/* continuation marker on mobile split chunks (heading shown once; continuation reads as one chapter) */
.cont-mark{font-size:var(--kick);letter-spacing:.18em;text-transform:uppercase;color:var(--accent,#7fa8e6);
  font-weight:700;opacity:.75;margin-bottom:clamp(12px,2vh,18px)}
.cont-mark::before{content:"— "}
.sec--light .cont-mark{color:var(--accent-ink,var(--perf-blue))}

/* Solutions-hero engagement ladder (relevant page content, not decoration) */
.ladder{display:grid;gap:9px}
.ladder .lr{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(120,150,205,.16)}
.ladder .lr:first-child{border-top:0}
.ladder .lr-n{font-size:clamp(13px,1vw,16px);font-weight:800;color:var(--accent,#7fa8e6);letter-spacing:.06em}
.ladder .lr b{display:block;font-size:clamp(14px,1.05vw,17px);color:#fff;font-weight:700;line-height:1.25}
.ladder .lr span{display:block;font-size:var(--kick);color:#9fb2d6;margin-top:2px}
.ladder .lr--spec{border-top:1px dashed rgba(120,150,205,.28);margin-top:2px}
/* Light "you are here" engagement path — a compact 4-node row on the Related
   solutions scene (Solutions pages). Current rung is a highlighted non-link. */
.pathrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:clamp(20px,2.4vw,30px) auto 0;max-width:940px}
.pathrow .pnode{flex:1 1 170px;min-width:140px;max-width:230px;text-decoration:none;display:block;padding:10px 13px;border-radius:11px;border:1px solid rgba(120,150,205,.22);background:rgba(10,24,52,.42);color:#dbe6fb;text-align:left;transition:border-color .2s,background .2s}
.sec--light .pathrow .pnode{background:rgba(255,255,255,.55);border-color:rgba(0,27,90,.14);color:var(--navy-deep)}
.pathrow a.pnode:hover{border-color:var(--accent,#7fa8e6)}
.pathrow .pnode b{display:block;font-size:clamp(13px,1vw,15px);font-weight:700;line-height:1.2}
.pathrow .pnode .pr{display:block;font-size:var(--kick);color:#9fb2d6;margin-top:2px}
.sec--light .pathrow .pnode .pr{color:#5b6b88}
.pathrow .pnode.here{background:var(--accent,#7fa8e6);border-color:var(--accent,#7fa8e6);color:#04152b}
.pathrow .pnode.here .pr{color:rgba(4,21,43,.72)}
.pathrow .pnode .pk{display:block;font-size:var(--kick);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#04152b;margin-bottom:2px}
.pathcap{text-align:center;font-size:var(--kick);color:#9fb2d6;margin:12px auto 0}
.sec--light .pathcap{color:#5b6b88}
@media (max-width:560px){.pathrow .pnode{flex:1 1 46%}}
/* R-1: three-step engagement ladder, with Strategic Projects shown ALONGSIDE (not a rung). */
.pathrow .psep{align-self:center;font-size:clamp(15px,1.2vw,18px);font-weight:700;color:#9fb2d6;padding:0 2px}
.sec--light .pathrow .psep{color:#5b6b88}
.pathrow .pnode--along{border-style:dashed;background:transparent}
.sec--light .pathrow .pnode--along{background:transparent}
.pathrow .pnode--along.here{border-style:solid;background:var(--accent,#7fa8e6)}
@media (max-width:560px){.pathrow .psep{display:none}}
/* phone stacks the Solutions hero single-column; the ladder duplicates the cards just below, so hide it
   on phone to keep the hero within the frame (the empty-right problem it solves is desktop-only) */
@media (max-width:899px){ .art--ladder{display:none} } /* phones: the ladder's progression is stated in the Investment chapter text + legend + cards (owner review 2026-10-02 confirmed; adding the rows here would break the phone fit) */
}

/* Hero price line + compact meta row (preserve the "at a glance" facts without a repeated card). */
.h-price{display:flex;align-items:baseline;gap:10px;margin-top:clamp(16px,1.9vh,24px)}
.h-price b{font-size:clamp(21px,1.8vw,28px);font-weight:800;color:#fff;line-height:1}
.h-price span{font-size:var(--label);color:#9fb2d6}
.sec--light .h-price b{color:var(--navy-deep)} .sec--light .h-price span{color:#5b6b88}
.hmeta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(16px,1.9vh,24px)}
.hmeta .hm{display:inline-flex;align-items:center;gap:7px;font-size:var(--kick);color:#c9d3e6;
  background:rgba(255,255,255,.05);border:1px solid rgba(120,150,205,.2);border-radius:999px;padding:7px 13px}
.hmeta .hm b{color:#fff;font-weight:700}
.sec--light .hmeta .hm{color:var(--navy-deep);background:#fff;border-color:#e2e7f0}
.sec--light .hmeta .hm b{color:var(--navy-deep)}

/* ---------------------------------------------------------------------------
   3 · CONTENT ARTIFACTS  (reusable compositions; labels/values vary by content)
   --------------------------------------------------------------------------- */
/* 3a-doc · illustrative NextGen deliverable excerpt (a credible report surface, not a neon graphic).
   Restrained white "paper" on the deep hero — the same document language as the How-It-Works advisory sheets. */
.art-doc{background:linear-gradient(180deg,#f6f7fa,#eef1f6);color:var(--navy-deep);border-radius:14px;
  padding:clamp(18px,1.8vw,26px);border:1px solid rgba(0,27,90,.10);
  box-shadow:0 40px 90px -50px rgba(0,8,32,.9), 0 2px 0 rgba(255,255,255,.6) inset}
.art-doc .adoc-mast{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(0,27,90,.14);padding-bottom:12px;margin-bottom:14px}
.art-doc .adoc-mast img{width:26px;height:auto;flex:0 0 auto}
.art-doc .adoc-mast .mw b{display:block;font-size:11px;letter-spacing:.14em;color:var(--navy-deep);font-weight:800;line-height:1.1}
.art-doc .adoc-mast .mw span{display:block;font-size:9px;letter-spacing:.16em;color:#5b6b88}
.art-doc .adoc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.art-doc .adoc-cat{font-size:var(--kick);letter-spacing:.16em;text-transform:uppercase;color:var(--perf-blue);font-weight:800}
.art-doc .adoc-tag{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#5b6b88;border:1px solid rgba(0,27,90,.16);border-radius:999px;padding:3px 9px}
.art-doc h4{font-size:clamp(16px,1.35vw,21px);color:var(--navy-deep);margin:5px 0 12px;font-weight:800;letter-spacing:-.01em}
.art-doc .adoc-row{padding:9px 0;border-top:1px solid rgba(0,27,90,.09)}
.art-doc .adoc-row .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5b6b88;font-weight:700}
.art-doc .adoc-row .v{font-size:var(--label);color:#3a4761;line-height:1.45;margin-top:3px}
.art-doc .adoc-ill{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(0,27,90,.22);font-size:var(--kick);color:#5b6b88;font-style:italic;line-height:1.4}
.ihero--artifact .art-doc{max-width:min(100%,460px);margin-left:auto}
@media (min-width:901px) and (max-height:760px){ .ihero--artifact .art-doc{padding:16px} .ihero--artifact .art-doc h4{margin:4px 0 8px} .ihero--artifact .art-doc .adoc-row{padding:6px 0} }
@media (max-width:900px){ .ihero--artifact .art-doc{margin:0 auto} }

/* 3a · mini KPI dashboard (glass) */
.art-dash{display:grid;gap:12px}
.art-dash .ad-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.art-dash .ad-kpi{background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-radius:10px;padding:12px}
.art-dash .ad-kpi b{display:block;font-size:clamp(17px,1.5vw,22px);font-weight:800;color:#fff;line-height:1.05}
.art-dash .ad-kpi span{display:block;font-size:var(--kick);color:#9fb2d6;margin-top:3px}
.art-dash .ad-chart{height:96px;background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-radius:10px;padding:10px}
.art-dash .ad-chart svg{width:100%;height:100%;display:block;overflow:visible}

/* 3b · decision framework (base case vs alternatives) */
.art-frame{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.art-frame .af-col{background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-radius:10px;padding:14px}
.art-frame .af-col.on{border-color:rgba(47,107,255,.55);background:rgba(16,38,82,.6)}
.art-frame .af-t{font-size:var(--kick);letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#8fb0ff);font-weight:700}
.art-frame .af-v{font-size:clamp(16px,1.3vw,20px);font-weight:800;color:#fff;margin-top:8px}
.art-frame .af-l{font-size:var(--kick);color:#9fb2d6;margin-top:8px;line-height:1.5}
.art-frame .af-span{grid-column:1/-1;text-align:center;font-size:var(--kick);color:#9fb2d6;padding-top:2px}

/* 3c · horizontal flow (automation / process) */
.art-flow{display:flex;flex-direction:column;gap:10px}
.art-flow .af-step{display:flex;align-items:center;gap:12px;background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-radius:10px;padding:12px 14px}
.art-flow .af-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.18);color:var(--accent,#8fb0ff);font-weight:800}
.art-flow .af-tx b{display:block;font-size:clamp(14px,1.05vw,17px);color:#fff;font-weight:700}
.art-flow .af-tx span{display:block;font-size:var(--kick);color:#9fb2d6;margin-top:2px}
.art-flow .af-arrow{align-self:center;color:#5f78a8;line-height:0}

/* 3d · entity roll-up (multi-entity consolidation) */
.art-rollup{display:grid;gap:12px}
.art-rollup .ar-ents{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.art-rollup .ar-ent{background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-radius:9px;padding:10px;text-align:center;font-size:var(--kick);color:#c9d3e6}
.art-rollup .ar-join{display:flex;justify-content:center;color:#5f78a8;line-height:0}
.art-rollup .ar-group{background:rgba(16,38,82,.6);border:1px solid rgba(47,107,255,.5);border-radius:11px;padding:14px;text-align:center}
.art-rollup .ar-group b{display:block;font-size:clamp(16px,1.3vw,20px);color:#fff;font-weight:800}
.art-rollup .ar-group span{display:block;font-size:var(--kick);color:#9fb2d6;margin-top:4px}

/* 3d-industry · KPI-SUBJECT compositions — the signals we bring into focus per industry (NO fabricated
   numbers; figures await an approved source). Subjects are named; values are deliberately not shown. */
.art-eyb{font-size:var(--kick);letter-spacing:.16em;text-transform:uppercase;color:var(--accent,#8fb0ff);font-weight:700;margin-bottom:12px}
.art-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.art-metrics .am{display:flex;align-items:center;gap:10px;background:rgba(8,22,50,.5);border:1px solid rgba(120,150,205,.18);border-left:3px solid var(--accent,#8fb0ff);border-radius:10px;padding:14px 15px;min-height:64px}
.art-metrics .am::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:var(--accent,#8fb0ff);transform:rotate(45deg)}
.art-metrics .am span{display:block;font-size:clamp(13px,1.02vw,15.5px);color:#eaf0fb;font-weight:600;line-height:1.3}
/* light band — the KPI SUBJECTS we focus on, as a horizontal strip (centered-hero variant) */
.mband{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);margin-top:clamp(20px,2.4vw,32px)}
.mband .mb{border-top:3px solid var(--accent-ink,var(--perf-blue));padding-top:14px}
.mband .mb span{display:block;font-size:clamp(14px,1.15vw,18px);color:var(--navy-deep);font-weight:700;line-height:1.3}
.sec:not(.sec--light) .mband .mb span{color:#eaf0fb}
@media (max-width:700px){ .mband{grid-template-columns:1fr 1fr;gap:16px} }

/* 3e · editorial numbered list (a NON-card navy composition for "questions"/steps) */
.elist{display:grid;gap:0;margin-top:clamp(22px,2.6vw,34px)}
.elist .ei{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);align-items:baseline;
  padding:clamp(15px,2vh,22px) 0;border-top:1px solid rgba(120,150,205,.16)}
.elist .ei:last-child{border-bottom:1px solid rgba(120,150,205,.16)}
.elist .ei .en{font-size:clamp(14px,1.05vw,17px);font-weight:800;color:var(--accent,#7fa8e6);letter-spacing:.1em}
.elist .ei h3{font-size:clamp(17px,1.35vw,22px);margin:0}
.elist .ei p{margin:.4em 0 0;color:#9fb2d6;font-size:var(--label);line-height:1.5}
.sec--light .elist .ei{border-color:rgba(0,27,90,.12)}
.sec--light .elist .ei .en{color:var(--accent-ink,var(--perf-blue))}
.sec--light .elist .ei p{color:#5b6b88}

/* 3f · labelled illustrative-example block (relocated hero figures live here) */
.example{background:rgba(255,255,255,.5);border:1px solid rgba(0,27,90,.12);border-radius:14px;
  padding:clamp(18px,2vw,26px);margin-top:clamp(22px,2.6vw,34px)}
.sec:not(.sec--light) .example{background:rgba(10,24,52,.5);border-color:rgba(120,150,205,.2)}
.example .ex-eyb{font-size:var(--kick);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,var(--perf-blue));font-weight:700}
.sec:not(.sec--light) .example .ex-eyb{color:var(--accent,#8fb0ff)}
.example .ex-figs{display:flex;gap:clamp(16px,2.4vw,40px);flex-wrap:wrap;margin-top:14px}
.example .ex-figs .pf b{display:block;font-size:clamp(20px,1.9vw,30px);font-weight:800;color:var(--navy-deep);line-height:1}
.sec:not(.sec--light) .example .ex-figs .pf b{color:#fff}
.example .ex-figs .pf span{display:block;font-size:var(--kick);color:#5b6b88;margin-top:4px}
.sec:not(.sec--light) .example .ex-figs .pf span{color:#9fb2d6}
.example .ex-note{font-size:var(--kick);color:#5b6b88;margin-top:12px}
.sec:not(.sec--light) .example .ex-note{color:#9fb2d6}

/* Short desktop/laptop heights: tighten dense light "paper" + example scenes so nothing clips at 700h. */
@media (min-width:901px) and (max-height:840px){
  html.scenes-on:not(.scenes-mobile) .stage.stage-on #included .sec-head{margin-bottom:0}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on #included .sec-head .lead{margin-top:8px}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .example{padding:clamp(12px,1.4vw,18px);margin-top:clamp(12px,1.6vw,20px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .example .ex-figs{margin-top:8px}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .example .ex-figs .pf b{font-size:clamp(17px,1.5vw,22px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .example .ex-note{margin-top:8px}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on #included > .wrap{padding-top:calc(var(--headclear) + 2px);padding-bottom:clamp(10px,2vh,18px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .card{padding:clamp(12px,1.2vw,18px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .checks{gap:8px;margin-top:10px}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on #questions .sec-head{margin-bottom:0}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on #questions .grid{gap:clamp(10px,1.2vw,16px);margin-top:clamp(14px,2vw,22px)!important}
  /* tighten long editorial-list chapters (e.g. 9 industry questions) so they fit at 700h */
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .elist{margin-top:clamp(12px,1.6vw,20px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .elist .ei{padding-top:clamp(8px,1.3vh,13px);padding-bottom:clamp(8px,1.3vh,13px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .scene--panel .sec-head{margin-bottom:0}
  /* methodology grouped-step rows: tighten so the 4-step "Decide" group fits at 700h */
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .mstage{padding:clamp(11px,1.7vh,18px) 0}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .mstage .snum{font-size:clamp(30px,3.2vw,48px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .mstage p{margin-top:.25em}
}

/* ---------------------------------------------------------------------------
   4 · RESPONSIVE  (artifacts + compositions collapse cleanly on phones)
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .ihero--artifact .ihero-grid{grid-template-columns:1fr;gap:clamp(24px,5vw,38px)}
  .art{max-width:520px}
}
@media (max-width:560px){
  .art-dash .ad-row,.art-rollup .ar-ents{grid-template-columns:1fr 1fr}
  .art-frame{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   4 · SUBTLE LINE GRAPHICS (owner direction 2026-10-02)
   Decorative, aria-hidden SVG in the site palette: fine lines, faint planes, a few nodes. The scene
   timeline (scenes.js) lifts each .ng-step and draws the .ng-trace as the reader scrolls; with no JS,
   reduced motion or the stacked fallback, everything simply shows at full strength.
   --------------------------------------------------------------------------- */
.ng-graphic{display:block;width:100%;height:auto;overflow:visible}
.ng-graphic path,.ng-graphic polygon,.ng-graphic rect,.ng-graphic circle{vector-effect:non-scaling-stroke}
.ng-graphic text{font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:.03em;fill:#c9d3e6}
.ng-graphic .ng-strong{font-size:16px;font-weight:700;fill:#fff}
.ng-graphic .ng-ln{fill:none;stroke:rgba(143,176,255,.5);stroke-width:1.3}
.ng-graphic .ng-ln-faint{fill:none;stroke:rgba(143,176,255,.2);stroke-width:1}
.ng-graphic .ng-pl{fill:rgba(143,176,255,.08);stroke:rgba(143,176,255,.55);stroke-width:1.2;stroke-linejoin:round}
.ng-graphic .ng-box{fill:rgba(0,27,90,.78);stroke:rgba(143,176,255,.5);stroke-width:1.2}
.ng-graphic .ng-doc rect{fill:rgba(0,27,90,.7);stroke:rgba(143,176,255,.45);stroke-width:1.1}
.ng-graphic .ng-doc path{fill:none;stroke:rgba(143,176,255,.4);stroke-width:1.1}
.ng-graphic .ng-trace{fill:none;stroke:var(--perf-blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.9}
.ng-graphic .ng-node{fill:var(--perf-blue);stroke:#cfe0ff;stroke-width:1.4}
.ng-graphic .ng-node--lg{stroke-width:2}
.ng-graphic .ng-halo{fill:rgba(37,99,235,.18);stroke:rgba(143,176,255,.25);stroke-width:1}
/* graphic heroes sit straight on the deep scene (no glass frame), right-aligned like the artifacts they replace */
.art.art--graphic{width:100%;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.art.art--graphic::after{display:none}
.art--graphic .ng-graphic{max-height:340px}
@media (min-width:901px) and (max-height:850px){ .art--graphic .ng-graphic{max-height:270px} }
@media (min-width:901px) and (max-height:760px){ .art--graphic .ng-graphic{max-height:220px} }
@media (max-width:900px){ .art--graphic .ng-graphic{max-height:210px} }
/* graphic above existing artifact content (Construction signals, Solutions ladder) */
.art .ng-graphic--construction{max-height:190px;margin:2px auto 14px}
.ng-graphic--construction text{font-size:21px}
.ng-graphic--solutions text{font-size:17px;font-weight:700;fill:#9fb2d6}
.art .ng-graphic--solutions{max-height:120px;margin:0 auto 12px}
@media (min-width:901px) and (max-height:760px){ .art .ng-graphic--construction{max-height:140px;margin-bottom:8px} .art .ng-graphic--solutions{max-height:92px;margin-bottom:6px} }
@media (max-width:900px){ .art .ng-graphic--construction{max-height:130px} }

/* ---- Solution openings on phones (owner 2026-10-02): the supporting graphic sits inside the opening screen,
   compact, instead of a near-empty "continued" screen; purely decorative label graphics (.art--decor: Fractional
   CFO, Fractional Controller) are omitted on phones. Price qualifier: the Solutions page's approved wording. ---- */
.h-price b sup{font-size:.55em;color:var(--blue-soft);margin-left:1px}
.h-price-note{margin:6px 0 0;max-width:52ch;font-size:var(--kick);line-height:1.5;color:#9fb0cf}
.h-price-note sup{color:var(--blue-soft)}
@media (max-width:899px){
  .ihero--artifact .art--decor{display:none}
  .ihero--artifact .art:not(.art--decor):not(.art--ladder){margin:2px 0 0;padding:12px 14px;max-width:100%}
  .ihero--artifact .art .art-cap{margin-top:6px}
  .ihero--artifact .art .af-step{padding-top:6px;padding-bottom:6px}
  .ihero--artifact .art .af-arrow{line-height:1;margin:0}
  .ihero--artifact .art-frame{gap:8px}
  .ihero--artifact .art-frame .af-col{padding:8px 10px}
  .ihero--artifact .art-frame .af-v{font-size:15px}
  .ihero--artifact .art-frame .af-span{margin-top:0;padding:6px 10px}
}
/* a comparison graphic kept on taller phones only (it carries a distinct base-case vs alternative idea); omitted where it cannot fit */
@media (max-width:899px) and (max-height:880px){ .ihero--artifact .art--fitonly{display:none} }

/* industry openings with the signals panel inside the opening (Growth, Healthcare, Manufacturing, Service; owner 2026-10-02):
   on phones the panel becomes a compact row of metric chips under the actions, so the opening stays one screen */
@media (max-width:899px){
  .ihero--artifact .art--signals{padding:0;margin:4px 0 0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ihero--artifact .art--signals::after{display:none}
  .ihero--artifact .art--signals .art-eyb{margin:0 0 8px;text-align:left}
  .ihero--artifact .art--signals .art-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ihero--artifact .art--signals .am{padding:6px 9px;border-radius:8px;min-height:0;gap:7px}
  .ihero--artifact .art--signals .am span{font-size:12.5px;line-height:1.25}
  .ihero--artifact .art--signals .am::before{width:5px;height:5px}
  .ihero--artifact .art--signals .art-cap{text-align:left;margin-top:6px}
}