/* Growth sector pages (/growth/agencies, /managed-it, /cybersecurity, /compliance, /commercial-cleaning).
   Loads after growth-home.css, growth-page.css and growth-depth.css and adds only what they do not provide. Each page sets one hue on <body>
   (sp-violet, sp-pink, sp-green, sp-lime, sp-orange) taken from the same sampled palette, so the five pages share a system and differ in colour. */

body.sp-violet { --sx: #5468F4; --sx-hi: #A9A0F8; --sx-text: #4a4fe0; --sx-soft: rgba(84, 104, 244, .12); }
body.sp-pink   { --sx: #F13F82; --sx-hi: #FAA6C9; --sx-text: #c01f63; --sx-soft: rgba(241, 63, 130, .11); }
body.sp-green  { --sx: #347D55; --sx-hi: #79B49B; --sx-text: #1f6b45; --sx-soft: rgba(52, 125, 85, .13); }
body.sp-lime   { --sx: #7C9200; --sx-hi: #CAD588; --sx-text: #5c6d00; --sx-soft: rgba(146, 165, 27, .16); }
body.sp-orange { --sx: #AC6C46; --sx-hi: #D4A37F; --sx-text: #8c4d28; --sx-soft: rgba(172, 108, 70, .14); }
:root[data-theme="dark"] body.sp-violet { --sx-text: #A9A0F8; }
:root[data-theme="dark"] body.sp-pink   { --sx-text: #FAA6C9; }
:root[data-theme="dark"] body.sp-green  { --sx-text: #8fd9b3; }
:root[data-theme="dark"] body.sp-lime   { --sx-text: #dbe95a; }
:root[data-theme="dark"] body.sp-orange { --sx-text: #f2b98e; }

/* Hero: left-aligned copy with the five-step card beside it (the home page and /growth centre theirs). */
.sp-hero { padding: calc(104px + 1vw) 0 clamp(40px, 6vw, 80px); }
.sp-hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .sp-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.sp-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.sp-hero h1 .hl { background: linear-gradient(100deg, var(--sx-text), var(--sx)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-hero .mono-eyebrow { color: var(--sx-text); }
.sp-crumbs { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--ink-3); margin-bottom: 14px; }
.sp-crumbs a { color: var(--ink-2); text-decoration: none; min-height: 24px; }
.sp-crumbs a:hover { color: var(--sx-text); text-decoration: underline; }
.sp-chain { padding: clamp(22px, 2.6vw, 32px); gap: 14px; }
.sp-chain ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-chain li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.sp-chain .n { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font: 800 .95rem var(--font-head); background: rgba(8, 6, 24, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.gc-lime.sp-chain .n { background: rgba(16, 20, 10, .82); color: #E7FA22; }
.sp-chain b { display: block; font: 800 1.05rem/1.2 var(--font-head); letter-spacing: -.02em; }
.sp-chain li span:not(.n) { display: block; font-size: .92rem; line-height: 1.4; opacity: .94; }

/* 1 · Target businesses */
.sp-targets { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sp-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-targets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-target { position: relative; overflow: hidden; padding: 26px 22px 22px; display: grid; gap: 10px; align-content: start; }
.sp-bar { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--sx), var(--sx-hi)); }
.sp-target h3 { font-size: 1.12rem; font-weight: 800; }
.sp-target p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.sp-target .sp-look { font-size: .88rem; color: var(--ink-3); padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.sp-profile { margin-top: 22px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; }
.sp-profile dl { margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sp-profile dl { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sp-profile dl > div { padding: 12px 14px; border-radius: 14px; background: var(--sx-soft); border: 1px solid var(--line); }
.sp-profile dt { font: 700 .7rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sx-text); }
.sp-profile dd { margin: 6px 0 0; font-size: .94rem; color: var(--ink); }
.sp-profile .mono-eyebrow { color: var(--sx-text); }

/* 2 · Buying roles */
.sp-offers { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sp-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-offer { padding: 24px; display: grid; gap: 12px; align-content: start; border-left: 6px solid var(--sx); }
.sp-offer h3 { font-size: 1.15rem; font-weight: 800; display: grid; gap: 4px; }
.sp-k { font: 700 .7rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sx-text); }
.sp-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-roles li { padding: 6px 12px; border-radius: 999px; background: var(--sx-soft); border: 1px solid var(--line-strong); font: 700 .86rem/1.25 var(--font-body); color: var(--ink); }
.sp-offer p { margin: 0; color: var(--ink-2); font-size: .94rem; }

/* Sample workspace: reuses the home page stage, flat (no scroll tilt) on these pages. */
.sp-scrollstage { padding-top: 0; }
.sp-stage { transform: none !important; }

/* 3 · Evidence */
.sp-evidence { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .sp-evidence { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.sp-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-list li { position: relative; padding-left: 26px; line-height: 1.45; }
.sp-list li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.gcard .sp-list li { color: inherit; }
.gc-lime .sp-list li::before { border-color: #10140a; }
.sp-wont { padding: clamp(22px, 3vw, 32px); display: grid; gap: 12px; align-content: start; }
.sp-wont .mono-eyebrow { color: var(--sx-text); }
.sp-list-no li { color: var(--ink-2); }
.sp-list-no li::before { width: 12px; height: 2px; border: 0; background: var(--warn); transform: none; top: .75em; left: 3px; }

/* 4 · Outreach */
.sp-outreach { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sp-outreach { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.sp-draft { margin: 0; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; border-top: 6px solid var(--sx); }
.sp-draft figcaption { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sp-draft .wsx-tag.sample { background: var(--sx-soft); color: var(--sx-text); border: 1px solid var(--line-strong); padding: 4px 11px; border-radius: 999px; font: 700 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sp-to { font-size: .9rem; color: var(--ink-3); }
.sp-draft blockquote { margin: 0; padding: 18px 20px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.sp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-acts .act { cursor: default; border-color: var(--line-strong); color: var(--ink); }
.sp-acts .act.p { background: var(--sx); border-color: var(--sx); color: #fff; }
.sp-lime .sp-acts .act.p { background: #E7FA22; border-color: #E7FA22; color: #10130a; }
.sp-built { padding: clamp(22px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.sp-built .mono-eyebrow { color: var(--sx-text); }
.sp-built .mono-eyebrow:not(:first-child) { margin-top: 8px; }

/* 5 · Replies, follow-ups, pipeline */
.sp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: sp; }
@media (min-width: 760px) { .sp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-flow li { padding: 20px 20px 22px; display: grid; gap: 6px; align-content: start; position: relative; border-top: 5px solid var(--sx); }
.sp-flow li b { font: 800 1.05rem/1.2 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.sp-flow li span:not(.dotc) { color: var(--ink-2); font-size: .94rem; }
.sp-flow .dotc { width: 11px; height: 11px; }
.sp-flow .stg, .sector-note .stg { background: var(--sx-soft); color: var(--ink); border: 1px solid var(--line-strong); }
.sector-note .stg.s1 { border-color: #5468F4; } .sector-note .stg.s2 { border-color: #2E4DE2; } .sector-note .stg.s3 { border-color: #347D55; } .sector-note .stg.s4 { border-color: #92A51B; }

/* Other sectors */
.sp-others { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sp-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sp-others { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
a.sp-other { display: grid; gap: 4px; align-content: end; min-height: 124px; padding: 20px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; background: var(--gbg); position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 48px -24px var(--gshadow); transition: transform .25s var(--ease); }
a.sp-other::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 55% at 50% -8%, var(--ghi), transparent 72%); }
a.sp-other:hover, a.sp-other:focus-visible { transform: translateY(-3px); }
a.sp-other span { font: 800 1.1rem/1.2 var(--font-head); letter-spacing: -.02em; }
a.sp-other small { font-size: .86rem; opacity: .92; }
a.sp-other.gc-lime { color: #10140a; }
@media (prefers-reduced-motion: reduce) { a.sp-other, .gcard { transition: none; } a.sp-other:hover { transform: none; } }