/* Site-wide motif layer, loaded from base.njk after site.css.
   Every inner-page hero gets the homepage treatment (navy, glow, animated network);
   pillar colours + pathway/node details are added per page type below.
   site.css already defines --pc / --pc-l / --pc-t for any element with data-pillar. */

/* ---------- every inner-page hero: dark, with the animated network ---------- */
.hero:not(.hero-home) {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--text-on-navy);
  padding-top: 80px;
}
.hero:not(.hero-home)[style*="padding-bottom"] { padding-bottom: 56px !important; }   /* several pages set a smaller inline value */
.hero:not(.hero-home)::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(44, 75, 219, 0.30), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(44, 75, 219, 0.16), transparent 60%),
    radial-gradient(34% 44% at 62% 105%, rgba(63, 203, 181, 0.09), transparent 70%);
}
.hero:not(.hero-home)::after {
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(44%, 560px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 560 400%22 fill=%22none%22%3E%3Cstyle%3E.l%7Bfill:none%3Bstroke:%23fff%3Bstroke-opacity:.24%3Bstroke-width:1.2%3Bstroke-linecap:round%3Bstroke-dasharray:1%3Banimation:d 1.8s cubic-bezier%28.22%2C.61%2C.36%2C1%29 var%28--d%2C0s%29 both%7D.n%7Btransform-box:fill-box%3Btransform-origin:center%3Banimation:p .6s cubic-bezier%28.22%2C.61%2C.36%2C1%29 var%28--d%2C0s%29 both%7D.h%7Bfill:none%3Bstroke-width:1%3Btransform-box:fill-box%3Btransform-origin:center%3Banimation:h 5s ease-out var%28--d%2C2s%29 infinite both%7D.s%7Bfill:%237f9bff%3Bstroke:%237f9bff%7D.p%7Bfill:%23ff9060%3Bstroke:%23ff9060%7D.v%7Bfill:%23e9c14f%7D.i%7Bfill:%233fcbb5%3Bstroke:%233fcbb5%7D.w%7Bfill:%23fff%3Bfill-opacity:.55%7D.h.s%2C.h.p%2C.h.i%7Bfill:none%7D%40keyframes d%7Bfrom%7Bstroke-dashoffset:1%7Dto%7Bstroke-dashoffset:0%7D%7D%40keyframes p%7Bfrom%7Bopacity:0%3Btransform:scale%28.3%29%7Dto%7Bopacity:1%3Btransform:none%7D%7D%40keyframes h%7B0%25%7Bopacity:.7%3Btransform:scale%281%29%7D80%25%2C100%25%7Bopacity:0%3Btransform:scale%284.5%29%7D%7D%40media %28prefers-reduced-motion:reduce%29%7B%2A%7Banimation:none%21important%7D.h%7Bopacity:0%7D%7D%3C/style%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:.1s%22 d=%22M50 330 L160 240 L270 285 L390 150 L510 205%22/%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:.6s%22 d=%22M160 240 L200 105 L335 70 L390 150%22/%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:1s%22 d=%22M270 285 L345 365%22/%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:1.2s%22 d=%22M200 105 L95 52%22/%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:1.4s%22 d=%22M390 150 L470 58%22/%3E%3Cpath class=%22l%22 pathLength=%221%22 style=%22--d:1.6s%22 d=%22M510 205 L540 305%22/%3E%3Ccircle class=%22h s%22 style=%22--d:2.2s%22 cx=%22160%22 cy=%22240%22 r=%225%22/%3E%3Ccircle class=%22h i%22 style=%22--d:3.4s%22 cx=%22390%22 cy=%22150%22 r=%225%22/%3E%3Ccircle class=%22h p%22 style=%22--d:4.6s%22 cx=%22270%22 cy=%22285%22 r=%225%22/%3E%3Ccircle class=%22n s%22 style=%22--d:.2s%22 cx=%2250%22 cy=%22330%22 r=%225%22/%3E%3Ccircle class=%22n s%22 style=%22--d:.7s%22 cx=%22160%22 cy=%22240%22 r=%226%22/%3E%3Ccircle class=%22n p%22 style=%22--d:1s%22 cx=%22270%22 cy=%22285%22 r=%226%22/%3E%3Ccircle class=%22n i%22 style=%22--d:1.3s%22 cx=%22390%22 cy=%22150%22 r=%226.5%22/%3E%3Ccircle class=%22n v%22 style=%22--d:1.7s%22 cx=%22510%22 cy=%22205%22 r=%225%22/%3E%3Ccircle class=%22n w%22 style=%22--d:1.1s%22 cx=%22200%22 cy=%22105%22 r=%223.5%22/%3E%3Ccircle class=%22n w%22 style=%22--d:1.4s%22 cx=%22335%22 cy=%2270%22 r=%223.5%22/%3E%3Ccircle class=%22n w%22 style=%22--d:1.2s%22 cx=%22345%22 cy=%22365%22 r=%223.5%22/%3E%3Ccircle class=%22n w%22 style=%22--d:1.4s%22 cx=%2295%22 cy=%2252%22 r=%223.5%22/%3E%3Ccircle class=%22n p%22 style=%22--d:1.8s%22 cx=%22470%22 cy=%2258%22 r=%224.5%22/%3E%3Ccircle class=%22n i%22 style=%22--d:2s%22 cx=%22540%22 cy=%22305%22 r=%224%22/%3E%3C/svg%3E") no-repeat right center / contain;
}
.hero.hero:not(.hero-home) .wrap::before { content: none; }       /* replaces the small paper-page node bar */
.hero:not(.hero-home) .wrap { position: relative; z-index: 1; }
.hero:not(.hero-home) .label { color: var(--accent-on-navy); }
.hero:not(.hero-home) h1 { color: #fff; }
.hero:not(.hero-home) .lede { color: var(--text-on-navy); }
.hero:not(.hero-home) .hero-trust, .hero:not(.hero-home) .blog-meta { color: #8f9ab5; }
.hero:not(.hero-home) .back-link { color: #9ba6c2; }
.hero:not(.hero-home) .back-link:hover { color: #fff; }
.hero:not(.hero-home) .btn-secondary { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.hero:not(.hero-home) .btn-secondary:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hero:not(.hero-home) .text-link { color: var(--accent-on-navy); }
.hero--rail::after { bottom: 150px; }       /* heroes with a pillar key keep the art above it */
@media (max-width: 900px) { .hero:not(.hero-home)::after { width: 100%; opacity: 0.4; } .hero--rail::after { bottom: 0; } }
@media (max-width: 760px) { .hero:not(.hero-home) { padding-top: 56px; } .hero:not(.hero-home)[style*="padding-bottom"] { padding-bottom: 44px !important; } }

/* ---------- pillar key (Solutions hero) ---------- */
.pillar-rail {
  position: relative; list-style: none; margin: 56px 0 0; padding: 30px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px;
}
.pillar-rail::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; opacity: 0.5;
  background: linear-gradient(90deg, var(--c-systems-l), var(--c-presence-l), var(--c-visual-l), var(--c-insight-l));
}
.pillar-rail::after {
  content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 3px; border-radius: 3px; opacity: 0.6;
  background-image: linear-gradient(90deg, transparent, #fff, transparent);
  background-repeat: no-repeat; background-size: 120px 100%;
  animation: rail 7s linear infinite;
}
@keyframes rail { from { background-position: -120px 0; } to { background-position: calc(100% + 120px) 0; } }
.pillar-rail li { position: relative; display: grid; gap: 2px; align-content: start; }
.pillar-rail li::before {
  content: ""; position: absolute; left: 0; top: -30px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--pc-l); box-sizing: border-box;
}
.pr-n { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--pc-l); }
.pr-t { font-family: var(--display); font-weight: 600; color: #fff; letter-spacing: 0.06em; font-size: 0.98rem; }
.pr-d { font-size: 0.84rem; line-height: 1.45; color: #9ba6c2; }
@media (max-width: 760px) {
  .pillar-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; margin-top: 40px; }
  .pillar-rail::before, .pillar-rail::after { display: none; }
  .pillar-rail li { padding-top: 0; padding-left: 22px; }
  .pillar-rail li::before { top: 4px; }
}

/* ---------- dark section with the network backdrop ---------- */
.net-bg { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--text-on-navy); }
.net-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(44, 75, 219, 0.26), transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgba(44, 75, 219, 0.14), transparent 60%);
}
.net-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360' fill='none'><g stroke='%23ffffff' stroke-opacity='.10' stroke-width='1'><path d='M40 300 L150 210 L260 250 L370 140 L480 190'/><path d='M150 210 L190 90 L320 60 L370 140'/><path d='M260 250 L330 330'/><path d='M190 90 L90 40'/></g><g stroke-opacity='0'><circle cx='40' cy='300' r='4' fill='%237f9bff' fill-opacity='.55'/><circle cx='150' cy='210' r='4' fill='%23ff9060' fill-opacity='.55'/><circle cx='260' cy='250' r='4' fill='%23e9c14f' fill-opacity='.55'/><circle cx='370' cy='140' r='4' fill='%233fcbb5' fill-opacity='.55'/><circle cx='480' cy='190' r='4' fill='%237f9bff' fill-opacity='.4'/><circle cx='190' cy='90' r='3' fill='%23ffffff' fill-opacity='.35'/><circle cx='320' cy='60' r='3' fill='%23ffffff' fill-opacity='.35'/><circle cx='330' cy='330' r='3' fill='%23ffffff' fill-opacity='.3'/><circle cx='90' cy='40' r='3' fill='%23ffffff' fill-opacity='.3'/></g></svg>") no-repeat 100% 50% / 46%;
}
@media (max-width: 900px) { .net-bg::after { background-position: 100% 0; background-size: 90%; opacity: 0.55; } }

/* ---------- scroll reveal: keep hover transitions snappy once a card is in ---------- */
.js .reveal.in.svc-tile, .js .reveal.in.index-card, .js .reveal.in.service-card, .js .reveal.in.pf-also-item {
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}


/* ============ page types ============ */
/* ---- service + category + case-study pages: wrapper carries data-pillar ---- */
.pillar-scope .sp-list li::before { background: color-mix(in srgb, var(--pc) 14%, var(--card)); color: var(--pc-t); }
.pillar-scope .sp-h { position: relative; }
.pillar-scope .sp-proof { border-left-color: var(--pc); }
.pillar-scope .sp-proof:hover { border-color: var(--pc); }
.pillar-scope .sp-faq summary:hover, .pillar-scope .sp-faq summary::after { color: var(--pc-t); }
.pillar-scope .highlight-note { border-left-color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, var(--card)); }
.pillar-scope .price-table td:last-child { color: var(--ink); }
.pillar-scope .sp-related a:hover { border-color: var(--pc); }
.pillar-scope .sp-handoff { border-top: 2px solid var(--pc); }
.pillar-scope .text-link { color: var(--pc-t); }
.pillar-scope .hero .label { color: var(--pc-l, var(--accent-on-navy)); }

