/* /service-palette.css */
/* Generated from service-palette.mjs by build-site.mjs. */
:root {
  --cf-service-build: #67DDFF;
  --cf-service-build-ink: #006F99;
  --cf-service-improve: #A7ABFF;
  --cf-service-improve-ink: #535B9C;
  --cf-service-connect: #54DCC8;
  --cf-service-connect-ink: #146D66;
  --cf-service-website: #C5E77A;
  --cf-service-website-ink: #526B1D;
  --cf-service-visibility: #FFAB99;
  --cf-service-visibility-ink: #934838;
  --cf-service-brand: #DCA3EF;
  --cf-service-brand-ink: #82508F;
  --cf-service-reliability: #F1C27D;
  --cf-service-reliability-ink: #805D23;
  --cf-service-software: #8AB8FF;
  --cf-service-software-ink: #355D98;
  --service-accent: var(--cf-service-build);
  --service-ink: var(--cf-service-build-ink);
}
[data-service="build"] { --service-accent: var(--cf-service-build); --service-ink: var(--cf-service-build-ink); }
[data-service="improve"] { --service-accent: var(--cf-service-improve); --service-ink: var(--cf-service-improve-ink); }
[data-service="connect"] { --service-accent: var(--cf-service-connect); --service-ink: var(--cf-service-connect-ink); }
[data-service="website"] { --service-accent: var(--cf-service-website); --service-ink: var(--cf-service-website-ink); }
[data-service="visibility"] { --service-accent: var(--cf-service-visibility); --service-ink: var(--cf-service-visibility-ink); }
[data-service="brand"] { --service-accent: var(--cf-service-brand); --service-ink: var(--cf-service-brand-ink); }
[data-service="reliability"] { --service-accent: var(--cf-service-reliability); --service-ink: var(--cf-service-reliability-ink); }
[data-service="software"] { --service-accent: var(--cf-service-software); --service-ink: var(--cf-service-software-ink); }
:root, [data-service] {
  --service-line: color-mix(in srgb, var(--service-accent) 38%, var(--cf-line));
  --service-wash: color-mix(in srgb, var(--service-accent) 8%, var(--cf-surface));
  --service-soft: color-mix(in srgb, var(--service-accent) 17%, var(--cf-night));
}

/* /service-theme.css */
/* Service colour is a wayfinding cue. Neutral type, graphite surfaces and the
   official blue identity stay shared. No filters or overlays on client artwork. */
[data-service] :is(a,button,input,textarea,select,summary):focus-visible {outline-color:var(--service-accent)}

