/* The client process: seven readable stages with a progressive project timeline. */
#process.process-plan {
  --pj-ink: #123a4e;
  --pj-blue: var(--brand-blue-ink, #006da6);
  --pj-green: var(--brand-green-ink, #3e7610);
  padding-block: clamp(38px, 4vw, 64px);
  background: linear-gradient(120deg, #edf8fc 0%, #f5faf0 100%);
  color: var(--pj-ink);
  overflow: clip;
}
.process-plan .pj-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:30px; }
.process-plan .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.site-typography .process-plan h2 { margin:0; font-size:var(--site-heading-size); font-weight:400; line-height:1.13; letter-spacing:-.045em; color:var(--pj-ink); }
.process-plan h2 strong { font-weight:550; }
.process-plan .pj-layout { display:grid; grid-template-columns:1.07fr 1fr; gap:clamp(26px,4vw,62px); align-items:stretch; }
.process-plan .pj-timeline { position:relative; display:flex; flex-direction:column; min-width:0; }
.process-plan .pj-timeline:before { content:""; position:absolute; top:24px; bottom:28px; left:22px; width:1px; background:linear-gradient(#008fd54d,#579f1266); pointer-events:none; }
.process-plan .pj-step { position:relative; margin:0; min-width:0; border:0; border-bottom:1px solid #bddce299; border-radius:0; }
.process-plan .pj-step:last-child { border-bottom:0; }
.process-plan .pj-step summary { display:grid; grid-template-columns:44px 1fr 28px; align-items:center; gap:16px; min-height:67px; padding:12px 0; list-style:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.process-plan .pj-step summary::-webkit-details-marker { display:none; }
.process-plan .pj-step summary::marker { content:""; }
.process-plan .pj-step summary h3 { margin:0; font-size:clamp(16px,1.35vw,19px); font-weight:550; letter-spacing:-.025em; line-height:1.3; color:var(--pj-ink); }
.process-plan .pj-number { display:grid; place-items:center; width:44px; height:44px; position:relative; z-index:1; font-size:13px; font-weight:550; font-variant-numeric:tabular-nums; border-radius:50%; color:var(--pj-blue); background:#edf8fc; border:1px solid #b8dce7; transition:background .25s,color .25s,border-color .25s,box-shadow .25s; }
.process-plan .pj-toggle { display:grid; place-items:center; width:28px; height:28px; color:var(--pj-blue); border-radius:50%; transition:background .25s,transform .3s; }
.process-plan .pj-toggle svg { width:17px; height:17px; }
.process-plan .pj-step[open] .pj-number { color:#fff; background:var(--pj-blue); border-color:var(--pj-blue); box-shadow:0 0 0 5px #008fd50b; }
.process-plan .pj-step[open] summary h3 { color:var(--pj-blue); }
.process-plan .pj-step[open] .pj-toggle { transform:rotate(180deg); background:#d9efdf; color:#315f0c; }
.process-plan .pj-step summary:hover .pj-number { border-color:var(--pj-blue); }
.process-plan .pj-step summary:focus-visible { outline:2px solid var(--pj-blue); outline-offset:4px; border-radius:8px; }
.process-plan .pj-answer { padding:0 42px 19px 60px; }
.process-plan .pj-answer p { margin:0; color:#34586b; font-size:14px; line-height:1.75; }
.process-plan .pj-visual { position:relative; margin:0; min-height:530px; min-width:0; border-radius:24px; background:#07334b; overflow:hidden; isolation:isolate; }
.process-plan .pj-photo { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:53% center; z-index:-2; }
.process-plan .pj-visual:after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#0323338a 0%,transparent 30%,#0323330f 45%,#032333ed 100%); }
.process-plan .pj-visual figcaption { position:absolute; bottom:0; inset-inline:0; padding:28px; color:white; }
.process-plan .pj-current { display:flex; flex-direction:column; align-items:flex-start; gap:13px; margin-bottom:22px; line-height:1.25; color:#fff; }
.process-plan .pj-current-title { font-size:clamp(23px,2.2vw,34px); font-weight:500; letter-spacing:-.035em; max-width:24ch; }
.process-plan .pj-current-number { color:#d2f1ac; font-size:13px; font-variant-numeric:tabular-nums; font-weight:600; }
.process-plan .pj-progress { display:flex; gap:6px; }
.process-plan .pj-progress>span { height:3px; background:#ffffff3d; flex:1; border-radius:3px; transition:background .3s; }
.process-plan .pj-progress>span.is-current { background:#a8df6c; }
.process-plan .pj-progress>span.is-complete { background:#91cbe3; }
@media (min-width:1600px) {
  .process-plan .pj-layout { grid-template-columns:1fr 1fr; }
  .process-plan .pj-step summary { min-height:74px; }
  .process-plan .pj-answer p { font-size:15px; }
}
@media (max-width:900px) and (min-width:701px) {
  .process-plan .pj-layout { gap:25px; grid-template-columns:1.2fr 1fr; }
  .process-plan .pj-step summary { gap:12px; grid-template-columns:36px 1fr 24px; }
  .process-plan .pj-number { width:36px; height:36px; font-size:12px; }
  .process-plan .pj-timeline:before { left:18px; }
  .process-plan .pj-answer { padding-left:48px; padding-right:10px; }
  .process-plan .pj-visual figcaption { padding:22px; }
  .process-plan .pj-current-title { font-size:23px; }
}
@media (max-width:700px) {
  #process.process-plan { padding-block:36px; }
  .process-plan .pj-heading { display:block; margin-bottom:24px; }
  .process-plan .pj-layout { grid-template-columns:1fr; gap:28px; }
  .process-plan .pj-step summary { min-height:67px; gap:12px; grid-template-columns:36px 1fr 24px; padding-block:12px; }
  .process-plan .pj-number { width:36px; height:36px; font-size:12px; }
  .process-plan .pj-timeline:before { left:18px; }
  .process-plan .pj-step summary h3 { font-size:16px; line-height:1.35; letter-spacing:-.02em; }
  .process-plan .pj-answer { padding:0 24px 18px 48px; }
  .process-plan .pj-answer p { font-size:14px; line-height:1.65; }
  .process-plan .pj-visual { min-height:275px; border-radius:20px; }
  .process-plan .pj-photo { object-position:center 68%; }
  .process-plan .pj-visual figcaption { padding:20px; }
  .process-plan .pj-current-title { font-size:24px; max-width:19ch; }
  .process-plan .pj-current { gap:9px; margin-bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .process-plan *, .process-plan *:before, .process-plan *:after { animation:none!important; transition:none!important; }
}