/* "How it works": three stations on one pathway */
.sp-steps { position: relative; counter-reset: sp; }
.sp-steps li::before { background: var(--pc, var(--accent)); position: relative; z-index: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent); }
.sp-steps li:hover { border-color: var(--pc, var(--accent)); }
@media (min-width: 701px) {
  .sp-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 43px; height: 1px; background: var(--rule); z-index: 0; }
  .sp-steps::after {
    content: ""; position: absolute; left: 6%; right: 6%; top: 42px; height: 3px; border-radius: 3px; opacity: 0.55; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, transparent, var(--pc, var(--accent)), transparent);
    background-repeat: no-repeat; background-size: 120px 100%; animation: rail 8s linear infinite;
  }
  .sp-steps li { position: relative; z-index: 1; }
}

/* ---- blog: category colours, reading line ---- */
.blog-card[data-pillar] { border-top: 2px solid var(--pc); }
.blog-card[data-pillar] .label { color: var(--pc-t); }
.blog-card[data-pillar]:hover { border-color: var(--pc); box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--pc) 55%, #0e1a33); }
.blog-card h3 a:hover { color: var(--pc-t); }
.post-body blockquote { border-left-color: var(--pc, var(--accent)); }
.post-body a { color: var(--pc-t, var(--accent-deep)); }
@supports (animation-timeline: scroll()) {
  body:has(.post-body)::before {
    content: ""; position: fixed; left: 0; top: 0; z-index: 200; height: 3px; width: 100%;
    background: var(--pc-l, var(--accent)); transform-origin: left; transform: scaleX(0);
    animation: read-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

/* ---- about: the four values take the four pillar colours ---- */
.value-grid > :nth-child(4n + 1), .card-grid.cycle > :nth-child(4n + 1) { --pc: var(--c-systems);  --pc-l: var(--c-systems-l);  --pc-t: var(--c-systems-t); }
.value-grid > :nth-child(4n + 2), .card-grid.cycle > :nth-child(4n + 2) { --pc: var(--c-presence); --pc-l: var(--c-presence-l); --pc-t: var(--c-presence-t); }
.value-grid > :nth-child(4n + 3), .card-grid.cycle > :nth-child(4n + 3) { --pc: var(--c-visual);   --pc-l: var(--c-visual-l);   --pc-t: var(--c-visual-t); }
.value-grid > :nth-child(4n + 4), .card-grid.cycle > :nth-child(4n + 4) { --pc: var(--c-insight);  --pc-l: var(--c-insight-l);  --pc-t: var(--c-insight-t); }
.value-grid .index-card { position: relative; border-top: 2px solid var(--pc); }
.value-grid .index-card::before {
  content: ""; position: absolute; left: 24px; top: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-deep); border: 2px solid var(--pc); box-sizing: border-box;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.value-grid .index-card:hover { border-color: var(--pc); }
.value-grid .index-card:hover::before { background: var(--pc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 16%, transparent); }
.value-grid .index-card .label { color: var(--pc-t); }

/* about portrait: a slow orbit of nodes */
.stamp-portrait:has(.ring-mark)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360' fill='none'><g stroke='%23ffffff' stroke-opacity='.10' stroke-width='1'><path d='M40 300 L150 210 L260 250 L370 140 L480 190'/><path d='M150 210 L190 90 L320 60 L370 140'/><path d='M260 250 L330 330'/><path d='M190 90 L90 40'/></g><g stroke-opacity='0'><circle cx='40' cy='300' r='4' fill='%237f9bff' fill-opacity='.55'/><circle cx='150' cy='210' r='4' fill='%23ff9060' fill-opacity='.55'/><circle cx='260' cy='250' r='4' fill='%23e9c14f' fill-opacity='.55'/><circle cx='370' cy='140' r='4' fill='%233fcbb5' fill-opacity='.55'/><circle cx='480' cy='190' r='4' fill='%237f9bff' fill-opacity='.4'/><circle cx='190' cy='90' r='3' fill='%23ffffff' fill-opacity='.35'/><circle cx='320' cy='60' r='3' fill='%23ffffff' fill-opacity='.35'/><circle cx='330' cy='330' r='3' fill='%23ffffff' fill-opacity='.3'/><circle cx='90' cy='40' r='3' fill='%23ffffff' fill-opacity='.3'/></g></svg>") no-repeat center / 120%;
}

/* ---- resume: experience as stations on a pathway; skills coloured ---- */
.ledger { position: relative; border-top: 0; padding-left: 34px; }
.ledger::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--c-systems), var(--c-presence), var(--c-visual), var(--c-insight)); opacity: 0.55; }
.ledger::after {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; opacity: 0.6; pointer-events: none;
  background-image: linear-gradient(180deg, transparent, var(--accent), transparent); background-repeat: no-repeat; background-size: 100% 110px;
  animation: pathway 9s linear infinite;
}
.ledger-row { position: relative; }
.ledger-row::before {
  content: ""; position: absolute; left: -34px; top: 32px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--pc, var(--accent)); box-sizing: border-box; z-index: 1;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ledger-row:hover::before { background: var(--pc, var(--accent)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent); }
