/* An illustrated working sequence: native tabs remain the controls. */
.method{padding-block:36px}
.workflow-header{position:relative;isolation:isolate;overflow:hidden;padding:28px 28px 20px;margin-bottom:20px;background:#edece2;border-top:var(--section-rule-width) solid var(--section-rule);border-bottom:0}
.workflow-header-art{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.workflow-header-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s ease}
.workflow-header-art>img[data-active=true]{opacity:.78}
.workflow-header:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#f6f4ec 0%,#f6f4ecf5 27%,#f6f4ec30 49%,#f6f4ec3d 65%,#f6f4ecf5 78%,#f6f4ec 100%),linear-gradient(0deg,#f6f4ecf5,transparent 34%)}
.method .section-head{margin-bottom:0;align-items:center;position:relative;gap:28px}
.workflow-header .section-head>div{flex:0 0 31%}
.workflow-header .section-head>p{flex:0 0 25%;color:var(--ink);padding-left:20px}
.workflow-header .method-controls{position:relative;margin-bottom:0}
.workflow-header .demo-label{background:#f6f4eceb;padding:3px 6px}
.method .section-head h2{font-size:42px;line-height:1.08;margin:18px 0 0;letter-spacing:-.045em}
.method .section-head>p{font-size:14px;line-height:1.65;max-width:36ch}
.method-controls{margin:24px 0 16px;gap:12px}
.method-controls>label{font-size:11px;font-weight:650;color:var(--forest)}
.method-controls select{padding:9px 32px 9px 12px;border:1px solid #a3ae9c;background:var(--panel);font-size:13px;min-width:240px}
.method-controls select:focus-visible{outline:2px solid #477a5e;outline-offset:3px}
.method-controls .demo-label{margin-left:auto;font-size:10px;color:var(--muted)}
.method-board{grid-template-columns:250px minmax(0,1fr);min-height:0;border:0;border-bottom:var(--section-rule-width) solid var(--section-rule)}
.method-steps{position:relative;padding:24px 24px 24px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.method-steps:before{content:'';position:absolute;width:1px;left:26px;top:50px;bottom:50px;background:var(--line);pointer-events:none}
.method-steps button{position:relative;gap:15px;min-height:64px;padding:10px 12px 10px 8px;border:1px solid transparent;font-size:14px;transition:background .2s,border-color .2s}
.method-steps button>span{display:grid;place-items:center;position:relative;z-index:1;flex:0 0 36px;width:36px;height:36px;border:1px solid #abb8a5;border-radius:50%;background:var(--paper);font-size:11px;font-weight:700;color:var(--forest)}
.method-steps button>b{font-size:20px}
.method-steps button[aria-selected=true]{background:#e4eadb;border-color:#a8b99c}
.method-steps button[aria-selected=true]>span{background:var(--signal);border-color:var(--signal-deep);box-shadow:0 0 0 4px var(--paper)}
.method-steps button:hover{background:var(--panel)}
#step-panel{padding:18px 0 18px 32px;min-height:0}
.workflow-content-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.workflow-copy{min-width:0}
.workflow-study{position:relative;align-self:stretch;margin:0;min-height:200px;overflow:hidden;background:var(--panel)}
.workflow-study>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .24s ease;filter:saturate(.9) contrast(.98)}
.workflow-study>img.is-changing{opacity:0;transition-duration:.15s}
.method .workflow-copy .spec-output{margin-bottom:0}
@media(max-width:700px){.workflow-content-layout{grid-template-columns:1fr;gap:20px}.workflow-study{min-height:0;aspect-ratio:3/2}}
@media(prefers-reduced-motion:reduce){.workflow-study>img{transition:none}}
.workflow-art{width:100%;margin:0 0 15px;border-bottom:0}
.workflow-art>svg{display:block;width:100%;height:166px;overflow:visible}
.workflow-art-caption{display:none}
.workflow-art-trace{fill:none;stroke:#aab4a3;stroke-width:1.3}
.workflow-art-return{fill:none;stroke:#b7bdae;stroke-width:.8}
.workflow-art-node .workflow-art-object{fill:none;stroke:var(--forest);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;color:var(--forest)}
.workflow-art-lift{transform-box:fill-box;transform-origin:center;transform:translateY(0) scale(1);opacity:.58;transition:transform .65s cubic-bezier(.22,.68,.22,1),opacity .5s ease}
.workflow-art-halo{fill:var(--selection-accent);fill-opacity:.04;stroke:var(--selection-shade);stroke-opacity:.16;stroke-width:.8;transition:fill-opacity .55s,stroke-opacity .55s}
.workflow-art-object .workflow-paper{fill:var(--paper)}
.workflow-art-object .workflow-plane{fill:var(--selection-accent);fill-opacity:.22;transition:fill-opacity .5s ease}
.workflow-art-object .workflow-detail{fill:var(--selection-shade);fill-opacity:.3;transition:fill-opacity .5s ease}
.workflow-art-stem{stroke:#aab4a3;stroke-width:1}
.workflow-art-stop{fill:var(--paper);stroke:#97a38e;stroke-width:1}
.workflow-art-traveler{transition:transform .8s cubic-bezier(.22,.68,.22,1);pointer-events:none}
.workflow-traveler-ring{fill:var(--paper);stroke:var(--selection-shade);stroke-width:1.2;transition:stroke .5s ease}
.workflow-traveler-dot{fill:var(--selection-shade);transition:fill .5s ease}
.workflow-art-node.is-current .workflow-art-lift{opacity:1;transform:translateY(-3px) scale(1.025)}
.workflow-art-node.is-current .workflow-art-halo{fill-opacity:.18;stroke-opacity:.65}
.workflow-art-node.is-current .workflow-plane{fill-opacity:.9}
.workflow-art-node.is-current .workflow-detail{fill-opacity:.8}
.workflow-art-node.is-past .workflow-art-lift{opacity:.76}
.workflow-art-node text{fill:#6a7467;font:13px var(--body);transform:translateY(12px)}
.workflow-art-node.is-current text{fill:var(--forest);font-weight:700}
.method .panel-top{display:none}
.method .human-badge{font-size:10px;letter-spacing:0;background:#e5ebdd;padding:4px 8px;border-radius:2px}
.method .human-badge .dot{display:block;background:var(--forest)}
.method #step-title{font-size:28px;line-height:1.2;margin:12px 0 9px}
.method #step-description{font-size:13px;line-height:1.6}
.method .spec-output{margin-block:16px;padding-left:15px}
.method .spec-output .tag{font-size:9px}
.method .spec-output h4{font-size:14px;margin:6px 0 7px}
.method .spec-output ul{font-size:12px;line-height:1.7}
.method .panel-bottom{padding-top:10px;font-size:10px;justify-content:flex-end}
.method #next-step{display:flex;align-items:center;justify-content:center;gap:15px;padding:8px 14px;min-height:44px;background:var(--forest);color:var(--paper);font-size:11px;font-weight:650}
.method #next-step:hover{background:var(--ink)}
@media(max-width:1000px){.method-board{grid-template-columns:210px minmax(0,1fr)}.method-steps{padding-right:16px}.method-steps button{font-size:12px;gap:10px}#step-panel{padding-left:24px}}
@media(max-width:850px){.method{padding-block:40px}.method .section-head h2{font-size:38px}.method-steps{flex-direction:row;border-right:0;border-bottom:0;padding:14px 0;gap:6px}.method-steps:before{height:1px;width:auto;left:25px;right:25px;top:42px;bottom:auto}.method-board{grid-template-columns:1fr}.method-steps button{flex:1;flex-direction:column;font-size:11px;gap:7px;padding:9px 2px;min-width:0;min-height:82px}.method-steps button>b{display:none}.method-steps button>span{font-size:11px}#step-panel{padding:18px 0 20px}.method .section-head>p{max-width:34ch}.method-controls .demo-label{font-size:9px}}
@media(max-width:560px){.method{padding-block:32px}.method>.section-head{display:block}.method .section-head h2{font-size:36px;margin-top:16px}.method .section-head>p{margin-top:14px;font-size:13px;max-width:none}.method-controls{display:grid;grid-template-columns:1fr;margin:18px 0 14px;gap:4px}.method-controls select{width:100%;min-width:0;font-size:13px;margin:0}.method-controls .demo-label{margin:3px 0 0}.method-steps{gap:3px;padding:12px 0}.method-steps button{font-size:9px;min-height:76px;gap:7px}.method-steps button>span{width:30px;height:30px;flex-basis:30px;font-size:10px}.method-steps:before{top:37px}.workflow-art{margin-bottom:12px}.method #step-title{font-size:26px}.method .spec-output ul{font-size:12px}.method .panel-bottom{flex-wrap:wrap;gap:8px}.method .panel-bottom>span{font-size:9px}.method .panel-top{font-size:9px}.method .human-badge{font-size:9px}}
@media(max-width:850px){.workflow-art>svg{height:auto;max-height:150px}}
@media(max-width:850px){.workflow-header{padding:22px 22px 18px}.workflow-header .section-head>div{flex-basis:45%}.workflow-header .section-head>p{flex-basis:36%}.workflow-header:after{background:linear-gradient(90deg,#f6f4ecf5 0%,#f6f4ecdf 37%,#f6f4ec44 56%,#f6f4eceb 76%,#f6f4ec 100%),linear-gradient(0deg,#f6f4ecf5,transparent 45%)}}
@media(max-width:560px){.workflow-header{padding:20px 18px 18px;margin-bottom:6px}.method .workflow-header .section-head{display:block}.workflow-header .section-head>p{max-width:none;margin-top:15px;padding-left:0}.workflow-header-art>img[data-active=true]{opacity:.32}.workflow-header:after{background:linear-gradient(90deg,#f6f4ecf0,#f6f4ecb8),linear-gradient(0deg,#f6f4ec,transparent 60%)}.workflow-header .method-controls{margin-top:18px}.workflow-header .demo-label{padding-left:0}}
@media(prefers-reduced-motion:reduce){.workflow-header-art>img{transition:none}}
@media(max-width:560px){.workflow-art-node text{display:none}.workflow-art-caption{display:block;font-size:10px;font-weight:650;color:var(--forest);text-align:center;margin:0 0 10px}}
@media(prefers-reduced-motion:reduce){.workflow-art-lift,.workflow-art-halo,.workflow-plane,.workflow-detail,.workflow-art-traveler,.workflow-traveler-ring,.workflow-traveler-dot,.method-steps button{transition:none}.workflow-art-node.is-current .workflow-art-lift{transform:none}}
@media(max-width:680px){
  .workflow-header{display:flex;flex-direction:column;background:var(--paper)}
  .workflow-header::after{display:none}
  .workflow-header>.section-head{order:0}
  .workflow-header>.workflow-header-art{position:relative;inset:auto;z-index:auto;order:1;width:100%;aspect-ratio:16/9;margin:16px auto 0}
  .workflow-header-art>img[data-active=true]{opacity:1}
  .workflow-header>.workflow-art{order:2;width:min(100%,360px);margin:12px auto 0;border-bottom:0}
  .workflow-header>.workflow-art>svg{height:auto;max-height:none}
  .workflow-header>.method-controls{order:3}
}

/* Keep the introduction and selector together beside the illustration. */
@media(min-width:681px){
  .workflow-header{min-height:340px;margin-bottom:12px;background:var(--paper)}
  .method .workflow-header .section-head{display:block;width:42%}
  .workflow-header .section-head>div{width:100%}
  .method .workflow-header #method-title{font-size:clamp(30px,3.3vw,42px);max-width:none}
  .workflow-header .chapter-label{white-space:nowrap}
  #method-title br{display:none}
  .method .workflow-header .section-head>p{max-width:29ch;margin:14px 0 0;padding:0}
  .workflow-header .method-controls{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:42%;margin-top:16px}
  .workflow-header .method-controls select{width:240px;max-width:100%;min-width:0}
  .workflow-header-art{inset:0 -5% 0 23%}
  .workflow-header:after{background:linear-gradient(90deg,#f6f4ec 0%,#f6f4ecf5 26%,#f6f4ec99 35%,#f6f4ec00 48%,#f6f4ec00 91%,#f6f4ec 100%),linear-gradient(0deg,#f6f4ec,transparent 28%)}
}

/* Desktop inset aligns stage choices with the introduction and gives copy breathing room. */
@media(min-width:1061px){
  .method-steps{padding-left:28px}
  .method-steps:before{left:54px}
  .workflow-content-layout{padding-left:24px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

/* Extend the illustrated wall into the open desktop margin; smaller views keep
   their existing image, crop and spacing. The active image owns the theme. */
.workflow-wall-art{display:none}
@media(min-width:1280px){
 .workflow-wall-art{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
 .workflow-header>.section-head,.workflow-header>.method-controls{z-index:1}
 .workflow-wall-scene{opacity:0;transition:opacity .65s ease}
 .workflow-header:has(img[data-workflow-background=visual][data-active=true]) [data-wall-art=visual],
 .workflow-header:has(img[data-workflow-background=brand][data-active=true]) [data-wall-art=brand],
 .workflow-header:has(img[data-workflow-background=agent][data-active=true]) [data-wall-art=agent]{opacity:1}
 .workflow-wall-art path,.workflow-wall-art rect,.workflow-wall-art circle{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
 .workflow-wall-art .wall-route{fill:none;stroke:#7e876a;stroke-width:.8;opacity:.42}
 .workflow-wall-art .wall-gold{fill:none;stroke:#b8985d;stroke-width:.8;opacity:.44}
 .workflow-wall-art .wall-paper{fill:#f6f4ec;fill-opacity:.65;stroke:#a49c7b;stroke-width:.75;stroke-opacity:.48}
 .workflow-wall-art .wall-fine{fill:none;stroke:#8a8d72;stroke-width:.7;opacity:.44}
 .workflow-wall-art .wall-grid{fill:none;stroke:#a9ae90;stroke-width:.55;opacity:.18}
 .workflow-wall-art .wall-wash{opacity:.22;stroke:none}
 .workflow-wall-art .wall-node{opacity:.48;stroke:none}
}
@media(prefers-reduced-motion:reduce){.workflow-wall-scene{transition:none}}
@media(forced-colors:active){.workflow-wall-art{display:none}}

/* Lift the complete workflow presentation while keeping its lower gold rule
   and the following section at their established positions. */
.home-page #method>.workflow-header,
.home-page #method>.method-board>*{position:relative;top:-25px}
/* Close the desktop gap below the swappable illustration, bringing the lower
   navigation, content, photographs and bottom rule up together. */
@media(min-width:1061px){.home-page #method>.method-board{margin-top:-25px}}