/* Visual storytelling: campaign diagrams, category photography, and client data. */
.services-band { color: var(--ink); }
.services-band .section-heading h2 { color: var(--ink); }
.services-band .eyebrow { color: #007983; }
.service-tabs button { border-bottom-color: #bddde6; }
.service-tabs button[aria-selected=true] { border-radius: 8px; }
.hero-visual.campaign-board { background: linear-gradient(150deg, #d7f5ff, #e9fff0); color: var(--ink); min-height: 580px; padding: 29px; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; border: 1px solid #c8e6e9; box-shadow: 0 20px 70px #009eb21a; }
.campaign-board:after { display: none; }
.campaign-board .hero-light { mix-blend-mode: normal; background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), #ffffff85, transparent 50%); }
.campaign-heading, .journey-controls, .journey-detail, .journey-map { position: relative; z-index: 2; }
.campaign-heading .eyebrow { color: #3b6576; }
.campaign-heading h2 { font-size: 32px; line-height: 1.2; margin-top: 12px; letter-spacing: -.04em; }
.journey-map { width: 100%; max-height: 290px; overflow: visible; transform: translate3d(var(--caption-x,0px),var(--caption-y,0px),0); transition: transform .6s ease; }
.journey-map .node { fill: #fff; stroke: #b9dfe6; stroke-width: 1.2; transition: fill .4s,stroke .4s; }
.journey-map .node.active { fill: #bcf3e6; stroke: #009c9c; }
.journey-map .hub { fill: #fff; stroke: #009a9c; stroke-width: 1.5; }
.journey-map text { font: 600 15px 'DM Sans',sans-serif; fill: #294b5d; }
.journey-map .node-caption { font-size: 13px; font-weight: 400; fill: #566f7b; }
.journey-map .hub-text { font: 600 20px Manrope,sans-serif; letter-spacing: -.04em; fill: #153b4c; }
.journey-map .connection { stroke: #92cbd5; stroke-width: 1.5; fill: none; }
.journey-map .signal { stroke: #039da3; stroke-width: 2.5; stroke-dasharray: 7 10; fill: none; }
.journey-controls { display: flex; gap: 7px; flex-wrap: wrap; }
.journey-controls button { flex: 1; border: 1px solid #b6d8df; border-radius: 50px; background: #ffffff70; color: #365765; padding: 10px 9px; font-size: 14px; min-height: 44px; white-space: nowrap; }
.journey-controls button[aria-pressed=true] { color: #fff; background: #007e88; border-color: #007e88; }
.journey-detail { padding: 15px 17px; background: #ffffffd6; border: 1px solid #c6e2e9; border-radius: 9px; }
.journey-detail h3 { font-size: 19px; letter-spacing: -.025em; }
.journey-detail p { font-size: 14px; color: #506a79; margin-top: 5px; line-height: 1.5; }
.result-card { padding-top: 0; }
.case-photo { position: relative; margin: 0 -38px 30px; overflow: hidden; border-radius: 11px 11px 0 0; height: 235px; }
.case-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.case-photo:after { content: ''; position: absolute; inset: 0; border: 1px solid #ffffff30; border-radius: inherit; pointer-events: none; }
.case-photo span { position: absolute; left: 22px; bottom: 18px; font-size: 12px; color: #25495c; padding: 6px 10px; background: #ffffffd9; border-radius: 4px; }
.result-card:hover .case-photo img { transform: scale(1.045); }
.result-card .huge { margin-top: 24px; font-size: clamp(62px,6vw,92px); }
.result-card h3 { margin-top: 28px; }
.case-comparison { margin-top: 24px; padding-top: 20px; border-top: 1px solid #54859b35; display: grid; gap: 12px; }
.comparison-row { display: grid; gap: 6px; }
.comparison-row .bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: #456b7d; }
.comparison-row .bar-label strong { color: #1d485b; font-size: 14px; }
.bar-track { width: 100%; background: #ffffff9c; border-radius: 10px; height: 8px; overflow: hidden; }
.bar-value { display: block; height: 100%; width: var(--bar-width); background: #008b99; border-radius: inherit; transform-origin: left; }
.comparison-row:last-child .bar-value { background: #15627c; }
.case-comparison + button { margin-top: 24px; }
.service-panel { padding-bottom: 180px; }
.funnel.service-path { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; bottom: 28px; }
.funnel.service-path > div, .funnel.service-path > div:nth-child(2), .funnel.service-path > div:nth-child(3) { width: 100%; border: 0; background: transparent; line-height: 1.5; letter-spacing: .04em; font-size: 11px; }
.service-path .path-icon { width: 55px; height: 55px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: #e8f1f6; border: 1px solid #cfdee6; color: #688999; }
.service-path .active .path-icon { background: #a8e8e1; border-color: #37bcb6; color: #006e7d; }
.path-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.process-number { font-size: 62px; }
.process-visual { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.step-map { width: min(230px,65%); height: auto; overflow: visible; }
.step-map line { stroke: #c5e4ed; stroke-width: 2; }
.step-map circle { fill: #eff8fb; stroke: #c5e4ed; stroke-width: 1; transition: fill .3s; }
.step-map circle.complete { fill: #aeece2; stroke: #75cfc9; }
.step-map circle.selected { fill: #007f8b; stroke: #007f8b; }
.step-map text { fill: #467086; font: 500 11px 'DM Sans'; text-anchor: middle; }
.step-map text.selected { fill: #fff; }
.about-system { margin-top: 32px; max-width: 430px; }
.about-system svg { width: 100%; height: auto; display: block; }
.about-system .system-ring { fill: none; stroke: #c4e9ef; stroke-width: 1.5; }
.about-system .system-core { fill: #eafaff; stroke: #afdae6; stroke-width: 1; }
.about-system .system-label { fill: #244b5f; font: 500 15px 'DM Sans'; text-anchor: middle; }
.about-system .system-caption { fill: #55768b; font: 400 12px 'DM Sans'; text-anchor: middle; }
.about-system .system-dot { fill: #007f8b; }
.quote-section { position: relative; overflow: hidden; }
.quote-section:before { content: '“'; position: absolute; top: -105px; right: 2%; font: 500 540px Georgia,serif; color: #ffffff30; line-height: 1; pointer-events: none; }
.quote-section .section { position: relative; }
.quote-section blockquote { position: relative; z-index: 1; }
.contact-copy { position: relative; }
.contact-symbol { margin-top: 32px; display: flex; align-items: center; gap: 15px; width: fit-content; }
.contact-symbol svg { width: 50px; height: 50px; color: #008493; fill: none; stroke: currentColor; stroke-width: 1.4; }
.contact-symbol span { font-size: 14px; color: #4e7181; }
.experience-motion .journey-map .signal { animation: signal-flow 8s linear 2; }
.experience-motion .result-card:not(.visible) .bar-value { transform: scaleX(0); }
.experience-motion .result-card.visible .bar-value { transition: transform 1.4s .35s cubic-bezier(.16,1,.3,1); transform: scaleX(1); }
@keyframes signal-flow { to { stroke-dashoffset: -136; } }
@media(max-width:1000px) {
  .hero-visual.campaign-board { padding: 24px; min-height: 570px; }
  .journey-controls button { font-size: 13px; padding-inline: 8px; }
  .case-photo { height: 200px; }
}
@media(max-width:700px) {
  .hero-visual.campaign-board { min-height: 535px; padding: 24px 20px; }
  .campaign-heading h2 { font-size: 29px; }
  .journey-map { max-height: 260px; }
  .journey-controls button { font-size: 14px; flex: 1 1 130px; }
  .journey-map text:not(.hub-text):not(.node-caption) { font-size: 18px; transform: translate(-7px,9px); }
  .journey-map .node-caption { display: none; }
  .case-photo { margin: 0 -30px 26px; height: 220px; }
  .result-card .huge { font-size: 68px; }
  .result-card { padding-top: 0; }
  .service-panel { padding-bottom: 175px; }
  .service-path .path-icon { width: 47px; height: 47px; }
  .funnel.service-path { left: 22px; right: 22px; }
  .about-system { max-width: 360px; margin-inline: auto; }
  .process-visual { gap: 14px; }
  .quote-section:before { font-size: 340px; top: -65px; right: -25px; }
}
@media(max-width:380px) { .case-photo { margin-inline: -24px; } }
@media(prefers-reduced-motion:reduce) {
  .journey-map, .result-card:hover .case-photo img { transform: none; }
  .bar-value { transform: none !important; }
}