/* The service scenes use identical materials, type and composed bounds. */
body[data-page=home] .cf-story-card[data-service] {
 --story-accent:var(--service-accent);
 border-color:var(--service-line);
 background:radial-gradient(ellipse at 85% 15%,color-mix(in srgb,var(--service-accent) 9%,transparent),transparent 60%),linear-gradient(135deg,#151e2c,#090e18 70%);
 box-shadow:inset 0 1px 0 #a9c8ed35,inset 0 -2px 0 var(--service-line),0 35px 65px -30px #02050dcc;
}
body[data-page=home] .cf-story-card[data-service] .cf-story-card-top>span:last-child {color:var(--service-accent);border-color:var(--service-line)}
body[data-page=home] .cf-story-card[data-service] .cf-story-card-top>span:first-child {color:var(--service-accent)}
body[data-page=home] .cf-story-card[data-service] .cf-story-cta {border-color:var(--service-line)}
body[data-page=home] .cf-story-card[data-service] .cf-card-sheen {background:radial-gradient(ellipse at 65% 35%,color-mix(in srgb,var(--service-accent) 6%,transparent),transparent 65%),linear-gradient(112deg,transparent 25%,color-mix(in srgb,var(--service-accent) 9%,transparent) 45%,#e2ebf10c 49%,transparent 75%)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.micro {color:var(--service-accent)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]:is(:hover,:focus-within) {background:linear-gradient(90deg,var(--service-wash),transparent 75%)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.text-link {color:var(--service-accent);border-color:var(--service-line);background:var(--service-soft)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.text-link:is(:hover,:focus-visible) {background:var(--service-accent);color:var(--cf-night);box-shadow:0 0 20px color-mix(in srgb,var(--service-accent) 12%,transparent)}
body[data-page=home] .cf-care[data-service] :is(.micro,.cf-care-action .text-link span) {color:var(--service-accent)}
.about-services li[data-service]::marker {color:var(--service-accent)}
.about-services li[data-service] {border-inline-start:2px solid var(--service-accent);padding-inline-start:12px}

/* One authored service identity follows a case from card to full page. */
.cf-project[data-service] .project-card-arrow,
#case-content[data-service] :is(.cinema-title a,.finale-link,.proof-focus-mark,.case-close>.eyebrow) {color:var(--service-accent)}
/* Pale filled actions use dark ink; service accents belong on dark surfaces
   or behind dark text. Keep the launch label and arrow readable in every state. */
#case-content[data-service] .project-launch {color:var(--cf-night)}
#case-content[data-service] .project-launch>span {color:inherit}
#case-content[data-service] .project-launch:is(:hover,:focus-visible) {background:var(--service-accent);border-color:var(--service-accent);color:var(--cf-night)}
.cf-project[data-service] .cf-project-link:focus-visible .project-title-mask>span {text-decoration-color:var(--service-accent)}
[data-service] .project-portal-back {stroke:var(--service-line)}
[data-service] .project-portal-light {stroke:var(--service-accent);filter:drop-shadow(0 0 4px var(--service-accent))}
[data-service] .project-portal-accent {stroke:var(--service-accent)}
#case-content[data-service] .portal-back {stroke:var(--service-line)}
#case-content[data-service] .portal-energy {stroke:var(--service-accent);filter:drop-shadow(0 0 4px var(--service-accent)) drop-shadow(0 0 14px color-mix(in srgb,var(--service-accent) 45%,transparent))}
#case-content[data-service] .portal-violet {stroke:var(--service-accent);filter:none;opacity:.4}
body[data-experience=cinematic] #case-content[data-service] :is(.case-brief,.case-delivery,.flow-runway):before {background:linear-gradient(90deg,transparent,var(--service-accent),transparent)}
body[data-experience=cinematic] #case-content[data-service] .case-brief {background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--service-accent) 6%,transparent),transparent 65%),var(--cf-surface)}
#case-content[data-service] :is(.delivery-integrations>span,.stack-list>span) {border-color:var(--service-line)}
#case-content[data-service] .case-next-meter>i {background:var(--service-accent)}
.project-filters button[data-service] {border-color:var(--service-line)}
.project-filters button[data-service] span {color:var(--service-accent)}
.project-filters button[data-service]:hover {border-color:var(--service-accent);background:var(--service-wash)}
.project-filters button[data-service][aria-pressed=true] {background:var(--service-accent);border-color:var(--service-accent);color:var(--cf-night)}
.project-filters button[data-service][aria-pressed=true] span {color:var(--cf-night)}

/* The enquiry carries the selected service through its brief and controls. */
#contact-dialog .enquiry-start[data-service] {border-color:var(--service-line);background:linear-gradient(120deg,var(--service-wash),#0f1c27);box-shadow:inset 2px 0 var(--service-accent)}
#contact-dialog .enquiry-start[data-service]:hover {border-color:var(--service-accent);background:var(--service-soft)}
#contact-dialog .enquiry-start[data-service] :is(.enquiry-choice-number,.enquiry-choice-mark,.enquiry-start-range) {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-intro h2 em,
#contact-dialog[data-service] :is(.enquiry-selection,.enquiry-email-fallback,.enquiry-software-link a,.enquiry-review>button) {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-progress li[aria-current] span:first-child {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-progress li[aria-current]:after {background:var(--service-accent)}
#contact-dialog[data-service] :is(.enquiry-guidance,.enquiry-service-intro,.contact-context,.enquiry-auto-progress) {border-color:var(--service-accent)}
#contact-dialog[data-service] :is(.enquiry-guidance,.enquiry-auto-progress,.enquiry-review) {background:var(--service-wash)}
#contact-dialog[data-service] .enquiry-live-brief {background:var(--cf-frost);border-color:var(--service-ink)}
#contact-dialog[data-service] :is(.enquiry-brief-header .micro,[data-edit-brief],.enquiry-brief-footer>span:last-child) {color:var(--service-ink)}
#contact-dialog[data-service] .enquiry-brief-dot {background:var(--service-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--service-ink) 12%,transparent)}
#contact-dialog[data-service] .enquiry-picks label:hover>span {border-color:var(--service-accent);background:var(--service-wash)}
#contact-dialog[data-service] .enquiry-picks input:checked+span {color:var(--cf-ink);background:var(--service-soft);border-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-picks input:checked+span:before {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-picks input[type=radio]:checked+span:before {background:var(--service-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--service-accent) 12%,transparent)}
#contact-dialog[data-service] .enquiry-extra>summary:after {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step {background:var(--service-soft);border-color:var(--service-line);border-left-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step[data-state=review] {background:var(--service-soft);border-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step-kicker {color:var(--service-accent)}

/* Shared utilities stay blue; ongoing service/support cues use amber. */
#site-menu [data-service] :is(a,button),#site-menu a[data-service],#site-footer a[data-service] {text-decoration-color:var(--service-accent)}
#site-menu .menu-client-area {border-color:var(--service-line)}
#site-menu .menu-client-area .menu-eyebrow,#site-menu .menu-client-links a>span:last-child,#site-menu .menu-secondary a[data-service]>span {color:var(--service-accent)}
#client-dialog[data-service] :is(h2 em,.client-routes a strong>span,.client-help a) {color:var(--service-accent)}

/* Colour never replaces focus, selection marks or labels. Quiet views retain
   complete geometry with the same established reduced-motion behaviour. */
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-service] .project-portal-light {filter:none}
@media(hover:none),(pointer:coarse),(max-width:950px),(prefers-reduced-motion:reduce){[data-service] .project-portal-light{filter:none}}
@media(forced-colors:active){
 [data-service] {--service-accent:LinkText;--service-ink:CanvasText;--service-line:ButtonText;--service-wash:Canvas;--service-soft:Canvas}
 #contact-dialog .enquiry-start[data-service] {border-color:ButtonText}
 #contact-dialog[data-service] .enquiry-picks input:checked+span,.project-filters button[data-service][aria-pressed=true] {border-color:Highlight;color:HighlightText;background:Highlight}
}