.ledger-row:nth-child(4n + 1) { --pc: var(--c-systems); --pc-t: var(--c-systems-t); }
.ledger-row:nth-child(4n + 2) { --pc: var(--c-presence); --pc-t: var(--c-presence-t); }
.ledger-row:nth-child(4n + 3) { --pc: var(--c-visual); --pc-t: var(--c-visual-t); }
.ledger-row:nth-child(4n + 4) { --pc: var(--c-insight); --pc-t: var(--c-insight-t); }
.ledger-row h3 { transition: color 0.2s var(--ease); }
.ledger-row:hover h3 { color: var(--pc-t); }
.card-grid > .index-card:nth-child(4n + 1) { --pc: var(--c-systems);  --pc-t: var(--c-systems-t); }
.card-grid > .index-card:nth-child(4n + 2) { --pc: var(--c-presence); --pc-t: var(--c-presence-t); }
.card-grid > .index-card:nth-child(4n + 3) { --pc: var(--c-visual);   --pc-t: var(--c-visual-t); }
.card-grid > .index-card:nth-child(4n + 4) { --pc: var(--c-insight);  --pc-t: var(--c-insight-t); }
.card-grid > .index-card:not([data-pillar]):not(.reveal) { border-top: 2px solid var(--pc); }
.card-grid > .index-card:not([data-pillar]):not(.reveal):hover { border-color: var(--pc); }

