/* V8 — an architectural route: connected, staggered stages on a dark drawing board.
   The route is vertical below 900px. Native details work with or without JavaScript. */
.wf-section{
  --wf-petrol:#28565d;
  --wf-gap:clamp(15px,2vw,28px);
  --wf-drop:54px;
  --wf-pad:clamp(17px,1.8vw,25px);
}
.wf-section .sec-head{margin-bottom:44px}
.wf-section .h2 em{color:var(--wf-petrol)}
.wf-panel{position:relative;isolation:isolate;overflow:hidden;padding:26px clamp(20px,3vw,42px) 40px;border:1px solid #355258;background:linear-gradient(118deg,#19363c 0%,#202d31 55%,#272d2e 100%);color:var(--sand);box-shadow:0 24px 52px -32px rgba(27,46,49,.55)}
.wf-panel::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(rgba(199,223,220,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(199,223,220,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(180deg,#000,transparent 95%)}
.wf-panel::after{content:"";position:absolute;z-index:-1;left:-145px;bottom:-245px;width:460px;height:460px;border:1px solid rgba(137,194,206,.12);border-radius:50%;box-shadow:0 0 0 32px rgba(137,194,206,.025),0 0 0 64px rgba(137,194,206,.02);pointer-events:none}
.wf-panel-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;color:#b4c9c9;font-size:.64rem;font-weight:500;font-stretch:115%;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.wf-panel-range{display:flex;align-items:center;gap:14px;color:#d7e5df;font-variant-numeric:tabular-nums}
.wf-panel-range .ic{width:28px;height:16px;color:#8badb1}
.wf-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wf-gap);align-items:start;position:relative}
.wf-item{position:relative;min-width:0;padding-top:var(--wf-drop);--wf-accent:#89c2ce;--wf-rgb:137,194,206;--wf-next:#b8c7a4;--wf-delay:0ms}
.wf-item-2{--wf-accent:#b8c7a4;--wf-rgb:184,199,164;--wf-next:#e9b95e;--wf-delay:110ms;--wf-drop:84px}
.wf-item-3{--wf-accent:#e9b95e;--wf-rgb:233,185,94;--wf-next:#e0a088;--wf-delay:220ms}
.wf-item-4{--wf-accent:#e0a088;--wf-rgb:224,160,136;--wf-delay:330ms;--wf-drop:84px}
.wf-step{position:relative;border:1px solid rgba(var(--wf-rgb),.24);border-top:2px solid var(--wf-accent);background:linear-gradient(145deg,rgba(var(--wf-rgb),.075),rgba(var(--wf-rgb),0) 64%),#263438;box-shadow:0 20px 28px -23px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.035);transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.wf-summary{position:relative;display:flex;flex-direction:column;min-height:304px;padding:24px var(--wf-pad) 20px;cursor:pointer;list-style:none}
.wf-summary::-webkit-details-marker,.wf-complete>summary::-webkit-details-marker{display:none}
.wf-summary:focus-visible{outline:2px solid var(--wf-accent);outline-offset:5px}
.wf-visual{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:72px;margin-bottom:24px}
.wf-number{display:block;font-size:clamp(3.5rem,5.4vw,5.05rem);font-weight:300;font-stretch:90%;line-height:.88;letter-spacing:-.065em;color:var(--wf-accent);transition:transform .28s var(--ease),text-shadow .28s var(--ease)}
.wf-icon{display:flex;align-items:center;justify-content:center;flex:none;width:clamp(35px,3.4vw,48px);height:clamp(35px,3.4vw,48px);border:1px solid rgba(var(--wf-rgb),.35);border-radius:50%;background:rgba(var(--wf-rgb),.06);color:var(--wf-accent);transition:transform .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease)}
.wf-icon .ic{width:53%;height:53%;stroke-width:1.55}
.wf-copy{display:flex;flex:1;flex-direction:column}
.wf-title{display:block;font-size:clamp(1.25rem,1.75vw,1.65rem);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin-bottom:11px;color:var(--sand)}
.wf-overview{display:block;max-width:23ch;font-size:.9rem;line-height:1.55;color:#c0ccca;min-height:3.1em}
.wf-condition{display:block;margin-top:6px;font-size:.7rem;color:var(--wf-accent);line-height:1.4}
.wf-toggle{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:22px;margin-top:auto;color:var(--wf-accent);font-size:.73rem;font-weight:500;line-height:1.4}
.wf-toggle-mark{display:flex;align-items:center;justify-content:center;flex:none;width:27px;height:27px;border:1px solid rgba(var(--wf-rgb),.35);transition:background-color .25s,border-color .25s}
.wf-toggle-mark .ic{width:15px;height:15px;transition:transform .28s var(--ease)}
.wf-label-open{display:none}
.wf-step[open] .wf-label-open{display:inline}
.wf-step[open] .wf-label-closed{display:none}
.wf-step[open] .wf-toggle-mark .ic{transform:rotate(45deg)}
.wf-step[open] .wf-toggle-mark{background:rgba(var(--wf-rgb),.13);border-color:var(--wf-accent)}
.wf-step[open],.wf-step:focus-within{border-color:var(--wf-accent);box-shadow:0 22px 32px -22px rgba(0,0,0,.85),0 0 25px -16px var(--wf-accent)}
.wf-step[open] .wf-icon{background:rgba(var(--wf-rgb),.17);border-color:var(--wf-accent)}
.wf-waypoint{position:absolute;left:24px;top:6px;width:18px;height:18px;border:1px solid var(--wf-accent);border-radius:50%;background:#203238;box-shadow:0 0 0 5px rgba(var(--wf-rgb),.055);pointer-events:none;transition:background-color .28s,box-shadow .28s}
.wf-waypoint::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--wf-accent);box-shadow:0 0 9px rgba(var(--wf-rgb),.45)}
.wf-waypoint::after{content:"";position:absolute;top:17px;left:8px;width:1px;height:calc(var(--wf-drop) - 23px);background:linear-gradient(180deg,rgba(var(--wf-rgb),.8),rgba(var(--wf-rgb),.28))}
.wf-connector{position:absolute;pointer-events:none;top:14px;left:42px;right:calc(24px - var(--wf-gap));height:2px;background:linear-gradient(90deg,rgba(var(--wf-rgb),.4),var(--wf-next));opacity:.72;box-shadow:0 0 10px rgba(var(--wf-rgb),.12);transition:opacity .3s,box-shadow .3s}
.wf-connector::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--wf-accent),var(--wf-next));transform-origin:left}
.wf-connector::after{content:"";position:absolute;right:14px;top:-3px;width:8px;height:8px;border-top:2px solid var(--wf-next);border-right:2px solid var(--wf-next);transform:rotate(45deg)}
.wf-step[open]~.wf-waypoint{background:var(--wf-accent);box-shadow:0 0 0 5px rgba(var(--wf-rgb),.13),0 0 18px rgba(var(--wf-rgb),.3)}
.wf-step[open]~.wf-waypoint::before{background:#203238;box-shadow:none}
.wf-step[open]~.wf-connector{opacity:1;box-shadow:0 0 16px rgba(var(--wf-rgb),.35)}
.wf-detail{margin:0 var(--wf-pad);padding:18px 0 22px;border-top:1px solid rgba(var(--wf-rgb),.35);font-size:.87rem;line-height:1.7;color:#d0d9d5}
.wf-step[open] .wf-detail{animation:wf-detail-arrive .3s var(--ease) both}
.wf-foot{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px var(--wf-gap);align-items:start}
.wf-note{max-width:40ch;font-size:.88rem;line-height:1.6;color:var(--t2)}
.wf-complete>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-size:.88rem;font-weight:500;line-height:1.6;min-height:28px;color:var(--wf-petrol)}
.wf-complete>summary:focus-visible{outline:2px solid var(--wf-petrol);outline-offset:5px}
.wf-complete>summary:hover{text-decoration:underline;text-underline-offset:4px}
.wf-complete>summary .ic{width:17px;height:17px;transition:transform .22s var(--ease)}
.wf-complete[open]>summary .ic{transform:rotate(45deg)}
.wf-full{display:grid;grid-template-columns:minmax(0,1fr);gap:19px;margin-top:24px;padding-bottom:8px}
.wf-full>li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:15px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.wf-full>li:last-child{padding-bottom:0;border:0}
.wf-full-number{font-size:.72rem;line-height:1.8;font-weight:600;color:var(--wf-petrol);padding-top:2px}
.wf-full b{display:block;font-size:.91rem;font-weight:500;line-height:1.5}
.wf-full p{margin-top:5px;font-size:.88rem;line-height:1.6;color:var(--t2)}
.js .wf-panel[data-reveal]{transition-duration:.55s}
.wf-panel.is-in .wf-item{animation:wf-stage-arrive .65s var(--ease) var(--wf-delay) both}
.wf-panel.is-in .wf-connector::before{animation:wf-route-across .8s var(--ease) calc(var(--wf-delay) + 220ms) both}
.wf-panel.is-in .wf-waypoint::before{animation:wf-point-arrive .65s var(--ease) calc(var(--wf-delay) + 180ms) both}
@keyframes wf-stage-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes wf-route-across{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wf-route-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes wf-point-arrive{0%{transform:scale(.45);opacity:.5}55%{transform:scale(1.45)}100%{transform:scale(1);opacity:1}}
@keyframes wf-detail-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(hover:hover){
  .wf-step:hover{transform:translateY(-5px);border-color:rgba(var(--wf-rgb),.8);box-shadow:0 25px 35px -23px rgba(0,0,0,.9),0 0 24px -17px var(--wf-accent)}
  .wf-summary:hover .wf-icon{transform:translateY(-3px) rotate(-6deg);background:rgba(var(--wf-rgb),.16);border-color:var(--wf-accent)}
  .wf-summary:hover .wf-number{text-shadow:0 0 22px rgba(var(--wf-rgb),.23)}
  .wf-summary:hover .wf-toggle-mark{background:rgba(var(--wf-rgb),.15);border-color:var(--wf-accent)}
  .wf-step:hover~.wf-connector{opacity:1}
}
@media(max-width:1100px) and (min-width:901px){
  .wf-summary{min-height:296px;padding-top:21px}
  .wf-visual{gap:6px;margin-bottom:21px}
  .wf-number{font-size:3.55rem}
  .wf-icon{width:34px;height:34px}
  .wf-overview{font-size:.85rem}
  .wf-toggle{font-size:.68rem}
}
@media(max-width:900px){
  .wf-section{--wf-gap:24px;--wf-pad:24px}
  .wf-section .sec-head{margin-bottom:34px}
  .wf-panel{padding:24px 28px 30px}
  .wf-panel-meta{margin-bottom:27px}
  .wf-track{grid-template-columns:minmax(0,1fr);gap:var(--wf-gap)}
  .wf-item{padding:0 0 0 44px}
  .wf-summary{display:grid;grid-template-columns:82px minmax(0,1fr);gap:26px;align-items:start;min-height:0;padding:24px}
  .wf-visual{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;min-height:0;margin:0}
  .wf-number{font-size:4rem}
  .wf-icon{width:39px;height:39px;margin-left:4px}
  .wf-copy{padding-top:4px}
  .wf-title{font-size:1.65rem;margin-bottom:8px}
  .wf-overview{max-width:none;min-height:0;font-size:.94rem}
  .wf-toggle{padding-top:18px;margin-top:0;font-size:.78rem}
  .wf-toggle-mark{width:29px;height:29px}
  .wf-waypoint{top:32px;left:0;width:16px;height:16px}
  .wf-waypoint::before{inset:3px}
  .wf-waypoint::after{top:7px;left:15px;width:28px;height:1px;background:linear-gradient(90deg,var(--wf-accent),rgba(var(--wf-rgb),.3))}
  .wf-connector{top:48px;left:7px;right:auto;bottom:calc(-1 * var(--wf-gap) - 32px);width:2px;height:auto;background:linear-gradient(180deg,rgba(var(--wf-rgb),.4),var(--wf-next))}
  .wf-connector::before{background:linear-gradient(180deg,var(--wf-accent),var(--wf-next));transform-origin:top}
  .wf-connector::after{right:-3px;top:auto;bottom:15px;transform:rotate(135deg)}
  .wf-panel.is-in .wf-connector::before{animation-name:wf-route-down}
  .wf-detail{margin-left:24px;margin-right:24px;padding-top:18px;font-size:.91rem}
  .wf-foot{grid-template-columns:minmax(0,1fr);gap:15px}
  .wf-note{max-width:none}
  .wf-complete>summary{min-height:44px}
  .wf-full{max-width:75ch}
}
@media(max-width:560px){
  .wf-section{--wf-gap:22px}
  .wf-panel{padding:22px 17px 25px}
  .wf-panel-meta{font-size:.58rem;letter-spacing:.12em;gap:14px}
  .wf-panel-range{gap:9px}
  .wf-panel-range .ic{width:22px}
  .wf-item{padding-left:32px}
  .wf-summary{grid-template-columns:49px minmax(0,1fr);gap:14px;padding:20px 16px}
  .wf-visual{gap:16px}
  .wf-number{font-size:3.2rem}
  .wf-icon{width:32px;height:32px;margin-left:2px}
  .wf-title{font-size:clamp(1.17rem,5vw,1.45rem);letter-spacing:-.035em}
  .wf-overview{font-size:.85rem;line-height:1.5}
  .wf-condition{font-size:.68rem}
  .wf-toggle{font-size:.69rem;padding-top:15px;gap:5px}
  .wf-toggle-mark{width:25px;height:25px}
  .wf-waypoint::after{width:16px}
  .wf-detail{margin-left:16px;margin-right:16px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .wf-step,.wf-number,.wf-icon,.wf-toggle-mark,.wf-toggle-mark .ic,.wf-waypoint,.wf-connector,.wf-complete>summary .ic{transition:none}
  .wf-panel.is-in .wf-item,.wf-panel.is-in .wf-connector::before,.wf-panel.is-in .wf-waypoint::before,.wf-step[open] .wf-detail{animation:none}
  .wf-step:hover,.wf-summary:hover .wf-icon{transform:none}
}