/* Service detail experience: photography, responsive reading, and direct interaction. */
body.service-experience-page, body.experience-contact {
  --exp-accent: #c6ed90; --exp-dark: #10271f; --exp-paper: #f5f7f3; --exp-surface: #fff;
  --exp-ink: #172e26; --exp-text: #53665b; --exp-muted: #6a7b71; --exp-line: #d8e0d9; --exp-soft: #eaf0e8;
  --exp-section-space: clamp(32px,3.2vw,48px);
  font-family: var(--font); background: var(--exp-paper); padding-top: var(--site-header-height); min-width: 320px;
}
body.service-tool-page { --exp-accent: #b7d7f6; }
body.service-platform-page { --exp-accent: #d4c8f2; }
body.service-visualization-page { --exp-accent: #ffd2a3; }
html[data-theme="dark"] body:is(.service-experience-page,.experience-contact) {
  --exp-paper: #101d17; --exp-surface: #172920; --exp-ink: #edf4ed; --exp-text: #b8c9bd;
  --exp-muted: #9cad9f; --exp-line: #354b3d; --exp-soft: #1d3025;
}
.service-experience-page .service-main { color: var(--exp-ink); background: var(--exp-paper); overflow: visible; font-size: 16px; line-height: 1.8; }
.service-experience-page .service-main *, .experience-contact main * { box-sizing: border-box; }
.service-experience-page .service-main :where(h1,h2,h3,p,figure,ul,ol,dl,dd) { margin: 0; }
.service-experience-page .service-main :is(a,button) { -webkit-tap-highlight-color: transparent; }
.service-experience-page .service-main a { color: inherit; text-decoration: none; }
.service-experience-page .service-main img { display: block; max-width: 100%; }
.service-experience-page .service-main :is(ul,ol) { padding: 0; list-style: none; }
.service-experience-page .service-main [hidden] { display: none !important; }
.service-experience-page .service-main [id] { scroll-margin-top: 150px; }
.service-experience-page .service-main :is(a,button,[tabindex]):focus-visible { outline: 3px solid #3c9fff; outline-offset: 5px; }
.service-experience-page .service-container { width: min(calc(100% - 64px),1368px); margin-inline: auto; }
.service-experience-page .service-main > section:not(.exp-hero) { padding-block: var(--exp-section-space); }
/* Deliverables and scope share a background: use one compact section break. */
.service-experience-page .service-main > :is(#boundary,#toolBoundary,#platformBoundary,#visualBoundary) { padding-block-start: clamp(8px,1.1vw,16px); }
.service-experience-page .service-main h2 { color: var(--exp-ink); font-size: clamp(30px,3.1vw,48px); line-height: 1.32; letter-spacing: -.04em; font-weight: 650; text-wrap: balance; }
.service-experience-page .service-main h3 { color: var(--exp-ink); font-size: clamp(23px,2.1vw,32px); line-height: 1.4; font-weight: 620; letter-spacing: -.025em; }
.service-experience-page .service-main p { color: var(--exp-text); }
.service-experience-page .service-main em { font-style: normal; }
.service-experience-page :is(.case-section-head,.service-heading) { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.8fr); gap: 64px; align-items: end; margin-bottom: 28px; }
.service-experience-page :is(.case-section-head,.service-heading) h2 { margin-top: 16px; }
.service-experience-page :is(.case-section-head,.service-heading) > p { max-width: 38em; font-size: 16px; line-height: 1.85; }
.service-experience-page :is(.case-section-head,.service-heading) > div > p, .service-experience-page .section-index { color: #427151; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
html[data-theme="dark"] .service-experience-page :is(.case-section-head,.service-heading) > div > p { color: var(--exp-accent); }
html[data-theme="dark"] .service-experience-page :is(.section-index,.case-label) { color: var(--exp-accent); }
html[data-theme="dark"] body:is(.service-experience-page,.experience-contact) .site-header.site-header.site-header .header-icon:hover { background: #294335 !important; color: #edf4ed !important; }

/* Full-bleed photographic chapter cover. */
body.service-experience-page .exp-hero, body.experience-contact .exp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; min-height: min(850px,calc(100svh - 60px)); background: #0e211c; color: #fff; }
.exp-hero-photo { position: absolute; inset: 0; z-index: -3; }
.exp-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.04) translate(var(--depth-x,0px),var(--depth-y,0px)); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
body.service-experience-page .exp-hero::before,.experience-contact .exp-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: 1; background: linear-gradient(90deg,#071a17f5 0%,#071a17cb 37%,#071a172b 80%),linear-gradient(0deg,#071a17c4,transparent 35%); }
.exp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4; background: radial-gradient(660px circle at var(--pointer-x,75%) var(--pointer-y,40%),#c6ed902b,transparent 70%); }
.exp-hero-content { display: flex; flex-direction: column; min-height: inherit; padding-block: 28px 28px; }
.exp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; font-size: 12px; color: #d2e0d3; }
.exp-breadcrumb a { min-height: 36px; display: inline-flex; align-items: center; }
.exp-breadcrumb a:hover { color: #fff; text-decoration: underline !important; text-underline-offset: 4px; }
.exp-hero-center { padding-block: clamp(48px,6vw,88px) 54px; }
.exp-kicker { display: flex; align-items: center; gap: 12px; color: var(--exp-accent) !important; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.exp-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
body:is(.service-experience-page,.experience-contact) .exp-hero h1 { margin: 22px 0 0; max-width: none; color: #fff; font-size: clamp(48px,5.7vw,86px); line-height: 1.18; font-weight: 650; letter-spacing: -.04em; }
.exp-hero h1 > span { display: block; }
.exp-hero h1 em { color: var(--exp-accent); font-style: normal; }
body:is(.service-experience-page,.experience-contact) .exp-hero .exp-lead { max-width: 32em; margin-top: 27px; color: #d3e2d8; font-size: clamp(16px,1.4vw,19px); line-height: 1.85; }
.exp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 34px; }
body:is(.service-experience-page,.experience-contact) .exp-primary, .service-experience-page .service-button { display: inline-flex; justify-content: center; align-items: center; gap: 28px; min-height: 56px; padding: 15px 23px; border: 1px solid transparent; border-radius: 3px; background: var(--exp-accent); color: #132b21; font-size: 16px; font-weight: 650; line-height: 1.5; text-decoration: none; transition: transform .25s,box-shadow .25s,background .25s; }
.exp-primary img, .exp-actions .exp-secondary img { width: 20px; height: 20px; transition: transform .3s; }
.exp-actions .exp-secondary { display: inline-flex; min-height: 48px; align-items: center; gap: 20px; color: #fff; font-size: 15px; font-weight: 550; text-decoration: none; }
.exp-actions .exp-secondary img { filter: invert(1); }
.exp-hero-foot { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: auto; padding-top: 22px; border-top: 1px solid #ffffff45; }
.exp-hero-tags { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #dfebdf; font-size: 13px; }
.exp-hero-code { color: #c0d2c6; font: 12px/1.5 ui-monospace,Consolas,monospace; letter-spacing: .1em; }
.exp-local-nav { position: sticky; top: var(--site-header-height); z-index: 30; background: var(--exp-surface); border-bottom: 1px solid var(--exp-line); transition: top .3s; }
body.service-experience-page:has(.site-header.is-header-hidden) .exp-local-nav { top: 0; }
.exp-local-nav > div { display: flex; align-items: center; gap: 40px; min-height: 70px; }
.exp-local-nav strong { margin-right: auto; font-size: 14px; font-weight: 650; }
.exp-local-nav a { display: inline-flex; align-items: center; min-height: 54px; border-bottom: 2px solid transparent; color: var(--exp-text); font-size: 14px; white-space: nowrap; }
.exp-local-nav a:is(:hover,[aria-current]) { color: var(--exp-ink); border-bottom-color: #588163; }

/* Application stories and photo cards. */
.service-experience-page .service-case-section { background: var(--exp-surface); }
.service-experience-page .case-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--exp-paper); border: 1px solid var(--exp-line); }
.service-experience-page .case-feature > figure { position: relative; min-height: 470px; overflow: hidden; background: #17372a; }
.service-experience-page .case-feature > figure > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.service-experience-page .case-feature-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(28px,4vw,60px); }
.service-experience-page .case-label { font-size: 12px; color: #477354; margin-bottom: 18px; }
.service-experience-page .case-feature-copy > p:not(.case-label) { margin-top: 22px; font-size: 16px; line-height: 1.85; }
.service-experience-page .case-feature-copy dl { display: grid; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--exp-line); }
.service-experience-page .case-feature-copy dl > div { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 18px; font-size: 14px; }
.service-experience-page .case-feature-copy dt { color: var(--exp-muted); }
.service-experience-page .case-slices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 28px; }
.service-experience-page .case-slices article { position: relative; min-height: 320px; overflow: hidden; background: #17372a; border-radius: 3px; }
.service-experience-page .case-slices img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.service-experience-page .case-slices article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#082118f2 0%,#0821187a 46%,transparent 90%); pointer-events: none; }
.service-experience-page .case-slices article > div { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: end; min-height: 320px; padding: 30px; }
.service-experience-page .case-slices span { color: var(--exp-accent); font-size: 12px; margin-bottom: 12px; }
.service-experience-page .case-slices h3 { color: #fff; font-size: 28px; }
.service-experience-page .case-slices p { margin-top: 12px; color: #d3e1d8; font-size: 15px; }
.service-experience-page :is(.data-fit-section,.tool-fit-section,.platform-fit-section) { background: var(--exp-soft); }
.service-experience-page :is(.data-signal-grid,.platform-problem-grid) { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.service-experience-page :is(.data-signal-card,.platform-problem-grid article) { padding: 30px 25px; border-top: 2px solid #799a78; background: var(--exp-surface); transition: transform .3s,box-shadow .3s; }
.service-experience-page :is(.data-signal-card,.platform-problem-grid article) > span { display: block; font: 12px/1.5 ui-monospace,monospace; color: var(--exp-muted); margin-bottom: 32px; }
.service-experience-page :is(.data-signal-card,.platform-problem-grid article) h3 { font-size: 23px; margin-bottom: 16px; }
.service-experience-page :is(.data-signal-card,.platform-problem-grid article) p { font-size: 15px; }
.service-experience-page .tool-fit-layout { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 60px; }
.service-experience-page .tool-fit-intro h2 { margin-top: 18px; }
.service-experience-page .tool-fit-intro > p:last-child { margin-top: 24px; }
.service-experience-page .tool-fit-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.service-experience-page .tool-fit-board > section { padding: 28px; background: var(--exp-surface); border-top: 3px solid #719169; }
.service-experience-page .tool-fit-board > section > span { font-size: 11px; color: var(--exp-muted); letter-spacing: .1em; }
.service-experience-page .tool-fit-board h3 { font-size: 25px; margin-top: 16px; }
.service-experience-page .tool-fit-board ul { display: grid; gap: 14px; margin-top: 24px; color: var(--exp-text); font-size: 14px; }
.service-experience-page .tool-fit-board li { padding-left: 17px; position: relative; }
.service-experience-page .tool-fit-board li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; background: #86a176; }

/* Each task has an interactive working view, not a decorative screenshot. */
.service-experience-page :is(.data-workflow-section,.exp-tool-process,.platform-architecture-section) { background: #10271f; color: #fff; }
.service-experience-page :is(.data-workflow-section,.exp-tool-process,.platform-architecture-section) h2 { color: #fff; }
.service-experience-page :is(.data-workflow-section,.exp-tool-process,.platform-architecture-section) .service-heading p { color: #bbcec1; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #426052; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 15px; padding: 23px; min-width: 0; border: 0; border-right: 1px solid #426052; border-radius: 0; color: #e8f1e8; background: #1b382b; text-align: left; font: inherit; cursor: pointer; transition: color .2s,background .2s; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button:last-child { border-right: 0; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button[aria-selected="true"] { color: #14271f; background: var(--exp-accent); }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button span { font: 12px/1.5 ui-monospace,monospace; opacity: .7; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button b { display: block; font-size: 17px; font-weight: 620; }
.service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button small { display: block; flex-basis: 100%; font-size: 12px; opacity: .7; margin-top: 3px; }
.service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) { padding: 48px; background: #f2f6ed; color: #173529; }
.service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) h3 { color: #173529; font-size: 32px; margin-block: 18px 22px; }
.service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) p { color: #516458; }
.service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) :is(small,.panel-index) { color: #53775c; font-size: 12px; letter-spacing: .08em; }
.service-experience-page .panel-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 32px; }
.service-experience-page .panel-columns b { display: block; color: #264b33; font-size: 14px; margin-bottom: 12px; }
.service-experience-page .panel-columns p { font-size: 16px; line-height: 1.85; }
.service-experience-page .build-process-meta { display: flex; justify-content: space-between; border-bottom: 1px solid #cbdbca; padding-bottom: 18px; font-size: 12px; color: #53775c; }
.service-experience-page .build-process-stage article { min-height: 0; padding-bottom: 24px; }
.service-experience-page .build-process-stage dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-top: 25px; }
.service-experience-page .build-process-stage dt { font-size: 12px; color: #5e785f; margin-bottom: 6px; }
.service-experience-page .build-process-stage dd { font-size: 15px; }
.service-experience-page .build-process-controls { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid #cbdbca; padding-top: 22px; }
.service-experience-page .build-process-controls button { border: 1px solid #aac0ad; border-radius: 2px; background: transparent; min-height: 44px; padding: 8px 18px; color: #264b33; font: inherit; font-size: 14px; cursor: pointer; }
.service-experience-page .build-process-controls button:disabled { opacity: .35; cursor: default; }
.service-experience-page .platform-map { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
.service-experience-page .platform-map-controls { grid-column: 1/-1; }
.service-experience-page .platform-map-canvas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 24px; padding: 42px; position: relative; background: radial-gradient(ellipse at 50% 50%,#35523e,#142e23 75%); }
.service-experience-page .platform-connector,.service-experience-page .platform-branch { display: none; }
.service-experience-page .platform-node { position: relative; padding: 21px; border: 1px solid #52795c; background: #214532; color: #d7e8da; transition: transform .35s,opacity .35s,background .35s,box-shadow .35s; }
.service-experience-page .platform-node small { display: block; font-size: 10px; letter-spacing: .14em; color: #a9bfaf; }
.service-experience-page .platform-node b { display: block; font-size: 20px; font-weight: 550; margin-block: 7px; }
.service-experience-page .platform-node > span { font-size: 12px; }
.service-experience-page .platform-node.is-active { transform: translateY(-4px); border-color: var(--exp-accent); box-shadow: 0 8px 28px #0002; background: #345340; }
.service-experience-page .platform-node.is-active::after { content: ""; position: absolute; top: 14px; right: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--exp-accent); box-shadow: 0 0 15px var(--exp-accent); }
.service-experience-page .platform-node.is-muted { opacity: .48; }
.service-experience-page .platform-map-detail { display: flex; align-items: center; padding: 36px; }
.service-experience-page .platform-map-detail ul { display: grid; gap: 9px; margin-top: 24px; font-size: 14px; color: #3d6149; }
.service-experience-page .platform-map-detail li { padding-left: 15px; border-left: 2px solid #769a76; }

/* Deliverables stay readable beside a large, distinct scene photograph. */
.service-experience-page :is(.delivery-showcase,.platform-delivery-showcase) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) { position: relative; isolation: isolate; min-height: 570px; overflow: hidden; display: flex; align-items: end; background: #17372a; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#071e17ed 0%,#071e1736 70%); }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption { padding: 35px; color: #fff; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption span { color: var(--exp-accent); font-size: 12px; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption strong { display: block; font-size: 29px; line-height: 1.4; margin-top: 14px; }
.service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption p { color: #d6e2d8; font-size: 15px; margin-top: 18px; }
.service-experience-page .delivery-stack { display: flex; flex-direction: column; gap: 24px; }
.service-experience-page .delivery-feature { flex: 1; padding: 36px; background: var(--exp-soft); border-top: 3px solid #809c79; }
.service-experience-page :is(.delivery-stack,.tool-handoff-stack,.platform-delivery-lead,.platform-delivery-flow) h3 { font-size: 25px; margin-block: 18px 14px; }
.service-experience-page :is(.delivery-stack,.tool-handoff-stack,.platform-delivery-lead,.platform-delivery-flow) p { font-size: 15px; }
.service-experience-page :is(.delivery-stack,.tool-handoff-stack,.platform-delivery-lead,.platform-delivery-flow) article > span, .service-experience-page .platform-delivery-lead > span { color: var(--exp-muted); font-size: 11px; letter-spacing: .08em; }
.service-experience-page .delivery-feature small { display: block; margin-top: 25px; color: var(--exp-muted); font-size: 12px; }
.service-experience-page .delivery-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.service-experience-page .delivery-pair article { padding: 27px; border: 1px solid var(--exp-line); background: var(--exp-surface); }
.service-experience-page .tool-handoff-stack { display: flex; flex-direction: column; gap: 16px; }
.service-experience-page .tool-handoff-stack article { flex: 1; padding: 26px 30px; border: 1px solid var(--exp-line); background: var(--exp-surface); }
.service-experience-page .tool-handoff-stack h3 { margin-top: 12px; }
.service-experience-page .tool-handoff-stack aside { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; padding: 20px; background: var(--exp-soft); color: var(--exp-text); }
.service-experience-page .platform-delivery-showcase { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.service-experience-page .platform-delivery-showcase > figure { grid-row: span 2; }
.service-experience-page .platform-delivery-lead { padding: 30px; background: var(--exp-soft); }
.service-experience-page .platform-delivery-lead > div { display: flex; gap: 12px; margin-top: 20px; }
.service-experience-page .platform-delivery-lead b { font-size: 12px; font-weight: 500; padding: 4px 10px; border: 1px solid var(--exp-line); }
.service-experience-page .platform-delivery-flow { display: grid; gap: 1px; background: var(--exp-line); border: 1px solid var(--exp-line); }
.service-experience-page .platform-delivery-flow article { padding: 25px 30px; background: var(--exp-surface); }
.service-experience-page .scope-matrix { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--exp-line); }
.service-experience-page .scope-matrix article { padding: 34px 30px; border-right: 1px solid var(--exp-line); }
.service-experience-page .scope-matrix article:last-child { border-right: 0; }
.service-experience-page .scope-matrix span { font-size: 12px; color: var(--exp-muted); }
.service-experience-page .scope-matrix h3 { font-size: 23px; margin-block: 22px 16px; }
.service-experience-page .scope-matrix p { font-size: 15px; }
.service-experience-page .service-start { background: #10271f; }
.service-experience-page .service-start-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.service-experience-page .service-start h2 { color: #fff; font-size: clamp(38px,4vw,58px); margin-top: 18px; }
.service-experience-page .service-start p { color: #c3d7c7; font-size: 17px; }
.service-experience-page .service-start .service-eyebrow { color: var(--exp-accent); font-size: 12px; letter-spacing: .1em; }
.service-experience-page .service-start .service-button { margin-top: 28px; }
.exp-photo-note { padding: 19px 0; background: var(--exp-surface); border-bottom: 1px solid var(--exp-line); color: var(--exp-muted); font-size: 12px; }
.exp-photo-note a { text-decoration: underline !important; text-underline-offset: 3px; }

/* A real, inspectable miniature chart replaces illustrated UI imagery. */
.exp-chart { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; width: 100%; min-height: 470px; padding: 40px; background: radial-gradient(ellipse at 80% 10%,#314f3c,#112d20 72%); color: #e7f2e6; }
.exp-chart-top { display: flex; justify-content: space-between; gap: 16px; color: #bbd4bf; font-size: 11px; letter-spacing: .1em; }
.exp-chart strong { font-size: 28px; font-weight: 550; }
.exp-chart-bars { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; align-items: end; height: 205px; border-bottom: 1px solid #75957d; padding-inline: 10px; }
.exp-chart-bars button { position: relative; height: var(--bar-height); min-height: 30px; border: 0; background: linear-gradient(0deg,#7db89a,var(--exp-accent)); cursor: pointer; transform-origin: bottom; transition: filter .2s,transform .3s; }
.exp-chart-bars button span { position: absolute; inset: 10px 0 auto; color: #123024; font: 13px/1.5 ui-monospace,monospace; }
.exp-chart-bars button small { position: absolute; inset: auto -10px -30px; color: #bdd3c1; font: 12px/1.5 var(--font); }
.exp-chart-bars button:is(:hover,:focus-visible) { filter: brightness(1.25); transform: scaleX(1.08); }
.exp-chart-readout { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; gap: 16px; font-size: 13px; }
.exp-chart-readout output { color: var(--exp-accent); }
.exp-chart-note { color: #a6bfae !important; font-size: 11px; }
.service-experience-page .visual-gallery { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 24px; }
.service-experience-page .visual-gallery figure { position: relative; min-height: 280px; overflow: hidden; background: #17372a; }
.service-experience-page .visual-gallery-main { grid-row: span 2; }
.service-experience-page .visual-gallery img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .8s; }
.service-experience-page .visual-gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#0b231bed,transparent 95%); }
.service-experience-page .visual-gallery figcaption { position: absolute; z-index: 1; inset: auto 30px 30px; color: #fff; }
.service-experience-page .visual-gallery figcaption span { font-size: 11px; color: var(--exp-accent); }
.service-experience-page .visual-gallery figcaption strong { display: block; font-size: 25px; line-height: 1.45; margin-top: 12px; }
.service-experience-page .visual-gallery figcaption p { font-size: 15px; color: #d2dfd4; margin-top: 16px; }
.service-experience-page .visual-gallery-handoff { grid-column: 1/-1; display: flex; gap: 40px; align-items: center; padding: 32px; background: var(--exp-soft); }
.service-experience-page .visual-gallery-handoff > span { font-size: 11px; color: var(--exp-muted); }
.service-experience-page .visual-gallery-handoff h3 { font-size: 25px; }
.service-experience-page .visual-gallery-handoff p { font-size: 15px; margin-top: 10px; }
.service-experience-page .visual-gallery-handoff-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.service-experience-page .visual-gallery-handoff-tags b { font-size: 12px; white-space: nowrap; padding: 5px 10px; font-weight: 500; border: 1px solid var(--exp-line); }

/* The brief keeps its proven form behavior while joining the visual system. */
body.experience-contact main { overflow: visible; background: var(--exp-paper); }
.experience-contact .exp-hero-content { width: min(calc(100% - 64px),1368px); margin-inline: auto; }
.experience-contact .exp-hero-photo img { object-position: 50% 44%; }
.experience-contact .feedback-template-section { padding-block: var(--exp-section-space); background: var(--exp-surface); }
.experience-contact .feedback-section-head { gap: 46px; margin-bottom: 28px; }
.experience-contact .feedback-section-head h2 { color: var(--exp-ink); font-size: clamp(30px,3.2vw,48px); line-height: 1.35; }
.experience-contact .feedback-section-head > div > p { color: #487554; font-size: 12px; letter-spacing: .1em; }
.experience-contact .feedback-section-head > p { color: var(--exp-text); font-size: 16px; line-height: 1.85; }
.experience-contact .feedback-template-grid { gap: 20px; border: 0; }
.experience-contact .feedback-template-grid > button { position: relative; min-height: 235px; border: 1px solid var(--exp-line); border-radius: 3px; padding: 28px; background: var(--exp-paper); transition: transform .3s,background .3s,box-shadow .3s; }
.experience-contact .feedback-template-grid > button > span { font-size: 11px; color: #58765b; }
.experience-contact .feedback-template-grid > button strong { color: var(--exp-ink); font-size: 23px; line-height: 1.4; }
.experience-contact .feedback-template-grid > button p { color: var(--exp-text); font-size: 15px; line-height: 1.8; }
.experience-contact .feedback-template-grid > button i { color: #386546; font-size: 14px; }
html[data-theme="dark"] .experience-contact .feedback-section-head > div > p,
html[data-theme="dark"] .experience-contact .feedback-template-grid > button > :is(span,i) { color: var(--exp-accent); }
.experience-contact .feedback-workspace { padding-block: var(--exp-section-space); background: var(--exp-paper); }
.experience-contact .feedback-form-guide { background: #163124; }
.experience-contact .feedback-form-guide figure { height: 250px; }
.experience-contact .feedback-form-guide a strong { font-size: 15px; }
.experience-contact .feedback-form-guide a small { white-space: normal; font-size: 12px; }
.experience-contact .feedback-form-guide-body > p:first-child,.experience-contact .feedback-form-guide a > span { color: #c6ed90; }
.experience-contact .feedback-guide-note { font-size: 12px; }
.experience-contact .feedback-step-card { box-shadow: none; border-color: var(--exp-line); background: var(--exp-surface); }
.experience-contact .feedback-step-card-head strong { color: var(--exp-ink); font-size: 23px; }
.experience-contact .feedback-step-card-head small { color: var(--exp-text); font-size: 13px; }
.experience-contact .feedback-fields label { color: var(--exp-ink); font-size: 15px; }
.experience-contact .feedback-fields label > small { color: var(--exp-muted); font-size: 12px; }
.experience-contact .feedback-fields :is(input,textarea,select) { color: var(--exp-ink); background: var(--exp-paper); border-color: var(--exp-line); font-size: 16px; border-radius: 3px; }
.experience-contact .feedback-fields :is(input,textarea,select):focus { border-color: #568762; box-shadow: 0 0 0 3px #72a17526; }
.experience-contact .feedback-submit { background: #c6ed90; color: #10271f; border-color: #c6ed90; font-size: 15px; }
.experience-contact .feedback-consent { font-size: 13px !important; }
.experience-contact .feedback-submit-context strong { font-size: 15px; }
.experience-contact .feedback-submit-context small,.experience-contact .feedback-submit-meter small { font-size: 12px; }

@media (hover:hover) and (pointer:fine) {
  :is(.service-experience-page,.experience-contact) :is(.exp-primary,.service-button):hover { transform: translateY(-4px); box-shadow: 0 16px 34px #061e1738; }
  .exp-primary:hover img,.exp-secondary:hover img { transform: translate(4px,-4px); }
  .service-experience-page :is(.case-feature,.case-slices article,.delivery-visual,.visual-gallery figure):hover img { transform: scale(1.075); }
  .service-experience-page :is(.data-signal-card,.platform-problem-grid article):hover { transform: translateY(-7px); box-shadow: 0 18px 40px #1535251b; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button:hover { background: var(--exp-accent); color: #14271f; }
  .experience-contact .feedback-template-grid > button:hover { background: var(--exp-soft); transform: translateY(-7px); box-shadow: 0 18px 38px #1638281c; }
}
@media (prefers-reduced-motion:no-preference) {
  .exp-hero-center > * { animation: exp-rise .85s cubic-bezier(.2,.7,.2,1) both; }
  .exp-hero-center > :nth-child(2) { animation-delay: .08s; }
  .exp-hero-center > :nth-child(3) { animation-delay: .16s; }
  .exp-hero-center > :nth-child(4) { animation-delay: .24s; }
  .service-experience-page [role="tabpanel"]:not([hidden]) { animation: exp-rise .38s cubic-bezier(.2,.7,.2,1); }
  .exp-chart.is-in-view .exp-chart-bars button { animation: exp-grow .9s cubic-bezier(.2,.7,.2,1) both; }
  .exp-chart.is-in-view .exp-chart-bars button:nth-child(2) { animation-delay: .09s; }
  .exp-chart.is-in-view .exp-chart-bars button:nth-child(3) { animation-delay: .18s; }
  .exp-chart.is-in-view .exp-chart-bars button:nth-child(4) { animation-delay: .27s; }
  .exp-chart.is-in-view .exp-chart-bars button:nth-child(5) { animation-delay: .36s; }
}
@keyframes exp-rise { from { opacity: 0; transform: translateY(23px); } to { opacity: 1; transform: none; } }
@keyframes exp-grow { from { transform: scaleY(.05); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
@media (max-width:1199px) {
  .service-experience-page :is(.case-section-head,.service-heading) { gap: 38px; }
  .service-experience-page .case-feature-copy { padding: 32px; }
  .service-experience-page :is(.data-signal-grid,.platform-problem-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-experience-page .tool-fit-layout { grid-template-columns: 1fr; gap: 34px; }
  .service-experience-page .platform-map-canvas { padding: 26px; gap: 16px; }
  .service-experience-page .platform-map-detail { padding: 28px; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button { padding: 20px 17px; }
  .service-experience-page .delivery-pair { grid-template-columns: 1fr; }
  .experience-contact .feedback-template-grid > button strong { font-size: 21px; }
}
@media (max-width:800px) {
  body:is(.service-experience-page,.experience-contact) .exp-hero { min-height: 730px; }
  body.service-experience-page .exp-hero::before,.experience-contact .exp-hero::before { background: linear-gradient(90deg,#071a17e6,#071a1760),linear-gradient(0deg,#071a17c4,transparent 70%); }
  .exp-local-nav > div { gap: 20px; min-height: 60px; }
  .exp-local-nav strong { display: none; }
  .exp-local-nav a { flex: 1; justify-content: center; font-size: 13px; }
  .service-experience-page :is(.case-section-head,.service-heading) { grid-template-columns: 1fr; gap: 22px; }
  .service-experience-page .case-feature { grid-template-columns: 1fr; }
  .service-experience-page .case-feature > figure { min-height: 0; aspect-ratio: 1.6; }
  .service-experience-page .case-feature-copy { padding: 34px; }
  .service-experience-page .case-slices { gap: 20px; }
  .service-experience-page .case-slices article,.service-experience-page .case-slices article > div { min-height: 300px; }
  .service-experience-page .case-slices article > div { padding: 24px; }
  .service-experience-page .case-slices h3 { font-size: 24px; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button:nth-child(-n+2) { border-bottom: 1px solid #426052; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button:nth-child(even) { border-right: 0; }
  .service-experience-page :is(.data-pipeline-panels,.build-process-stage) { padding: 32px; }
  .service-experience-page .panel-columns { gap: 22px; }
  .service-experience-page .platform-map { grid-template-columns: 1fr; }
  .service-experience-page .platform-map-canvas { padding: 32px; }
  .service-experience-page .platform-map-detail { padding: 34px; }
  .service-experience-page :is(.delivery-showcase,.platform-delivery-showcase) { grid-template-columns: 1fr; }
  .service-experience-page .platform-delivery-showcase > figure { grid-row: auto; }
  .service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) { min-height: 430px; }
  .service-experience-page .delivery-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-experience-page .scope-matrix { grid-template-columns: 1fr; }
  .service-experience-page .scope-matrix article { border-right: 0; border-bottom: 1px solid var(--exp-line); }
  .service-experience-page .scope-matrix article:last-child { border-bottom: 0; }
  .service-experience-page .service-start-layout { grid-template-columns: 1fr; gap: 28px; }
  .service-experience-page .visual-gallery { grid-template-columns: 1fr; }
  .service-experience-page .visual-gallery-main { grid-row: auto; min-height: 410px; }
  .service-experience-page .visual-gallery-handoff { flex-wrap: wrap; gap: 20px; }
  .service-experience-page .visual-gallery-handoff-tags { margin-left: 0; }
  .experience-contact .feedback-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .experience-contact .feedback-form-layout { grid-template-columns: 1fr; }
  .experience-contact .feedback-form-guide { position: static; }
  .experience-contact .feedback-form-guide figure { height: 220px; }
}
@media (max-width:600px) {
  body:is(.service-experience-page,.experience-contact) .exp-hero { min-height: min(760px,calc(100svh - 64px)); }
  .exp-hero-content { padding-block: 18px 24px; }
  .exp-hero-center { padding-block: 52px 58px; }
  body:is(.service-experience-page,.experience-contact) .exp-hero h1 { font-size: clamp(34px,9.6vw,56px); line-height: 1.24; margin-top: 22px; }
  .exp-kicker { font-size: 10px; letter-spacing: .075em; gap: 8px; }
  .exp-kicker::before { width: 17px; }
  body:is(.service-experience-page,.experience-contact) .exp-hero .exp-lead { font-size: 16px; line-height: 1.85; }
  .exp-actions { gap: 12px 18px; margin-top: 26px; }
  body:is(.service-experience-page,.experience-contact) .exp-primary,.service-experience-page .service-button { font-size: 15px; min-height: 52px; padding: 13px 18px; gap: 20px; }
  .exp-actions .exp-secondary { font-size: 14px; gap: 10px; }
  .exp-hero-code { display: none; }
  .exp-hero-tags { gap: 9px 19px; font-size: 12px; }
  .exp-local-nav > div { gap: 8px; min-height: 56px; }
  .service-experience-page .service-main h2 { font-size: 30px; }
  .service-experience-page .service-main h3 { font-size: 24px; }
  .service-experience-page :is(.case-section-head,.service-heading) { margin-bottom: 24px; }
  .service-experience-page :is(.case-section-head,.service-heading) > p { font-size: 15px; }
  .service-experience-page .case-feature-copy { padding: 27px 22px; }
  .service-experience-page .case-feature-copy > p:not(.case-label) { font-size: 15px; }
  .service-experience-page .case-feature-copy dl > div { font-size: 13px; gap: 12px; }
  .service-experience-page .case-slices { grid-template-columns: 1fr; }
  .service-experience-page .case-slices article,.service-experience-page .case-slices article > div { min-height: 285px; }
  .service-experience-page :is(.data-signal-grid,.platform-problem-grid) { grid-template-columns: 1fr; gap: 16px; }
  .service-experience-page :is(.data-signal-card,.platform-problem-grid article) { padding: 24px; }
  .service-experience-page :is(.data-signal-card,.platform-problem-grid article) > span { margin-bottom: 20px; }
  .service-experience-page .tool-fit-board { grid-template-columns: 1fr; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button { padding: 16px; gap: 7px 10px; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button b { font-size: 15px; }
  .service-experience-page :is(.data-pipeline-steps,.build-step-rail,.platform-map-controls) button small { font-size: 11px; }
  .service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) { padding: 28px 22px; }
  .service-experience-page :is(.data-pipeline-panels,.build-process-stage,.platform-map-detail) h3 { font-size: 26px; }
  .service-experience-page .panel-columns { grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
  .service-experience-page .panel-columns p { font-size: 15px; }
  .service-experience-page .build-process-stage dl { grid-template-columns: 1fr; gap: 16px; }
  .service-experience-page .platform-map-canvas { padding: 22px 16px; gap: 14px; }
  .service-experience-page .platform-node { padding: 18px 14px; }
  .service-experience-page .platform-node b { font-size: 18px; }
  .service-experience-page .platform-node > span { font-size: 11px; }
  .service-experience-page .platform-node small { font-size: 9px; }
  .service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) { min-height: 430px; }
  .service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption { padding: 25px; }
  .service-experience-page :is(.delivery-visual,.platform-delivery-showcase > figure) figcaption strong { font-size: 27px; }
  .service-experience-page .delivery-pair { grid-template-columns: 1fr; }
  .service-experience-page .delivery-feature { padding: 27px; }
  .service-experience-page .scope-matrix article { padding: 28px 4px; }
  .service-experience-page .service-start h2 { font-size: 38px; }
  .service-experience-page .service-start p { font-size: 16px; }
  .exp-chart { min-height: 390px; padding: 26px 22px; gap: 25px; }
  .exp-chart strong { font-size: 23px; }
  .exp-chart-bars { gap: 13px; height: 155px; }
  .exp-chart-bars button span { font-size: 11px; }
  .exp-chart-top { font-size: 9px; }
  .experience-contact .exp-hero-content { width: calc(100% - 28px); }
  .experience-contact .feedback-template-grid { grid-template-columns: 1fr; }
  .experience-contact .feedback-template-grid > button { padding: 25px; min-height: 220px; }
  .experience-contact .feedback-section-head { gap: 20px; }
  .experience-contact .feedback-step-card { padding: 26px 20px; }
  .experience-contact .feedback-step-card-head { grid-template-columns: 33px minmax(0,1fr); gap: 12px; }
  .experience-contact .feedback-step-card-head > span { width: 30px; height: 30px; }
  .experience-contact .feedback-step-card-head strong { font-size: 20px; }
}
@media (max-width:380px) {
  html body:is(.service-experience-page,.experience-contact) .site-header.site-header.site-header .brand-copy strong { font-size: 14px !important; white-space: nowrap; letter-spacing: 0 !important; }
  .exp-hero-center { padding-top: 36px; }
}
@media (max-width:960px) { body:is(.service-experience-page,.experience-contact) .main-nav { background: var(--exp-surface); } }
@media (prefers-reduced-motion:reduce) {
  :is(.service-experience-page,.experience-contact) main *, :is(.service-experience-page,.experience-contact) main *::before, :is(.service-experience-page,.experience-contact) main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .exp-hero-photo img,.platform-node,.exp-chart-bars button { transform: none !important; }
}