/* ---- contact: the details card gets a pathway ---- */
.contact-card { position: relative; overflow: hidden; isolation: isolate; padding-left: 52px; }
.contact-card::before { content: ""; position: absolute; left: 30px; top: 38px; bottom: 38px; width: 1px; background: linear-gradient(180deg, var(--c-systems-l), var(--c-presence-l), var(--c-visual-l), var(--c-insight-l)); opacity: 0.5; z-index: -1; }
.contact-card::after {
  content: ""; position: absolute; left: 29px; top: 38px; bottom: 38px; width: 3px; border-radius: 3px; opacity: 0.6; z-index: -1; pointer-events: none;
  background-image: linear-gradient(180deg, transparent, #fff, transparent); background-repeat: no-repeat; background-size: 100% 90px;
  animation: pathway 6.5s linear infinite;
}
.contact-line { position: relative; }
.contact-line::before {
  content: ""; position: absolute; left: -26px; top: 27px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--pc-l, var(--accent-on-navy)); box-sizing: border-box;
}
.contact-line:nth-child(4n + 1) { --pc-l: var(--c-systems-l); }
.contact-line:nth-child(4n + 2) { --pc-l: var(--c-presence-l); }
.contact-line:nth-child(4n + 3) { --pc-l: var(--c-visual-l); }
.contact-line:nth-child(4n + 4) { --pc-l: var(--c-insight-l); }

