/* A focused accordion paired with a diagram for each stage. */
.work-process{padding:76px 64px 68px;background:#e7ecef;color:#152e42}
/* Approved wireframe torus fills the quiet corner without taking layout space. */
#approach::after{content:"";position:absolute;top:-12px;right:clamp(-132px,-9.6vw,-90px);width:clamp(360px,38.4vw,528px);aspect-ratio:500/280;background:url('/site/assets/approach-wireframe-torus.svg') center/contain no-repeat;opacity:var(--wireframe-opacity,.65);pointer-events:none;z-index:-1}
@media(max-width:700px){#approach::after{width:276px;right:-138px;top:-28px}}
.process-heading{position:relative;margin-bottom:38px}
.process-heading>span{font:10px 'JetBrains Mono',monospace;letter-spacing:2px;color:#527285}
.process-heading h2{font-size:clamp(36px,4.3vw,58px);font-weight:400;letter-spacing:-2px;line-height:1.08;margin:20px 0 0}
.process-heading h2 em{font-style:normal;color:#526e80}
.process-heading>p{position:absolute;right:0;bottom:4px;font-size:14px;color:#526e80;margin:0}
.process-split{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;box-shadow:none}
.process-steps{padding:28px 36px;background:radial-gradient(ellipse at 10% 0%,#ffffff0d,transparent 65%),linear-gradient(145deg,#174a85,#10376a 48%,#08234b);color:#f5f9fd;min-width:0}
.process-step{border-bottom:1px solid #b3d0e52b}
.process-step:last-child{border-bottom:0}
.process-step h3{margin:0}
.process-step button{display:flex;align-items:center;gap:22px;width:100%;border:0;background:none;color:#d5e4f0;text-align:left;padding:24px 0;font:400 23px 'Space Grotesk',sans-serif;letter-spacing:-.5px;cursor:pointer;transition:color .2s}
.process-step button:hover,.process-step button[aria-expanded=true]{color:#fff}
.process-number{font:11px 'JetBrains Mono',monospace;letter-spacing:0;color:#8cb5cf;flex-shrink:0}
.process-step.is-active .process-number{color:#83e4f4}
.process-toggle{margin-left:auto;font-size:19px;color:#8cb5cf;font-weight:400}
.process-copy{padding:0 0 28px 38px;animation:process-reveal .25s ease-out}
.process-copy[hidden],.process-figure[hidden]{display:none}
.process-copy h4{font-size:17px;font-weight:400;letter-spacing:-.3px;line-height:1.4;margin:0 0 10px;color:#fff}
.process-copy p{font-size:13px;line-height:1.75;color:#bbd0e2;margin:0 0 23px;max-width:350px}
.process-copy a{display:inline-flex;align-items:center;gap:22px;background:#f1f8fc;color:#123d65;border-radius:8px;padding:11px 18px;font-size:12px;font-weight:500;transition:transform .2s,background .2s}
.process-copy a:hover{transform:translateY(-2px);background:#fff}
.process-step button:focus-visible{outline:2px solid #73def3;outline-offset:3px;border-radius:4px}
.process-visuals{background:radial-gradient(ellipse at 50% 40%,#fff,transparent 70%),#eff4f7;display:grid;min-width:0}
.process-figure{margin:0;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:32px 30px 30px;animation:process-reveal .3s ease-out}
.process-visual-label{display:flex;justify-content:space-between;font:8px 'JetBrains Mono',monospace;letter-spacing:1.2px;color:#6a8698}
.process-figure img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;margin:auto 0}
.process-figure figcaption{border-top:1px solid #d5e1e9;padding-top:19px;font-size:13px;line-height:1.5;color:#24465e}
.process-figure figcaption>span{display:block;margin-bottom:7px;font:8px 'JetBrains Mono',monospace;letter-spacing:1.5px;color:#77909f}
@keyframes process-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.work-process{padding:60px 32px}.process-steps{padding:22px 27px}.process-step button{font-size:21px;gap:18px}.process-copy{padding-left:34px}.process-figure{padding:26px 22px}}
@media(max-width:700px){.work-process{padding:48px 22px}.process-heading>p{position:static;margin-top:18px;font-size:13px}.process-heading h2{font-size:38px;letter-spacing:-1.5px}.process-split{grid-template-columns:1fr;border-radius:20px}.process-steps{padding:18px 26px}.process-step button{padding:21px 0}.process-copy p{max-width:none}.process-figure{min-height:370px;padding:26px}.process-figure img{max-height:320px}.process-visual-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.process-copy,.process-figure{animation:none}.process-step button,.process-copy a{transition:none}.process-copy a:hover{transform:none}}

/* Round the light process section at both its top and bottom transitions. */
.work-process{border-radius:0;overflow:hidden}


/* Give the diagrams more presence and contrast against the panel. */
.process-visuals{background:radial-gradient(ellipse at 50% 38%,#e8f1f7 0%,#dce8f1 55%,#d1e0eb 100%)}
.process-figure img{transform:scale(1.16);transform-origin:center;max-height:430px}
.process-figure{overflow:hidden}
.process-visual-label,.process-figure figcaption{position:relative;z-index:1}
.process-figure figcaption{border-top-color:#b7ccd9}
@media(max-width:700px){.process-figure img{max-height:350px;transform:scale(1.1)}}

/* Invert the split: light process steps, navy diagram stage. */
.process-steps{background:radial-gradient(ellipse at 50% 38%,#e8f1f7 0%,#dce8f1 55%,#d1e0eb 100%);color:#152e42}
.process-step{border-bottom-color:#b7ccd9}
.process-step button{color:#456379}
.process-step button:hover,.process-step button[aria-expanded=true]{color:#122f49}
.process-number,.process-toggle{color:#608398}
.process-step.is-active .process-number{color:#087e9e}
.process-copy h4{color:#183c58}
.process-copy p{color:#48677d}
.process-step button:focus-visible{outline-color:#087e9e}
.process-visuals{background:radial-gradient(ellipse at 10% 0%,#ffffff0d,transparent 65%),linear-gradient(145deg,#174a85,#10376a 48%,#08234b)}
.process-visual-label{color:#a8c9de}
.process-figure figcaption{color:#e3eef7;border-top-color:#b3d0e52b}
.process-figure figcaption>span{color:#a8c9de}


/* Match the service cards: soft surface gloss and raised, rim-free depth. */
.process-split{position:relative;isolation:isolate;border:0;box-shadow:none;transition:transform .22s ease}
.process-split::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 15% 0%,#ffffff14 0%,#ffffff06 32%,transparent 62%)}
.process-split::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 25% 18%,#ffffff16 0%,#ffffff08 25%,transparent 65%);mask-image:radial-gradient(ellipse at center,#000 35%,transparent 72%);opacity:0;transition:opacity .25s ease}

@media(prefers-reduced-motion:reduce){.process-split,.process-split::after{transition:none}.process-split:hover{transform:none}}

/* Keep the illustrated map fully framed in the discovery stage. */
.process-figure[data-visual="discover"] img{height:390px;max-height:390px;width:100%;object-fit:contain;transform:none}
@media(max-width:700px){.process-figure[data-visual="discover"] img{height:300px;max-height:300px}}

/* Draw the agreement checks in sequence; leave the illustration still. */
.nda-animated-art{display:block;width:100%;height:390px;max-height:430px;margin:auto 0;overflow:visible}
.nda-draw-check{stroke-dasharray:1;stroke-dashoffset:1;animation:nda-check-draw 4.8s ease-in-out infinite}
.nda-draw-check:nth-child(2){animation-delay:.4s}
.nda-draw-check:nth-child(3){animation-delay:.8s}
.nda-shield-check{animation-delay:1.2s}
@keyframes nda-check-draw{0%,8%{stroke-dashoffset:1;opacity:1}24%,78%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:700px){.nda-animated-art{height:300px}}
@media(prefers-reduced-motion:reduce){.nda-draw-check{animation:none;stroke-dashoffset:0;opacity:1}}

/* The discovery route builds toward its destination, then repeats. */
.discover-animated-art{display:block;width:100%;height:390px;max-height:430px;margin:auto 0}
.discover-route-reveal{stroke-dasharray:1;stroke-dashoffset:1;animation:discovery-route-draw 5s ease-in-out infinite}
.discover-route{animation:discovery-route-fade 5s linear infinite}
@keyframes discovery-route-draw{0%,8%{stroke-dashoffset:1}72%,100%{stroke-dashoffset:0}}
@keyframes discovery-route-fade{0%,88%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.discover-animated-art{height:300px}}
@media(prefers-reduced-motion:reduce){.discover-route-reveal{animation:none;stroke-dashoffset:0}.discover-route{animation:none;opacity:1}}

/* Quiet milestone highlights keep the paper roadmap readable and still. */
.plan-animated-art{display:block;width:100%;height:390px;max-height:430px;margin:auto 0}
.plan-milestone-dot{fill:#43c8e8;opacity:0;animation:plan-milestone-light 6s ease-in-out infinite;animation-delay:var(--milestone-delay)}
.plan-milestone-halo{fill:none;stroke:#28b4d8;stroke-width:3;opacity:0;animation:plan-milestone-ring 6s ease-out infinite;animation-delay:var(--milestone-delay);transform-box:fill-box;transform-origin:center}
@keyframes plan-milestone-light{0%,5%,40%,100%{opacity:0}15%,25%{opacity:.9}}
@keyframes plan-milestone-ring{0%,5%{opacity:0;transform:scale(.85)}15%{opacity:.45}38%,100%{opacity:0;transform:scale(1.5)}}
@media(max-width:700px){.plan-animated-art{height:300px}}
@media(prefers-reduced-motion:reduce){.plan-milestone-dot,.plan-milestone-halo{animation:none;opacity:0}}

/* Keep the flat delivery graphic aligned with the other process illustrations. */
.process-figure[data-visual="deliver"] img{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure[data-visual="deliver"] img{height:300px}}

.process-figure .plan-journey-art{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure .plan-journey-art{height:300px}}

.process-figure .nda-dot-art{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure .nda-dot-art{height:300px}}

.process-figure .nda-blueprint-art{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure .nda-blueprint-art{height:300px}}

.process-figure[data-visual="discover"] .discover-direction-art{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure[data-visual="discover"] .discover-direction-art{height:300px}}

.process-figure .plan-board-art{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure .plan-board-art{height:300px}}

/* Reduce the full Kickoff artwork by 20% while preserving its centered layout. */
.process-figure[data-visual="kickoff"] img{transform:scale(.928)}
@media(max-width:700px){.process-figure[data-visual="kickoff"] img{transform:scale(.88)}}

/* Step badges echo the fine outlines used in the process diagrams. */
.work-process .process-step button{gap:18px}
.work-process .process-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border:1px solid #7093aa66;border-radius:9px;background:#f3f8fb66;color:#526f84;font:500 12px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.4px;transition:background .2s,color .2s,border-color .2s}
.work-process .process-step.is-active .process-number{background:#103362;color:#8ae1f1;border-color:#103362;box-shadow:inset 0 1px 0 #ffffff12}
.work-process .process-step:not(.is-active) button:hover .process-number{border-color:#087e9e;color:#087e9e;background:#f1f8fb}
.work-process .process-copy{padding-left:52px}
@media(max-width:700px){.work-process .process-step button{gap:14px}.work-process .process-number{width:30px;height:30px;flex-basis:30px;font-size:11px;border-radius:8px}.work-process .process-copy{padding-left:44px}}
@media(prefers-reduced-motion:reduce){.work-process .process-number{transition:none}}

/* Reduce both joined approach panels proportionally, keeping them centered. */
@media(min-width:701px){.work-process .process-split{width:82%;zoom:.82;margin-inline:auto}}

/* Enlarge each process illustration without resizing either panel. */
.work-process .process-figure img{scale:1.44;transform-origin:center}

/* Give the NDA illustration an additional ten percent of visual size. */
.work-process .process-figure[data-visual="nda"] img{scale:1.584}

/* Supporting copy sits directly beneath the approach heading. */
.process-heading>p.process-intro{position:static;max-width:52ch;width:50%;margin:14px 0 0;font-size:16px;line-height:1.5;color:#526e80}
@media(max-width:700px){.process-heading>p.process-intro{width:100%}}

/* Preserve the approach card layout. */
.approach-surround{position:relative}
@media(max-width:700px){
 .work-process .approach-surround>.process-split{width:88%;margin-inline:auto}
}

/* Align the introduction with the centered approach card. */
.work-process .process-heading{margin-left:9%}
.work-process .process-heading>p.process-intro{width:54.945%}
@media(max-width:700px){.work-process .process-heading{margin-left:6%}.work-process .process-heading>p.process-intro{width:93.617%}}

/* Each step has one paragraph in the former subheading text style. */
.work-process .process-copy p{font-size:17px;font-weight:400;letter-spacing:-.3px;line-height:1.4;color:#183c58}

/* Keep support artwork framed like the other process illustrations. */
.process-figure[data-visual="support"] img{height:390px;max-height:430px;transform:none}
@media(max-width:700px){.process-figure[data-visual="support"] img{height:300px}}

/* Keep a single description within each expanded step. */
.work-process .process-copy>p{margin-bottom:0}

/* Tighten the accordion vertically while keeping its text and width unchanged. */
.work-process .process-step button{padding-block:18px}
.work-process .process-copy{padding-bottom:22px}

/* Reserve equal description and illustration space for every accordion stage. */
.work-process .process-copy{box-sizing:border-box;min-height:var(--process-description-height,0px)}
.work-process .process-figure img{height:390px}
@media(max-width:700px){.work-process .process-figure img{height:300px}}