/* ---- homepage service tiles pick up the same pillar colour ---- */
.svc-tiles .svc-tile[data-pillar] { border-top: 2px solid var(--pc); }
.svc-tiles .svc-tile[data-pillar]::after { content: none; }
.svc-tiles .svc-tile[data-pillar] .svc-num { color: var(--pc-t); }
.svc-tiles .svc-tile[data-pillar] .svc-ico { color: var(--pc); }
.svc-tiles .svc-tile[data-pillar] .svc-link { color: var(--pc-t); }
.svc-tiles .svc-tile[data-pillar]:hover { border-color: var(--pc); }

@media (max-width: 900px) { .contact-card { position: relative; top: auto; } }
@media (max-width: 760px) { .ledger { padding-left: 28px; } .ledger-row::before { left: -28px; top: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .ledger::after, .contact-card::after, .sp-steps::after { display: none; }
  body:has(.post-body)::before { display: none; }
}

/* ---------- Work page: faint pillar-coloured network under each area heading ---------- */
.pf-section[data-pillar="systems"] .pf-head::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none'><g stroke='%230e1a33' stroke-opacity='.13'><path d='M12 122 L72 72 L132 100 L192 40 L248 64'/><path d='M72 72 L98 22'/><path d='M132 100 L170 142'/></g><g fill='%233b63f0'><circle cx='12' cy='122' r='4' fill-opacity='.85'/><circle cx='72' cy='72' r='4.5'/><circle cx='132' cy='100' r='4' fill-opacity='.85'/><circle cx='192' cy='40' r='5.5'/><circle cx='248' cy='64' r='3.5' fill-opacity='.5'/><circle cx='98' cy='22' r='3' fill-opacity='.45'/><circle cx='170' cy='142' r='3' fill-opacity='.45'/></g></svg>"); }
.pf-section[data-pillar="presence"] .pf-head::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none'><g stroke='%230e1a33' stroke-opacity='.13'><path d='M12 122 L72 72 L132 100 L192 40 L248 64'/><path d='M72 72 L98 22'/><path d='M132 100 L170 142'/></g><g fill='%23e8632c'><circle cx='12' cy='122' r='4' fill-opacity='.85'/><circle cx='72' cy='72' r='4.5'/><circle cx='132' cy='100' r='4' fill-opacity='.85'/><circle cx='192' cy='40' r='5.5'/><circle cx='248' cy='64' r='3.5' fill-opacity='.5'/><circle cx='98' cy='22' r='3' fill-opacity='.45'/><circle cx='170' cy='142' r='3' fill-opacity='.45'/></g></svg>"); }
.pf-section[data-pillar="visual"] .pf-head::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none'><g stroke='%230e1a33' stroke-opacity='.13'><path d='M12 122 L72 72 L132 100 L192 40 L248 64'/><path d='M72 72 L98 22'/><path d='M132 100 L170 142'/></g><g fill='%23c99a1e'><circle cx='12' cy='122' r='4' fill-opacity='.85'/><circle cx='72' cy='72' r='4.5'/><circle cx='132' cy='100' r='4' fill-opacity='.85'/><circle cx='192' cy='40' r='5.5'/><circle cx='248' cy='64' r='3.5' fill-opacity='.5'/><circle cx='98' cy='22' r='3' fill-opacity='.45'/><circle cx='170' cy='142' r='3' fill-opacity='.45'/></g></svg>"); }
.pf-section[data-pillar="insight"] .pf-head::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none'><g stroke='%230e1a33' stroke-opacity='.13'><path d='M12 122 L72 72 L132 100 L192 40 L248 64'/><path d='M72 72 L98 22'/><path d='M132 100 L170 142'/></g><g fill='%2312907f'><circle cx='12' cy='122' r='4' fill-opacity='.85'/><circle cx='72' cy='72' r='4.5'/><circle cx='132' cy='100' r='4' fill-opacity='.85'/><circle cx='192' cy='40' r='5.5'/><circle cx='248' cy='64' r='3.5' fill-opacity='.5'/><circle cx='98' cy='22' r='3' fill-opacity='.45'/><circle cx='170' cy='142' r='3' fill-opacity='.45'/></g></svg>"); }
@media (max-width: 960px) { .pf-head::after { display: none !important; } }

/* category hub cards (not the /services/ ledger, which has its own layout) */
.pillar-scope .service-card[data-pillar] { border-top: 2px solid var(--pc); }
.pillar-scope .service-card[data-pillar]:hover { border-color: var(--pc); }
.pillar-scope .service-card[data-pillar] .from { color: var(--pc-t); }

/* back link sits on its own line above the label */
.hero:not(.hero-home) .back-link { display: block; width: fit-content; }